/* ============================================================
   AFLU LAB — DESIGN TOKENS v1
   Built on Aflu Brand Guidelines v1.0
   Paper-first. Purple as accent only. No sage, no extra hues.
   ============================================================ */

:root {
  /* ---- Color: surfaces (paper-first) ---- */
  --paper:       #FFFFFF;   /* primary surface */
  --cloud:       #F7F6FB;   /* page background */
  --mist:        #E8E4F5;   /* subtle tint, dividers */
  --fog:         #B5B0C8;   /* borders, faint UI */

  /* ---- Color: ink ---- */
  --ink:         #1E1A33;   /* headings, primary text */
  --ink-soft:    #2A2545;   /* secondary text on light */
  --graphite:    #6B6585;   /* tertiary text, captions */

  /* ---- Color: accent (purple, the ONLY accent) ---- */
  --purple:      #7C3FFF;
  --purple-deep: #5B22D9;
  --purple-tint: #EFE7FF;   /* derived — soft purple wash for callouts */

  /* ---- Semantic (used sparingly) ---- */
  --success:     #1E8E5A;
  --warning:     #B36800;
  --error:       #C3324A;

  /* ---- Role tokens (use these in components) ---- */
  --bg:          var(--cloud);
  --surface:     var(--paper);
  --surface-alt: var(--mist);
  --border:      rgba(30, 26, 51, 0.08);
  --border-strong: rgba(30, 26, 51, 0.16);
  --text:        var(--ink);
  --text-muted:  var(--ink-soft);
  --text-faint:  var(--graphite);
  --accent:      var(--purple);
  --accent-hover:var(--purple-deep);

  /* ---- Type ---- */
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — modular, 1.25 ratio, body 16 */
  --text-xs:    0.75rem;   /* 12 — captions, micro labels */
  --text-sm:    0.875rem;  /* 14 — UI labels, tags */
  --text-base:  1rem;      /* 16 — body */
  --text-md:    1.125rem;  /* 18 — lead paragraphs */
  --text-lg:    1.375rem;  /* 22 — small section headings */
  --text-xl:    1.75rem;   /* 28 — page sections */
  --text-2xl:   2.25rem;   /* 36 — page titles */
  --text-3xl:   3rem;      /* 48 — hero (small) */
  --text-4xl:   4rem;      /* 64 — hero (large) */
  --text-hero:  clamp(2.75rem, 6vw + 1rem, 5.25rem); /* responsive hero */

  /* Line-height */
  --lh-tight:   1.08;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  /* Letter-spacing */
  --ls-tight:   -0.02em;
  --ls-display: -0.025em;
  --ls-body:    0;
  --ls-label:   0.04em;
  --ls-eyebrow: 0.18em;

  /* ---- Spacing scale (8pt grid) ---- */
  --s-0:  0;
  --s-1:  0.25rem;  /* 4 */
  --s-2:  0.5rem;   /* 8 */
  --s-3:  0.75rem;  /* 12 */
  --s-4:  1rem;     /* 16 */
  --s-5:  1.5rem;   /* 24 */
  --s-6:  2rem;     /* 32 */
  --s-7:  2.5rem;   /* 40 */
  --s-8:  3rem;     /* 48 */
  --s-9:  4rem;     /* 64 */
  --s-10: 5rem;     /* 80 */
  --s-11: 6rem;     /* 96 */
  --s-12: 8rem;     /* 128 */

  /* ---- Radius ---- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---- Shadow — restrained, paper feel ---- */
  --shadow-xs: 0 1px 2px rgba(30, 26, 51, 0.04);
  --shadow-sm: 0 2px 6px rgba(30, 26, 51, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 26, 51, 0.07), 0 1px 2px rgba(30, 26, 51, 0.04);
  --shadow-lg: 0 24px 60px rgba(30, 26, 51, 0.10), 0 2px 6px rgba(30, 26, 51, 0.04);
  --shadow-accent: 0 8px 28px rgba(124, 63, 255, 0.30);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   420ms;

  /* ---- Layout ---- */
  --container:        72rem;   /* 1152 */
  --container-narrow: 48rem;   /* 768 */
  --container-wide:   84rem;   /* 1344 */
  --nav-h:            64px;
}

/* ---- Mobile type & spacing step-down ---- */
/* Tablet — gentle scale-down */
@media (max-width: 720px) {
  :root {
    --text-md:    1.0625rem;  /* 17 */
    --text-lg:    1.25rem;    /* 20 */
    --text-xl:    1.5rem;     /* 24 */
    --text-2xl:   1.875rem;   /* 30 */
    --text-3xl:   2.375rem;   /* 38 */
    --text-4xl:   3rem;       /* 48 */
  }
}

/* Phone — comprehensive size reduction so lines don't break weird */
@media (max-width: 540px) {
  :root {
    --text-xs:    0.6875rem;  /* 11 */
    --text-sm:    0.8125rem;  /* 13 */
    --text-base:  0.9375rem;  /* 15 */
    --text-md:    1rem;       /* 16 */
    --text-lg:    1.125rem;   /* 18 */
    --text-xl:    1.3125rem;  /* 21 */
    --text-2xl:   1.5625rem;  /* 25 */
    --text-3xl:   1.875rem;   /* 30 */
    --text-4xl:   2.25rem;    /* 36 */

    /* Tighten spacing one notch */
    --s-5:  1.125rem;   /* 18 (was 24) */
    --s-6:  1.5rem;     /* 24 (was 32) */
    --s-7:  2rem;       /* 32 (was 40) */
    --s-8:  2.5rem;     /* 40 (was 48) */
    --s-9:  3rem;       /* 48 (was 64) */
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 0ms;
    --d-base: 0ms;
    --d-slow: 0ms;
  }
}