/* ReelEsto — design tokens (single source of truth for both pages).
   Colors, fonts, motion easings, radius/shadow. Both index.html and
   create.html <link> this file, so create.html can no longer drift out of
   sync with index.html the way the two old inline blocks did. */

:root {
  /* ---- Charcoal & Gold — light theme ---- */
  --bg:            #FAF7F0;
  --bg-lift:       #FFFDF7;   /* cards / nav */
  --bg-sunk:       #F0EADB;   /* inputs */
  --t1:            #1C1B18;   /* primary text */
  --t2:            rgba(28, 27, 24, .65);   /* secondary */
  --t3:            rgba(28, 27, 24, .40);   /* muted */
  --hair:          rgba(28, 27, 24, .12);
  --hair-soft:     rgba(28, 27, 24, .06);
  --fill:          #1C1B18;   /* solid buttons / logo backing */
  --on-fill:       #FAF7F0;
  --brand:         #C9A227;   /* gold accent */
  --brand-hover:   #B08D1E;
  --brand-soft:    rgba(201, 162, 39, .10);
  --brand-mid:     #B8935A;
  --accent2:       #3F6E5E;
  --green:         #3F7D52;
  --green-bg:      #EEF3E9;
  --green-border:  #C9DCC0;
  --red:           #B3402C;
  --red-bg:        #F7EAE6;
  --red-border:    #E8C4B8;
  --blueprint-line: rgba(28, 27, 24, .16);
  --whatsapp:      #25D366;
  --whatsapp-hover:#1EBA59;
  --nav-bg:        rgba(250, 247, 240, .72);
  --hero-panel:    #1C1B18;   /* the big hero surface is dark in both themes */
  --hero-ink:      #F5F0E6;   /* text that sits on the hero panel */
  --hero-ink-dim:  rgba(245, 240, 230, .62);
  --hero-hair:     rgba(245, 240, 230, .14);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Karla', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* Brand wordmark ("ReelEsto") is always Latin/Fraunces — it must NOT swap
     with the page language the way --font-display does. */
  --font-brand:   'Fraunces', 'Georgia', serif;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16, 1, .3, 1);   /* general reveal */
  --snap: cubic-bezier(.32, .72, 0, 1);  /* buttons / toggles */

  /* ---- Shape ---- */
  --radius:    16px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(28, 27, 24, .05);
  --shadow:    0 12px 34px rgba(28, 27, 24, .10);
  --gradient:  linear-gradient(100deg, var(--brand) 0%, var(--brand-mid) 55%, var(--accent2) 100%);
}

[data-theme="dark"] {
  --bg:            #121110;
  --bg-lift:       #1B1917;
  --bg-sunk:       #0B0A09;
  --t1:            #F5F0E6;
  --t2:            rgba(245, 240, 230, .65);
  --t3:            rgba(245, 240, 230, .40);
  --hair:          rgba(245, 240, 230, .12);
  --hair-soft:     rgba(245, 240, 230, .06);
  --fill:          #F5F0E6;
  --on-fill:       #121110;
  --brand:         #E4B94D;
  --brand-hover:   #F0CD70;
  --brand-soft:    rgba(228, 185, 77, .14);
  --brand-mid:     #C9A15E;
  --accent2:       #57A08D;
  --green:         #6FBF7A;
  --green-bg:      rgba(111, 191, 122, .12);
  --green-border:  rgba(111, 191, 122, .28);
  --red:           #E2735A;
  --red-bg:        rgba(226, 115, 90, .12);
  --red-border:    rgba(226, 115, 90, .28);
  --blueprint-line: rgba(245, 240, 230, .16);
  --nav-bg:        rgba(18, 17, 16, .72);
  --hero-panel:    #0B0A09;
  --hero-ink:      #F5F0E6;
  --hero-ink-dim:  rgba(245, 240, 230, .62);
  --hero-hair:     rgba(245, 240, 230, .12);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .4);
  --shadow:    0 16px 40px rgba(0, 0, 0, .5);
}

/* ---- Script-driven font swaps ---- */
/* Indic scripts get Noto Serif (display) to echo Fraunces' editorial-serif
   personality, plus Noto Sans (body). Mono falls back to the body font —
   DM Mono has no Devanagari/Malayalam glyphs. */
html[lang="hi"] {
  --font-display: 'Noto Serif Devanagari', Georgia, serif;
  --font-body:    'Noto Sans Devanagari', system-ui, sans-serif;
  --font-mono:    'Noto Sans Devanagari', system-ui, sans-serif;
}
html[lang="ml"] {
  --font-display: 'Noto Serif Malayalam', Georgia, serif;
  --font-body:    'Noto Sans Malayalam', system-ui, sans-serif;
  --font-mono:    'Noto Sans Malayalam', system-ui, sans-serif;
}