/* ============================================================
   Layamritam Design System — Tokens
   Colors, typography, spacing, radii, shadows, motion
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ─── COLOR: Brand ─────────────────────────────────────── */
  --kumkum-50:  #FCEEE9;
  --kumkum-100: #F6D0C2;
  --kumkum-200: #EDA58C;
  --kumkum-300: #E07B57;
  --kumkum-400: #CC5A36;
  --kumkum-500: #B8442C;  /* primary */
  --kumkum-600: #9A3622;
  --kumkum-700: #7A2A1A;
  --kumkum-800: #5A1F13;
  --kumkum-900: #3A140C;

  --brass-50:  #FAF3E0;
  --brass-100: #F2E2B4;
  --brass-200: #E6CB7E;
  --brass-300: #D9B452;
  --brass-400: #C9963B;  /* accent */
  --brass-500: #B07E2A;
  --brass-600: #8B621F;
  --brass-700: #664716;
  --brass-800: #422E0E;
  --brass-900: #261A07;

  /* ─── COLOR: Parchment neutrals (warm, never cool) ─────── */
  --parchment-0:   #FFFDF8;  /* lightest */
  --parchment-50:  #FAF4E8;  /* default surface */
  --parchment-100: #F3EBD9;
  --parchment-200: #E8DCC1;
  --parchment-300: #D4C5A3;
  --parchment-400: #A89A80;
  --parchment-500: #7C6F5A;
  --parchment-600: #5A4F3F;
  --parchment-700: #3E3527;
  --parchment-800: #2A1F18;  /* ink */
  --parchment-900: #1A1410;  /* night */

  /* ─── COLOR: Semantic ──────────────────────────────────── */
  --tulsi-400:    #6B9B5A;   /* success */
  --tulsi-500:    #4E7F3F;
  --marigold-400: #E8A53C;   /* warning */
  --marigold-500: #C4831E;
  --sindoor-400:  #D14545;   /* error / destructive */
  --sindoor-500:  #A83333;

  /* ─── COLOR: Semantic roles (use these in components) ──── */
  --primary:       var(--kumkum-500);
  --primary-hover: var(--kumkum-600);
  --primary-fg:    var(--parchment-0);

  --accent:        var(--brass-400);
  --accent-hover:  var(--brass-500);
  --accent-fg:     var(--parchment-800);

  --surface:       var(--parchment-50);
  --surface-raised: var(--parchment-0);
  --surface-sunken: var(--parchment-100);
  --surface-inverse: var(--parchment-900);

  --fg-1: var(--parchment-800);  /* primary text */
  --fg-2: var(--parchment-600);  /* secondary text */
  --fg-3: var(--parchment-500);  /* tertiary / meta */
  --fg-4: var(--parchment-400);  /* disabled */
  --fg-on-dark-1: var(--parchment-0);
  --fg-on-dark-2: #E8DCC1;
  --fg-on-dark-3: #A89A80;

  --bd-subtle: rgba(42, 31, 24, 0.08);
  --bd-default: rgba(42, 31, 24, 0.14);
  --bd-strong: rgba(42, 31, 24, 0.24);
  --bd-on-dark-subtle: rgba(255, 253, 248, 0.08);
  --bd-on-dark-default: rgba(255, 253, 248, 0.14);

  --success: var(--tulsi-500);
  --warning: var(--marigold-500);
  --error:   var(--sindoor-500);

  /* ─── TYPE: Families ───────────────────────────────────── */
  /* Same face as the app (Flutter uses GoogleFonts.notoSans for its whole
     theme). Noto Sans covers Latin/Cyrillic/Greek; Indic, Arabic and CJK
     scripts fall back to the OS's own Noto Sans variants. */
  --font-display: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─── TYPE: Scale ──────────────────────────────────────── */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   40px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;  /* for eyebrow labels */

  /* ─── SPACING: 8-pt grid ───────────────────────────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* ─── RADII ────────────────────────────────────────────── */
  --r-none: 0;
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ─── SHADOWS (warm, ink-tinted) ───────────────────────── */
  --shadow-xs: 0 1px 2px rgba(42, 31, 24, 0.06);
  --shadow-sm: 0 2px 8px rgba(42, 31, 24, 0.06), 0 1px 2px rgba(42, 31, 24, 0.04);
  --shadow-md: 0 8px 24px rgba(42, 31, 24, 0.10), 0 2px 6px rgba(42, 31, 24, 0.06);
  --shadow-lg: 0 24px 48px rgba(42, 31, 24, 0.16), 0 8px 16px rgba(42, 31, 24, 0.08);
  --shadow-xl: 0 40px 80px rgba(42, 31, 24, 0.22), 0 16px 32px rgba(42, 31, 24, 0.10);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* ─── MOTION ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.5, 0, 0.9, 0.4);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-slower: 400ms;

  /* ─── LAYOUT ──────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
}

/* ─── Dark theme (player-forward, evening) ─────────────── */
.theme-dark,
[data-theme="dark"] {
  --surface:         var(--parchment-900);
  --surface-raised:  #221B15;
  --surface-sunken:  #100B08;
  --surface-inverse: var(--parchment-50);

  --fg-1: var(--parchment-0);
  --fg-2: #D4C5A3;
  --fg-3: #A89A80;
  --fg-4: #7C6F5A;

  --bd-subtle:  rgba(255, 253, 248, 0.08);
  --bd-default: rgba(255, 253, 248, 0.14);
  --bd-strong:  rgba(255, 253, 248, 0.24);

  --primary: var(--kumkum-400);
  --primary-hover: var(--kumkum-300);
  --accent: var(--brass-300);
  --accent-hover: var(--brass-200);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.50);
}

/* ============================================================
   SEMANTIC STYLES — apply these classes directly
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-optical-sizing: auto;
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.body-lg {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-2);
}

.devanagari { font-family: var(--font-body); }
.malayalam  { font-family: var(--font-body); }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}