/* ============================================================
   Design tokens — GujaratiLyrics
   Port target: Astro global stylesheet (src/styles/tokens.css)
   Every colour is defined on bare :root first, then overridden
   for dark. Never define a colour only inside a media query.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --paper:        #FCF9F4;   /* page ground — warm off-white */
  --surface:      #FFFFFF;   /* cards */
  --surface-2:    #F5F0E8;   /* inset / hover */
  --surface-3:    #EDE5D9;   /* stronger inset */

  /* ---- Ink ---- */
  --ink:          #1C1917;
  --ink-2:        #57534E;
  --ink-3:        #8B8178;

  /* ---- Lines ---- */
  --line:         #E8DFD2;
  --line-strong:  #D6C9B6;

  /* ---- Brand ---- */
  --accent:       #C2410C;   /* terracotta — primary action */
  --accent-hover: #9A330A;
  --accent-ink:   #FFFFFF;
  --accent-soft:  #FCEBDC;   /* tinted background */
  --accent-line:  #F3D2B4;

  --gold:         #A16207;   /* marigold — secondary / seasonal */
  --gold-soft:    #FBF1DA;
  --gold-line:    #EBD9A9;

  --indigo:       #3730A3;   /* AI / semantic-search cues */
  --indigo-soft:  #EEF0FC;
  --indigo-line:  #D3D6F5;

  /* ---- Type ---- */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-guj:     'Noto Sans Gujarati', 'Inter', system-ui, sans-serif;
  --font-display: 'Baloo Bhai 2', 'Noto Sans Gujarati', system-ui, sans-serif;
  --font-lyric:   'Noto Serif Gujarati', 'Noto Sans Gujarati', Georgia, serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;

  /* Lyric body size — driven by the A-/A+ control at runtime */
  --lyric-size: 1.375rem;
  --lyric-leading: 2.15;

  /* ---- Space (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --shadow:    0 2px 4px rgba(28,25,23,.04), 0 8px 24px rgba(28,25,23,.07);
  --shadow-lg: 0 8px 16px rgba(28,25,23,.06), 0 24px 56px rgba(28,25,23,.14);

  /* ---- Layout ---- */
  --wrap:    1180px;
  --wrap-sm: 780px;
  --read:    668px;   /* optimal lyric measure */
  --header-h: 60px;
}

/* System dark (no explicit choice stamped) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #131110;
    --surface:     #1C1917;
    --surface-2:   #262220;
    --surface-3:   #322C28;

    --ink:         #F5F0E8;
    --ink-2:       #B9AFA4;
    --ink-3:       #877D73;

    --line:        #2E2926;
    --line-strong: #423A35;

    --accent:      #F97316;
    --accent-hover:#FB923C;
    --accent-ink:  #1C1006;
    --accent-soft: #33190C;
    --accent-line: #5A2C13;

    --gold:        #E0AE44;
    --gold-soft:   #2E2410;
    --gold-line:   #4D3D1B;

    --indigo:      #A5B4FC;
    --indigo-soft: #1B1B33;
    --indigo-line: #333257;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.34);
    --shadow-lg: 0 10px 20px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.5);
  }
}

/* Explicit dark choice wins in both directions */
:root[data-theme="dark"] {
  --paper:       #131110;
  --surface:     #1C1917;
  --surface-2:   #262220;
  --surface-3:   #322C28;

  --ink:         #F5F0E8;
  --ink-2:       #B9AFA4;
  --ink-3:       #877D73;

  --line:        #2E2926;
  --line-strong: #423A35;

  --accent:      #F97316;
  --accent-hover:#FB923C;
  --accent-ink:  #1C1006;
  --accent-soft: #33190C;
  --accent-line: #5A2C13;

  --gold:        #E0AE44;
  --gold-soft:   #2E2410;
  --gold-line:   #4D3D1B;

  --indigo:      #A5B4FC;
  --indigo-soft: #1B1B33;
  --indigo-line: #333257;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 6px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.34);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.4), 0 28px 60px rgba(0,0,0,.5);
}