/* ============================================================================
   Varahi9 Media — public site design tokens.

   Every number below is traceable to the three competitor teardowns in
   /references. Where the competitors disagreed, the choice and its reason are
   recorded in the comment.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------- */
  --v9-saffron: #D94F04;
  --v9-saffron-dark: #B33F02;
  --v9-gold:    #E8A33D;
  --v9-ink:     #14171F;

  /* Category spines. A Telugu reader scans by colour before they read the
     label, so each section keeps ONE colour everywhere it appears. */
  --cat-politics: #C2410C;
  --cat-ap:       #1D4ED8;
  --cat-ts:       #7C3AED;
  --cat-cinema:   #BE185D;
  --cat-sports:   #047857;
  --cat-business: #B45309;
  --cat-nri:      #0E7490;
  --cat-live:     #DC2626;

  /* ---- Surfaces (light is the public default) ---------------------------- */
  --bg:         #FFFFFF;
  --bg-alt:     #F6F5F2;     /* warm, not blue-grey: newsprint, not SaaS */
  --bg-sunken:  #EFEDE8;
  --bg-invert:  #14171F;
  --surface:    #FFFFFF;
  --hover:      rgba(20,23,31,.04);

  --line:        #E3E0DA;
  --line-strong: #CFCBC2;

  --fg:      #14171F;
  --fg-soft: #4B5261;
  --fg-mute: #5F6672;   /* was #757D8C = 3.54:1 on the e-paper band; now 4.94 */
  --fg-inv:  #FFFFFF;
  --link:    #A03A03;

  /* Text drawn ON an inverted panel (the video band). This is NOT --fg-inv:
     in dark mode the panel stops being inverted, so a token defined as "the
     opposite of --fg" becomes dark-on-dark. This one tracks the panel. */
  --on-invert: #FFFFFF;

  /* Saffron at text weight. The brand orange is 4.14:1 on white — under the
     4.5 a 13px kicker needs — so text gets its own darker token and the bright
     original stays for fills, rules and the logo ramp. */
  --v9-saffron-text: #B33F02;   /* 5.79 on white, 5.31 on the warm band */
  --btn-bg: #B33F02;
  --btn-fg: #FFFFFF;

  /* Text on a saturated "hot" fill (LIVE, BREAKING). Same trap as --on-invert:
     the fill gets brighter in dark mode, so the text on it has to get darker. */
  --on-hot: #FFFFFF;

  /* ---- Type -------------------------------------------------------------- */
  /* Telugu is the primary script. The Latin stack is the FALLBACK, not the
     other way round — a Telugu-first site whose CSS lists Inter first will
     render numerals and punctuation in a face that does not match the script. */
  --font-te: "Noto Sans Telugu", "Ramabhadra", "Gautami", "Nirmala UI", sans-serif;
  --font-la: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif-te: "Noto Serif Telugu", "Noto Sans Telugu", serif;

  /* Teardown evidence:
       AndhraPravasi body 17px / line-height 1.80  ← most readable of the three
       NTV Telugu      body 16px / line-height 1.36
       Sakshi          body 15px / line-height 1.20 ← noticeably cramped
     Telugu has tall ascenders and deep below-baseline marks; at 1.2 the marks of
     one line collide with the next. 1.75 is adopted as the floor. */
  --fs-body: 17px;
  --lh-te: 1.78;
  --lh-la: 1.55;

  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 15px;  --fs-lg: 18px;
  --fs-xl: 21px;  --fs-2xl: 26px; --fs-3xl: 32px; --fs-4xl: 40px; --fs-5xl: 52px;

  /* Headlines set tighter than body, but never below 1.35 in Telugu. */
  --lh-head: 1.38;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Layout ------------------------------------------------------------ */
  /* 1280px content width: AndhraPravasi 1200, NTV 1230, Sakshi 1170. 1280 with
     24px gutters gives a 3-column news grid at a comfortable 380px column. */
  --container: 1280px;
  --gutter: 24px;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --r-sm: 3px; --r-md: 6px; --r-lg: 10px; --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(20,23,31,.06);
  --shadow-md: 0 6px 20px rgba(20,23,31,.10);
  --shadow-lg: 0 20px 50px rgba(20,23,31,.16);

  --header-h: 68px;
  --header-h-sticky: 52px;

  --dur: 200ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

/* Dark mode is a first-class theme, not an inversion filter. Telugu glyphs are
   dense; pure white on pure black blooms, so the dark palette uses a soft off-
   white on a warm near-black. */
:root[data-theme="dark"] {
  --bg:#12141A; --bg-alt:#181B22; --bg-sunken:#0D0F14; --surface:#181B22;
  --bg-invert:#F6F5F2; --hover:rgba(255,255,255,.05);
  --line:#262A33; --line-strong:#39404D;
  --fg:#E8E6E1; --fg-soft:#A9AFBA; --fg-mute:#949DAD; --fg-inv:#14171F;
  --link:#F0894A;
  --v9-saffron:#F2703A;
  --on-invert:#E8E6E1;
  --v9-saffron-text:#FF8A4C;
  /* A bright button on a dark page takes dark text: white on #F2703A is 2.94. */
  --btn-bg:#F2703A; --btn-fg:#14171F;
  --on-hot:#14171F;

  /* Category hues re-lit for a dark ground. The light-mode values score
     2.75-3.67 here, which is unreadable at 13px. */
  --cat-politics:#FB923C; --cat-ap:#7DA9FF; --cat-ts:#C4A5FD;
  --cat-cinema:#F472B6;  --cat-sports:#34D399; --cat-business:#FBBF24;
  --cat-nri:#38BDF8;     --cat-live:#F87171;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px rgba(0,0,0,.5);
  --shadow-lg:0 20px 50px rgba(0,0,0,.6);
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
}