/* ============================================================
   TOMAS EXTENSIONS — DESIGN TOKENS
   ============================================================
   Two themes: light (warm cream) + dark (neutral near-black).
   Scope by adding [data-theme="dark"] or [data-theme="light"]
   to any element. The :root defaults to dark.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* —— BRAND ——————————————————————————— */
  --pink-50:  #FFF1F6;
  --pink-100: #FFD6E3;
  --pink-200: #FFA8C4;
  --pink-300: #FF7AA6;
  --pink-400: #FF4D8F;   /* PRIMARY ACCENT */
  --pink-500: #ED2D74;
  --pink-600: #C81A5A;
  --pink-700: #8E0F3E;

  --amber-50:  #FFFBEB;
  --amber-100: #FFF3C2;
  --amber-200: #FFE685;
  --amber-300: #FFDD3F;
  --amber-400: #FFD700;  /* SECONDARY ACCENT */
  --amber-500: #E5BF00;
  --amber-600: #B89800;
  --amber-700: #7A6500;

  /* —— NEUTRALS (warm-neutral, NOT slate) ——————————— */
  --ink-0:    #FAF7F2;   /* lightest cream */
  --ink-50:   #F1EEE8;
  --ink-100:  #E5E2DC;
  --ink-200:  #C9C5BD;
  --ink-300:  #94918A;
  --ink-400:  #5C5A55;
  --ink-500:  #3A3936;
  --ink-600:  #262524;
  --ink-700:  #1A1A1A;   /* dark base */
  --ink-800:  #111111;
  --ink-900:  #060606;

  /* —— SURFACES (DARK theme defaults) ——————————————— */
  --bg:           var(--ink-700);   /* #1A1A1A */
  --bg-raised:   #232220;           /* card on dark */
  --bg-sunken:   #0F0F0F;           /* deepest */
  --bg-inverse:  var(--ink-0);      /* cream */

  /* —— TEXT ————————————————————————————— */
  --fg:          #F5F1EA;
  --fg-muted:    #A8A39B;
  --fg-faint:    #4F4D48;
  --fg-inverse:  var(--ink-700);

  /* —— LINES & DIVIDERS ——————————————————— */
  --line:        rgba(245, 241, 234, 0.10);
  --line-strong: rgba(245, 241, 234, 0.22);

  /* —— SEMANTIC ACTIONS (DARK) ———————————————
     On dark: primary = pink, secondary = yellow */
  --action-1-bg:    var(--pink-400);
  --action-1-fg:    #1A0A12;
  --action-1-hover: var(--pink-300);

  --action-2-bg:    var(--amber-400);
  --action-2-fg:    #1A1505;
  --action-2-hover: var(--amber-300);

  --action-ghost-bg:    transparent;
  --action-ghost-fg:    var(--fg);
  --action-ghost-line:  var(--line-strong);
  --action-ghost-hover: rgba(245, 241, 234, 0.06);

  /* —— TYPE ————————————————————————————— */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (px @ 16px root) */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    21px;
  --t-xl:    28px;
  --t-2xl:   38px;
  --t-3xl:   56px;
  --t-4xl:   84px;
  --t-5xl:  120px;
  --t-6xl:  168px;

  --lh-tight:  1.02;
  --lh-snug:   1.12;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --tr-tight:   -0.04em;
  --tr-snug:    -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.04em;
  --tr-wider:    0.12em;
  --tr-widest:   0.22em;

  /* —— RADIUS ——————————————————————————— */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* —— SPACING (4px base) ——————————————————— */
  --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;
  --s-24: 96px;
  --s-32: 128px;

  /* —— ELEVATION ——————————————————————————— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.12);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.22);

  /* —— MOTION ——————————————————————————— */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   480ms;
}

/* ============================================================
   DARK THEME (explicit; matches :root defaults)
   ============================================================ */
html[data-theme="dark"] {
  --bg:           var(--ink-700);
  --bg-raised:   #232220;
  --bg-sunken:   #0F0F0F;
  --bg-inverse:  var(--ink-0);

  --fg:          #F5F1EA;
  --fg-muted:    #A8A39B;
  --fg-faint:    #4F4D48;
  --fg-inverse:  var(--ink-700);

  --line:        rgba(245, 241, 234, 0.10);
  --line-strong: rgba(245, 241, 234, 0.22);

  --action-1-bg:    var(--pink-400);
  --action-1-fg:    #1A0A12;
  --action-1-hover: var(--pink-300);

  --action-2-bg:    var(--amber-400);
  --action-2-fg:    #1A1505;
  --action-2-hover: var(--amber-300);

  --action-ghost-bg:    transparent;
  --action-ghost-fg:    #F5F1EA;
  --action-ghost-line:  rgba(245, 241, 234, 0.22);
  --action-ghost-hover: rgba(245, 241, 234, 0.06);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.20), 0 1px 1px rgba(0,0,0,0.12);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.18);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.45), 0 6px 18px rgba(0,0,0,0.22);
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"] {
  --bg:          var(--ink-0);     /* #FAF7F2 cream */
  --bg-raised:   #FFFFFF;
  --bg-sunken:   var(--ink-50);
  --bg-inverse:  var(--ink-700);

  --fg:          var(--ink-700);
  --fg-muted:    var(--ink-400);
  --fg-faint:    var(--ink-200);
  --fg-inverse:  #F5F1EA;

  --line:        rgba(26, 26, 26, 0.10);
  --line-strong: rgba(26, 26, 26, 0.22);

  /* On light: primary = black, secondary = pink */
  --action-1-bg:    var(--ink-700);
  --action-1-fg:    var(--ink-0);
  --action-1-hover: var(--ink-600);

  --action-2-bg:    var(--pink-400);
  --action-2-fg:    #1A0A12;
  --action-2-hover: var(--pink-300);

  --action-ghost-fg:    var(--ink-700);
  --action-ghost-hover: rgba(0, 0, 0, 0.05);

  --shadow-sm: 0 1px 2px rgba(40, 30, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(40, 30, 20, 0.08), 0 2px 6px rgba(40, 30, 20, 0.04);
  --shadow-lg: 0 24px 60px rgba(40, 30, 20, 0.12), 0 6px 18px rgba(40, 30, 20, 0.06);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--pink-400); color: #1A0A12; }