/* ============================================================
   Tanja CMD HAN — Design Tokens
   Colors, type, spacing, radii, borders.
   WCAG AA compliant on the documented background pairings.
   ============================================================ */

/* ---------- Inter (variable) from Google Fonts ----------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ============================================================
     COLOR — RAW PALETTE (from Figma variables)
     Names match the Figma collection so designers can map back.
     ============================================================ */
  --c-white:        #ffffff;
  --c-ghost-white:  #f5f6fc;  /* grey/100 */
  --c-lavender:     #d0d5f4;  /* grey/300 */
  --c-lavender-250: #e3e6f8;  /* grey/250 — added between 100 & 300 */
  --c-vista-blue:   #98a0d6;  /* grey/500 */
  --c-glaucous:     #7775b4;  /* grey/600 */
  --c-ultra-violet: #63629e;  /* Disabled text */
  --c-tekhelet:     #412f7d;  /* PRIMARY — main text & brand */
  --c-federal-blue: #2c1c60;  /* Text/700 — heavier */
  --c-obsidian:     #080116;  /* Text/900 — max contrast */
  --c-black-bean:   #340b0b;  /* Deep red-black, rare */
  --c-poppy:        #d43f42;  /* Accent — contrast / CTAs */
  --c-light-red:    #f66669;  /* Soft accent / hover */
  --c-poppy-50:     #fdf2f2;  /* Subtle wash */
  --c-poppy-100:    #fae6e6;  /* Notification bg (soft) */
  --c-poppy-200:    #fbdadb;  /* Notification bg (default) */
  --c-poppy-300:    #f1b5b7;  /* Notification border */

  /* ============================================================
     SEMANTIC COLOR TOKENS
     Use these in components; never reach for raw palette names.
     ============================================================ */

  /* Surfaces (background → most prominent to least) */
  --bg-canvas:      var(--c-white);          /* page bg */
  --bg-subtle:      var(--c-ghost-white);    /* alternating sections, cards on canvas */
  --bg-muted:       var(--c-lavender-250);   /* hovered surfaces, code blocks */
  --bg-inverse:     var(--c-tekhelet);       /* dark sections, primary buttons */
  --bg-inverse-strong: var(--c-federal-blue);

  /* Foreground / text — all AA on --bg-canvas */
  --fg-1:           var(--c-obsidian);       /* 19.5:1 — max contrast headlines */
  --fg-2:           var(--c-tekhelet);       /* 9.8:1  — primary text */
  --fg-3:           var(--c-federal-blue);   /* 12.5:1 — secondary headlines */
  --fg-muted:       var(--c-ultra-violet);   /* 5.4:1  — meta, captions (AA normal text) */
  --fg-disabled:    var(--c-glaucous);       /* 4.0:1  — disabled (decorative only) */
  --fg-accent:      #b9292c;                 /* 6.0:1  — accent inline text (AA normal) */
  --fg-on-inverse:  var(--c-white);          /* on --bg-inverse */
  --fg-on-inverse-muted: var(--c-lavender);  /* secondary on --bg-inverse */

  /* Borders */
  --border-subtle:  var(--c-lavender-250);   /* dividers, card outlines (default) */
  --border-default: var(--c-lavender);       /* inputs at rest */
  --border-strong:  var(--c-vista-blue);     /* focused inputs, hovered cards */
  --border-inverse: var(--c-glaucous);       /* on dark bg */

  /* Accent / interactive */
  --accent:         var(--c-poppy);          /* 4.7:1 on white — AA for large/UI text */
  --accent-hover:   #b9292c;                 /* darkened poppy — 6.0:1, AA normal */
  --accent-soft:    var(--c-light-red);      /* decorative only */
  --accent-fg:      var(--c-white);          /* text on accent buttons */

  /* Brand (primary action — purple) */
  --brand:          var(--c-tekhelet);       /* 9.8:1 on white */
  --brand-hover:    var(--c-federal-blue);
  --brand-fg:       var(--c-white);

  /* Status — derived to harmonize with palette */
  --status-success-fg: #1f6f4a;              /* AA on white */
  --status-success-bg: #e3f3ec;
  --status-warning-fg: #8a5a00;
  --status-warning-bg: #fbf0d8;
  --status-error-fg:     #b9292c;            /* darkened poppy */
  --status-error-bg:     var(--c-poppy-100);
  --status-error-border: var(--c-poppy-300);
  --status-info-fg:    var(--c-tekhelet);
  --status-info-bg:    var(--c-ghost-white);

  /* Focus ring — bright blue, intentionally outside the brand palette
     so it's unmistakable as a system signal (a11y first). 4.5:1 on white. */
  --focus-ring:        #0066FF;
  --focus-ring-offset: var(--c-white);

  /* ============================================================
     TYPE — Inter for everything
     ============================================================ */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Type scale — modular ratio 1.25 (major third), based at 16px */
  --fs-12:  0.75rem;     /* 12px — micro / labels */
  --fs-13:  0.8125rem;   /* 13px — micro / dense meta */
  --fs-14:  0.875rem;    /* 14px — small / meta */
  --fs-15:  0.9375rem;   /* 15px — body small */
  --fs-16:  1rem;        /* 16px — body */
  --fs-18:  1.125rem;    /* 18px — body large */
  --fs-20:  1.25rem;     /* 20px — h5 / lead */
  --fs-24:  1.5rem;      /* 24px — h4 */
  --fs-32:  2rem;        /* 32px — h3 */
  --fs-40:  2.5rem;      /* 40px — h2 */
  --fs-56:  3.5rem;      /* 56px — h1 */
  --fs-80:  5rem;        /* 80px — display */

  /* Line heights */
  --lh-tight:   1.1;     /* display headlines */
  --lh-snug:    1.25;    /* h1–h3 */
  --lh-normal:  1.45;    /* h4–h5, leads */
  --lh-relaxed: 1.6;     /* body */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* large display */
  --ls-snug:    -0.01em; /* headlines */
  --ls-normal:  0;
  --ls-wide:    0.04em;  /* uppercase eyebrows */

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     SPACING — 8px grid (with 4px half-step for icon nudges)
     ============================================================ */
  --s-0:   0;
  --s-1:   0.25rem;  /*  4px — half-step */
  --s-2:   0.5rem;   /*  8px */
  --s-3:   0.75rem;  /* 12px */
  --s-4:   1rem;     /* 16px */
  --s-5:   1.5rem;   /* 24px */
  --s-6:   2rem;     /* 32px */
  --s-7:   2.5rem;   /* 40px */
  --s-8:   3rem;     /* 48px */
  --s-9:   4rem;     /* 64px */
  --s-10:  5rem;     /* 80px */
  --s-11:  6rem;     /* 96px */
  --s-12:  8rem;     /* 128px */

  /* ============================================================
     RADIUS — 8-cadence ladder
     xs: 2 · sm: 4 · md: 8 · lg: 16 · xl: 24 · 2xl: 32
     Tight, restrained. Buttons use xs→sm→md as they scale.
     ============================================================ */
  --radius-base:  8px;                                     /* the cadence unit */
  --radius-xs:    2px;                                     /* small buttons, tags */
  --radius-sm:    4px;                                     /* default buttons, inputs */
  --radius-md:    8px;                                     /* large buttons, small cards */
  --radius-lg:    16px;                                    /* cards */
  --radius-xl:    24px;                                    /* modals, large surfaces */
  --radius-2xl:   32px;                                    /* hero panels */
  --radius-full:  9999px;                                  /* pills, avatars */

  /* ============================================================
     BORDERS — flat system, no shadows
     ============================================================ */
  --bw-1: 1px;
  --bw-2: 2px;

  /* ============================================================
     MOTION — restrained; calm & academic
     ============================================================ */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    260ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
}

/* ============================================================
   BASE SEMANTIC ELEMENT STYLES
   Apply globally; override via class or component when needed.
   ============================================================ */

html {
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03'; /* Inter stylistic alts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--fg-2);
  background: var(--bg-canvas);
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-regular);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-2); /* Tekhelet — titles match body color for calm hierarchy */
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
}
h2 { font-size: var(--fs-40); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-32); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-24); line-height: var(--lh-normal); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-20); line-height: var(--lh-normal); font-weight: var(--fw-semibold); }
h6 {
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--s-4);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lead   { font-size: var(--fs-20); line-height: var(--lh-normal); color: var(--fg-2); }
.small  { font-size: var(--fs-14); line-height: var(--lh-normal); }
.meta   { font-size: var(--fs-14); color: var(--fg-muted); }
.eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}

a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-3);
}

hr {
  border: 0;
  border-top: var(--bw-1) solid var(--border-subtle);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--c-lavender);
  color: var(--c-federal-blue);
}

/* Focus ring — single consistent treatment */
:focus-visible {
  outline: var(--bw-2) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}