/* First Steps YCCI — design tokens
   Layer 1 primitives -> Layer 2 semantic roles -> Layer 3 component tokens.
   Components read Layer 2 and 3 only. Never reference a Layer 1 primitive in a component.
   Light mode only by design decision. Do not add a dark theme without re-deriving every ramp. */

:root {
  /* ---------- Layer 1: primitives ---------- */

  /* Teal — derived from the ink anchor by mixing toward white */
  --teal-900: #0B3A44;  /* ink anchor            11.2:1 on page  AAA */
  --teal-800: #305860;  /* secondary text         7.1:1 on page  AAA */
  --teal-700: #54757C;  /* muted text / controls  4.5:1 on page  AA  */
  --teal-200: #BFDCE7;  /* hairline               1.3:1  decorative only */
  --teal-50:  #DBFAFD;  /* page ground */

  /* Rose — the pink family darkened until it can hold white text */
  --rose-900: #7A2740;
  --rose-800: #8C2F4A;  /* 8.0:1 with white on top  AAA */
  --rose-700: #A63C5B;
  --pink-300: #FE98B2;  /* cotton candy   — fill only */
  --pink-200: #FBB1C2;  /* cherry blossom — fill only */

  /* Warm */
  --bronze-800: #8A4A22; /* 6.8:1 with white on top  AA */
  --bronze-300: #EAA377; /* light bronze — fill only */
  --fawn-300:   #E1C287; /* soft fawn    — fill only */
  --gold-800:   #7A6608; /* the only gold-family value that can be text */
  --gold-300:   #FBD82E; /* bright gold  — fill only */

  /* Neutrals */
  --white: #FFFFFF;
  --linen: #F2EEE3;

  /* ---------- Layer 2: semantic roles ---------- */

  --color-page:          var(--teal-50);
  --color-surface:       var(--white);
  --color-surface-warm:  var(--linen);

  --color-ink:           var(--teal-900);
  --color-ink-secondary: var(--teal-800);
  --color-ink-muted:     var(--teal-700);  /* not for body copy on --color-surface-warm */
  --color-ink-inverse:   var(--white);

  --color-border:        var(--teal-200);  /* decorative dividers, image mats */
  --color-border-strong: var(--teal-700);  /* every interactive control boundary */

  --color-action:        var(--teal-900);
  --color-action-hover:  var(--teal-800);
  --color-urgent:        var(--rose-800);
  --color-urgent-hover:  var(--rose-900);

  /* Decorative fills. Each carries --color-ink on top and nothing else. */
  --color-fill-pink:   var(--pink-300);
  --color-fill-blush:  var(--pink-200);
  --color-fill-bronze: var(--bronze-300);
  --color-fill-fawn:   var(--fawn-300);
  --color-fill-gold:   var(--gold-300);

  --color-focus: var(--teal-900);
  --color-scrim: rgba(11, 58, 68, 0.72); /* minimum over photography carrying white text */

  /* ---------- Typography ---------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Alice", "Iowan Old Style", Georgia, serif;
  --font-data:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --text-caption: 0.875rem; /* 14px — hard floor, Alice is delicate below this */
  --text-small:   1rem;     /* 16px */
  --text-body:    1.125rem; /* 18px — default */
  --text-lead:    1.375rem; /* 22px */
  --text-h4:      1.375rem; /* 22px */
  --text-h3:      1.75rem;  /* 28px */
  --text-h2:      2.1875rem;/* 35px */
  --text-h1:      2.75rem;  /* 44px */
  --text-display: 3.4375rem;/* 55px */

  --leading-tight: 1.12;
  --leading-snug:  1.28;
  --leading-body:  1.7;
  --leading-small: 1.6;

  --tracking-eyebrow: 0.12em;
  --measure: 68ch;

  /* ---------- Space, shape, motion ---------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --radius-sm: 4px;   /* chips, inputs */
  --radius-md: 8px;   /* buttons, cards */
  --radius-lg: 16px;  /* feature panels */
  --radius-full: 999px;
  --radius-image: 0;  /* photographs are square-cornered — they sit in mats, not bubbles */

  --border-hairline: 1px;
  --border-control: 1.5px;

  --shadow-none: none;
  --shadow-overlay: 0 8px 24px rgba(11, 58, 68, 0.12); /* tinted with ink, never black */

  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  --container-max: 1120px;
  --container-narrow: 720px;

  /* ---------- Layer 3: component tokens ---------- */
  --button-primary-bg: var(--color-action);
  --button-primary-fg: var(--color-ink-inverse);
  --button-secondary-border: var(--color-border-strong);
  --button-secondary-fg: var(--color-ink);
  --button-urgent-bg: var(--color-urgent);
  --button-urgent-fg: var(--color-ink-inverse);
  --button-min-target: 44px;

  --chip-fg: var(--color-ink);
  --chip-radius: var(--radius-full);

  --image-mat-bg: var(--color-surface);
  --image-mat-pad: var(--space-3);
  --image-mat-border: var(--border-hairline) solid var(--color-border);

  --focus-ring: 0 0 0 2px var(--white), 0 0 0 4px var(--color-focus);
}

/* Focus is never removed, only restyled. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}