/* ==========================================================================
   Born to Belong — Design Tokens  ·  tokens.css  ·  v1.0 (16 Oct 2026)
   --------------------------------------------------------------------------
   Single source of truth for every Born to Belong product:
   LSA Attendance Tracker (v1), marketing website (next), parent portal (later).

   Rules
   1. Products import this file unchanged. No product-specific values here.
   2. Components use SEMANTIC tokens (section 2), never raw ramp steps,
      so the palette can change (or gain a dark theme) without touching UI code.
   3. Nothing in a product may hard-code a colour, size, radius, shadow,
      duration or z-index. If a value is missing, add it here deliberately.

   Layers
   1. Primitives  — brand colour ramps 50–900 (generated in OKLCH)
   2. Semantic    — what a colour MEANS (action, surface, status, text…)
   3. Scales      — type, space, radius, shadow, motion, breakpoints, z-index

   Dark mode: not shipped in v1. To add it later, redefine ONLY the semantic
   layer under [data-theme="dark"] / prefers-color-scheme. Primitives stay.

   Contrast notes (WCAG 2.2 AA, checked against --surface-page #faf6f0):
   · #00A3A6 (brand teal, teal-500) is 2.9:1 on cream and 3.1:1 under white
     text — below AA for text. It is kept EXACTLY as the brand primary for
     large graphic use, but text-bearing fills/links/focus rings use
     --color-primary-strong (teal-600, 4.9:1 with white) and teal-700.
   · Yellow #FFB627 is 1.6:1 — fills and icons only; warning TEXT uses yellow-700.
   · Coral #FF5A60 is 2.9:1 — accent shapes only, never body text.
   ========================================================================== */

:root {
  /* teal */
  --teal-50: #e5fcfc;
  --teal-100: #dbf2f2;
  --teal-200: #afe9ea;
  --teal-300: #8ed6d8;
  --teal-400: #5fbec0;
  --teal-500: #00a3a6;
  --teal-600: #147e80;
  --teal-700: #17696b;
  --teal-800: #174d4e;
  --teal-900: #143233;

  /* coral */
  --coral-50: #fff4f3;
  --coral-100: #ffe6e5;
  --coral-200: #ffcfcc;
  --coral-300: #ffafac;
  --coral-400: #ff807f;
  --coral-500: #ff5a60;
  --coral-600: #b34547;
  --coral-700: #933c3d;
  --coral-800: #6a2f2f;
  --coral-900: #422221;

  /* yellow */
  --yellow-50: #fff5e7;
  --yellow-100: #fbead3;
  --yellow-200: #ffd595;
  --yellow-300: #ffb627;
  --yellow-400: #e09e36;
  --yellow-500: #be853d;
  --yellow-600: #8d653e;
  --yellow-700: #73553c;
  --yellow-800: #4f4036;
  --yellow-900: #352a23;

  /* red */
  --red-50: #fff4f2;
  --red-100: #ffe6e2;
  --red-200: #ffd0c7;
  --red-300: #f7b5a9;
  --red-400: #e89284;
  --red-500: #d86f5f;
  --red-600: #c0392b;
  --red-700: #a02e23;
  --red-800: #772118;
  --red-900: #51140e;

  /* brand-red */
  --brand-red-50: #fff4f3;
  --brand-red-100: #ffe6e5;
  --brand-red-200: #ffcfcc;
  --brand-red-300: #ffafac;
  --brand-red-400: #fa8483;
  --brand-red-500: #e24a51;
  --brand-red-600: #b93e43;
  --brand-red-700: #9a3538;
  --brand-red-800: #71282a;
  --brand-red-900: #4a1c1c;

  /* green */
  --green-50: #e8fdf3;
  --green-100: #def3e9;
  --green-200: #bfe7d4;
  --green-300: #a1d5bd;
  --green-400: #78bda0;
  --green-500: #4da683;
  --green-600: #228160;
  --green-700: #1d6b50;
  --green-800: #174f3b;
  --green-900: #113427;

  /* sand */
  --sand-50: #fcf6ef;
  --sand-100: #f2ece5;
  --sand-200: #e2dbd3;
  --sand-300: #cdc6be;
  --sand-400: #b2aba4;
  --sand-500: #97918a;
  --sand-600: #736e67;
  --sand-700: #615b55;
  --sand-800: #48433d;
  --sand-900: #312c26;

  /* Absolutes */
  --white: #ffffff;
  --cream-50: #fffdf9;   /* raised surface (cards) */
  --cream-100: #faf6f0;  /* page */
  --cream-200: #f3ede4;  /* sunken / wells */

  /* Brand roles */
  --color-primary: #00A3A6;
  --color-primary-strong: var(--teal-600);
  --color-primary-hover: var(--teal-700);
  --color-primary-active: var(--teal-800);
  --color-primary-subtle: var(--teal-50);
  --color-primary-muted: var(--teal-100);
  --color-on-primary: var(--white);

  --color-accent: #FF5A60;
  --color-accent-subtle: var(--coral-50);

  --color-warning: #FFB627;
  --color-warning-text: var(--yellow-700);
  --color-warning-subtle: var(--yellow-50);
  --color-warning-border: var(--yellow-300);

  --color-danger: #C0392B;
  --color-danger-hover: var(--red-700);
  --color-danger-active: var(--red-800);
  --color-danger-text: var(--red-700);
  --color-danger-subtle: var(--red-50);
  --color-danger-border: var(--red-300);
  --color-on-danger: var(--white);

  --color-success: var(--green-600);
  --color-success-text: var(--green-700);
  --color-success-subtle: var(--green-50);
  --color-success-border: var(--green-300);

  --color-info: var(--teal-600);
  --color-info-text: var(--teal-700);
  --color-info-subtle: var(--teal-50);

  --color-text-brand: #E24A51;

  /* Text */
  --text-strong: var(--sand-900);
  --text-default: var(--sand-800);
  --text-muted: var(--sand-700);
  --text-disabled: var(--sand-400);
  --text-link: var(--teal-700);
  --text-link-hover: var(--teal-800);
  --text-on-strong: var(--white);

  /* Surfaces */
  --surface-page: var(--cream-100);
  --surface-raised: var(--cream-50);
  --surface-sunken: var(--cream-200);
  --surface-overlay: var(--cream-50);
  --surface-inverse: var(--sand-900);
  --surface-scrim: rgb(49 44 38 / 0.48);

  /* Borders */
  --border-subtle: var(--sand-100);
  --border-default: var(--sand-200);
  --border-strong: var(--sand-400);
  --border-input: var(--sand-500);
  --border-focus: var(--teal-600);

  /* Focus ring */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--teal-600);
  --focus-ring: 0 0 0 var(--focus-ring-offset) var(--surface-page), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);

  /* Attendance status */
  --status-present-bg: var(--green-50);
  --status-present-fg: var(--green-700);
  --status-present-solid: var(--green-600);
  --status-late-bg: var(--yellow-50);
  --status-late-fg: var(--yellow-700);
  --status-late-solid: var(--yellow-300);
  --status-absent-bg: var(--red-50);
  --status-absent-fg: var(--red-700);
  --status-absent-solid: var(--red-600);
  --status-leave-bg: var(--sand-100);
  --status-leave-fg: var(--sand-800);
  --status-leave-solid: var(--sand-500);
  --status-holiday-bg: var(--teal-50);
  --status-holiday-fg: var(--teal-800);
  --status-holiday-solid: var(--teal-300);
  --status-pending-bg: var(--yellow-50);
  --status-pending-fg: var(--yellow-800);
  --status-pending-solid: var(--yellow-300);
  --status-neutral-bg: var(--sand-100);
  --status-neutral-fg: var(--sand-700);

  /* Fonts */
  --font-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Type scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.08em;

  /* Spacing */
  --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;

  /* Sizing */
  --target-min: 48px;
  --target-comfort: 56px;
  --target-hero: 72px;
  --content-narrow: 34rem;
  --content-default: 72rem;
  --measure: 65ch;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgb(49 44 38 / 0.06);
  --shadow-md: 0 1px 2px rgb(49 44 38 / 0.05), 0 4px 16px -6px rgb(49 44 38 / 0.12);
  --shadow-lg: 0 2px 4px rgb(49 44 38 / 0.05), 0 16px 40px -12px rgb(49 44 38 / 0.22);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;

  /* Breakpoints (reference only) */
  --bp-sm: 360px;
  --bp-md: 640px;
  --bp-lg: 960px;
  --bp-xl: 1280px;

  /* Z-index layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  color-scheme: light;
}

:root { --motion-transform: 1; }
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-transform: 0;
    --duration-fast: 1ms;
    --duration-base: 120ms;
    --duration-slow: 120ms;
  }
}