/*
 * usha-tokens.css — UshaKiranam design tokens (v1)
 *
 * Source of truth: docs/design-handoff/ushakiranam-homepage-v1/TOKENS.md.
 * This file mirrors that doc's `:root` block verbatim. Do NOT introduce new
 * hex values, fonts, spacings, or sizes here — extend TOKENS.md first.
 */

:root {
  /* ----- Brand ------------------------------------------------------- */
  --color-navy:           #0E2540;
  --color-navy-deep:      #061A30;
  --color-sunrise-orange: #F58423;
  --color-orange-deep:    #DC6B0F;
  --color-gold:           #F9B233;

  /* ----- Cherry red — BREAKING NEWS + section accents only ----------- */
  --color-red:        #D92338;
  --color-red-deep:   #B41A2D;

  /* ----- Baby pink — LEAD/HERO surfaces + newsletter only ------------ */
  --color-pink:        #FCD8E3;
  --color-pink-soft:   #FDE6EE;
  --color-pink-deep:   #F4B6C9;

  /* ----- Surfaces ---------------------------------------------------- */
  --color-bg:        #FFFFFF;
  --color-bg-warm:   #FAF7F0;   /* newsprint off-white */
  --color-surface:   #F4EFE5;   /* warm card surface */

  /* ----- Borders ----------------------------------------------------- */
  --color-border:        #E6E1D5;
  --color-border-cool:   #E2E6EB;
  --color-border-strong: #C9C2B0;

  /* ----- Text -------------------------------------------------------- */
  --color-text:        #0A0A0A; /* article body, headlines */
  --color-text-soft:   #1F2937;
  --color-muted:       #4B5563;
  --color-faint:       #9AA3AE;

  /* ----- Telugu font stack — display + body -------------------------- */
  --font-display: "Ramabhadra", "Mandali", "Noto Serif Telugu", serif;
  --font-body:    "Mandali", "Noto Sans Telugu", system-ui, sans-serif;
  --font-ui:      "Mandali", "Noto Sans Telugu", system-ui, sans-serif;
  --font-latin:   "DM Sans", system-ui, sans-serif;

  /* ----- Headline scale (Ramabhadra) --------------------------------- */
  --fs-h1-mobile:  24px;
  --fs-h1-desktop: 32px;
  --fs-h2:         22px;
  --fs-h3:         19px;
  --fs-h4:         16px;
  --fs-h5:         14px;

  /* ----- Body scale (Mandali) ---------------------------------------- */
  --fs-article-body-mobile:  18px;
  --fs-article-body-desktop: 19px;
  --fs-body:                 15px;
  --fs-meta:                 13px;
  --fs-time:                 12px;
  --fs-micro:                11px;

  /* ----- Line heights ------------------------------------------------ */
  --lh-headline: 1.28;
  --lh-h1:       1.22;
  --lh-body:     1.72;        /* article body — wide for Telugu */
  --lh-tight:    1.32;
  --lh-meta:     1.45;

  /* ----- Letter spacing ---------------------------------------------- */
  --tracking-headline: -0.2px;
  --tracking-h1:       -0.4px;
  --tracking-label:     0.4px;

  /* ----- Spacing scale (4px base) ------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;   /* mobile gutter */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;   /* desktop gutter */
  --space-12: 48px;
  --space-16: 64px;

  /* ----- Border radius ----------------------------------------------- */
  --radius-sm: 4px;     /* pills, image thumbs */
  --radius:    6px;     /* cards, ads */
  --radius-lg: 8px;     /* hero card, newsletter */
  --radius-pill: 999px; /* filter chips */

  /* ----- Dividers ---------------------------------------------------- */
  --divider:        var(--color-border);          /* between list cards */
  --divider-strong: var(--color-border-strong);   /* section separators */
  --divider-cool:   var(--color-border-cool);     /* non-content separators */

  /* ----- Shadows — flat newsprint; avoid card shadows entirely ------- */
  --shadow-none:    none;
  --shadow-drawer:  8px 0 32px rgba(0, 0, 0, 0.18);
  --shadow-focus:   0 0 0 2px rgba(217, 35, 56, 0.35);

  /* ----- Header / nav / strip heights -------------------------------- */
  --header-mobile-utility-height:  26px;
  --header-mobile-main-height:     72px;
  --breaking-strip-height:         38px;
  --bottom-nav-height:             64px;
  --header-desktop-utility-height: 32px;
  --header-desktop-masthead-height: 120px;
  --nav-desktop-height:            46px;

  /* ----- Logo sizes (aspect 4.018:1) --------------------------------- */
  --logo-header-mobile-max-h:  60px;
  --logo-header-desktop-max-h: 96px;
  --logo-footer-max-h:         64px;
  --logo-social-max-h:        180px;

  /* ----- Content widths --------------------------------------------- */
  --content-max-width: 1320px;
  --article-max-width: 720px;
  --sidebar-width:     360px;

  /* ----- Category accent tokens (additive, Phase 1A) -----------------
   * Used by upcoming homepage rail .rd-section-card--<slug> accent
   * borders. Values reuse the existing rd-badge ink colors in
   * redesign.css so the rail accent visually matches the category
   * pill. Spiritual + lifestyle + opinion have no rd-badge colors yet;
   * spiritual borrows a plum from the existing pink/red family,
   * opinion uses navy, lifestyle uses red-deep. Strictly additive:
   * no existing token is changed.
   */
  --acc-ap:            #0C447C;
  --acc-ts:            #085041;
  --acc-national:      #3C3489;
  --acc-international: #712B13;
  --acc-cinema:        #72243E;
  --acc-sports:        #27500A;
  --acc-business:      #633806;
  --acc-spiritual:     #5B3D8C;
  --acc-technology:    #1F2937;
  --acc-opinion:       #0E2540;
  --acc-lifestyle:     #B41A2D;
}

/* ---------------------------------------------------------------------
 * Layout-level visibility utilities.
 * Mobile-first source of truth — desktop layers up at min-width: 768.
 * ------------------------------------------------------------------ */
.mobile-only  { display: block; }
.desktop-only { display: none; }
@media (min-width: 768px) {
  .mobile-only  { display: none; }
  .desktop-only { display: block; }
  .desktop-only.flex { display: flex; }
  .desktop-only.grid { display: grid; }
}