/* ============================================================
   Afinko — Design Tokens
   Single source of truth for color, type, space, radii, motion.
   Do not introduce magic numbers in component CSS.
   ============================================================ */

:root {
  /* ---------- Color — brand & ink ---------- */
  --color-teal-900: #002a30;          /* deepest brand ink, near-black */
  --color-teal-800: #00474f;
  --color-teal-700: #006e78;          /* PRIMARY brand color */
  --color-teal-600: #1a8590;
  --color-teal-500: #4ba6ae;
  --color-teal-200: #c2e0e3;
  --color-teal-100: #e6f1f2;
  --color-teal-50:  #f1f7f7;

  /* Accent = brand teal #006b79 (CTAs, highlights). Tints/shades around it. */
  --color-accent-700: #003e47;
  --color-accent-600: #005561;
  --color-accent-500: #006b79;   /* default accent — brand teal */
  --color-accent-400: #1a8290;
  --color-accent-100: #d9eaec;

  /* Ink (warm graphite — never pure black) */
  --color-ink-900: #006b79;
  --color-ink-700: #2a3236;
  --color-ink-500: #5a6469;
  --color-ink-400: #818a8f;
  --color-ink-300: #b3bcc0;
  --color-ink-200: #d8dee0;
  --color-ink-100: #ebeeef;

  /* Surfaces (papery, slightly warm whites) */
  --color-bg:        #faf8f4;          /* page */
  --color-surface:   #ffffff;          /* cards */
  --color-surface-2: #f3efe7;          /* inset / wells */
  --color-surface-3: #ecead8;          /* deep paper */

  /* Semantic */
  --color-fg:           var(--color-ink-900);
  --color-fg-muted:     var(--color-ink-500);
  --color-border:       #e3dfd5;
  --color-border-strong:#c7c3b6;
  --color-primary:      var(--color-teal-700);
  --color-primary-ink:  var(--color-teal-900);
  --color-on-primary:   #ffffff;
  --color-accent:       var(--color-accent-500);
  --color-on-accent:    #ffffff;

  --color-success: #2f7a52;
  --color-danger:  #b3331c;

  /* ---------- Type ---------- */
  --font-display: "Mako", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (modular, 1.250 minor third) */
  --fs-12: 0.75rem;     /* 12 */
  --fs-13: 0.8125rem;   /* 13 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-15: 0.9375rem;   /* 15 */
  --fs-16: 1rem;        /* 16 base */
  --fs-18: 1.125rem;    /* 18 */
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight:    1.05;
  --lh-snug:     1.18;
  --lh-normal:   1.45;
  --lh-relaxed:  1.62;

  --tracking-display: -0.015em;
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ---------- Radii ---------- */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(20,24,26,.04), 0 1px 2px rgba(20,24,26,.05);
  --shadow-2: 0 1px 0 rgba(20,24,26,.04), 0 4px 14px rgba(20,24,26,.06);
  --shadow-3: 0 2px 0 rgba(20,24,26,.04), 0 12px 32px rgba(20,24,26,.10);
  --shadow-inset: inset 0 0 0 1px var(--color-border);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-tight: 920px;
  --container-pad: clamp(1rem, 3vw, 2rem);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,.05,.35,1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* ---------- Focus ---------- */
  --focus-ring: 0 0 0 3px rgba(0,110,120,.28);
  --focus-ring-accent: 0 0 0 3px rgba(204,138,55,.32);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}