/* ============================================================
   RESMA Academy — Design Tokens
   The single source of truth for color, type, spacing, radius,
   shadow, and motion. Every other CSS file MUST reference these.
   ============================================================ */

:root {
  /* ---------- Color: brand ---------- */
  --c-primary:        #E16B50;   /* terracotta — sampled from logo */
  --c-primary-700:    #C5573E;   /* darker hover/active */
  --c-primary-100:    #FBE0D6;   /* soft tint backgrounds */

  --c-accent:         #1E3A5F;   /* deep navy — secondary accent */
  --c-accent-700:     #142A48;   /* darker hover */
  --c-accent-100:     #DCE4EF;   /* soft tint */

  /* ---------- Color: neutrals ---------- */
  --c-ink:            #1A1A1A;   /* primary text on light bg */
  --c-ink-2:          #3A3A3A;   /* secondary text */
  --c-ink-3:          #6B6B6B;   /* muted / captions */
  --c-paper:          #FAF7F2;   /* primary background — warm off-white */
  --c-paper-2:        #FFFFFF;   /* card / surface white */
  --c-sand:           #EFE7DC;   /* warm muted band */
  --c-border:         #E1D9CC;   /* hairlines & dividers */
  --c-border-strong:  #C9BFAE;

  /* ---------- Color: state ---------- */
  --c-success:        #2E7D5B;
  --c-warning:        #C58A2B;
  --c-danger:         #B23E2C;
  --c-info:           var(--c-accent);

  /* ---------- Color: utility ---------- */
  --c-focus-ring:     rgba(225, 107, 80, 0.45);  /* terracotta @ 45% */
  --c-shadow-rgb:     26, 26, 26;                 /* base for elevation */

  /* ---------- Typography: families ---------- */
  --ff-serif:  "Fraunces", "Georgia", "Times New Roman", serif;
  --ff-sans:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-mono:   ui-monospace, SFMono-Regular, "Menlo", "Consolas", monospace;

  /* ---------- Typography: scale (modular, 1.250 ratio) ---------- */
  --fs-12:  0.75rem;     /* 12px */
  --fs-14:  0.875rem;    /* 14px */
  --fs-16:  1rem;        /* 16px — base */
  --fs-20:  1.25rem;     /* 20px */
  --fs-25:  1.5625rem;   /* 25px */
  --fs-31:  1.953rem;    /* 31px */
  --fs-39:  2.441rem;    /* 39px */
  --fs-49:  3.052rem;    /* 49px */
  --fs-61:  3.815rem;    /* 61px */

  /* ---------- Typography: weight + line-height ---------- */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

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

  --tracking-tight: -0.02em;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.08em;

  /* ---------- Spacing scale ---------- */
  --sp-1:   0.25rem;     /* 4 */
  --sp-2:   0.5rem;      /* 8 */
  --sp-3:   0.75rem;     /* 12 */
  --sp-4:   1rem;        /* 16 */
  --sp-5:   1.5rem;      /* 24 */
  --sp-6:   2rem;        /* 32 */
  --sp-7:   3rem;        /* 48 */
  --sp-8:   4rem;        /* 64 */
  --sp-9:   6rem;        /* 96 */
  --sp-10:  8rem;        /* 128 */

  /* ---------- Container widths ---------- */
  --container-xl: 1200px;
  --container-lg: 1024px;
  --container-md: 720px;
  --container-sm: 560px;

  /* ---------- Radius ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(var(--c-shadow-rgb), 0.06),
               0 1px 1px rgba(var(--c-shadow-rgb), 0.04);
  --shadow-md: 0 4px 12px rgba(var(--c-shadow-rgb), 0.08),
               0 2px 4px rgba(var(--c-shadow-rgb), 0.06);
  --shadow-lg: 0 12px 32px rgba(var(--c-shadow-rgb), 0.10),
               0 4px 8px rgba(var(--c-shadow-rgb), 0.06);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  150ms;
  --dur-base:  250ms;
  --dur-slow:  400ms;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
}

/* ---------- Optional dark mode (future hook) ---------- */
@media (prefers-color-scheme: dark) {
  /* Intentionally left empty for v1 — keeping single light theme on launch.
     Tokens above already centralize all colors; flipping mode is a future task. */
}