/*
 * tokens.css — the single source of design values for the Bijulipasal site.
 * Rule (spec 2.3): all colors, spacing, radii, durations live here and only here.
 * Dark mode is out of scope; the light-blue theme is the only theme (spec 6.1).
 */
:root {
  /* Light blue palette */
  --c-primary-50:  #F1F9FE;
  --c-primary-100: #E1F3FD;
  --c-primary-200: #BDE6FA;
  --c-primary-300: #8DD3F5;
  --c-primary-400: #4FC3F7;   /* main brand */
  --c-primary-500: #29A9E6;
  --c-primary-600: #1B87BD;   /* accessible on white for text/links */
  --c-primary-700: #16698F;

  --c-accent:      #FFC94D;   /* electric spark: use very sparingly */
  --c-bg:          #FFFFFF;
  --c-surface:     #F7FBFE;
  --c-text:        #10283A;
  --c-text-muted:  #52697A;
  --c-border:      #DCEBF5;
  --c-success:     #1E9E6A;
  --c-error:       #D64545;

  /* Spacing scale (4px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;

  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(16,40,58,.06);
  --shadow-md: 0 6px 20px rgba(41,169,230,.14);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --fs-sm: .875rem; --fs-base: 1rem; --fs-lg: 1.25rem;
  --fs-h2: clamp(1.5rem, 4vw, 2.25rem);
  --fs-h1: clamp(2rem, 7vw, 3.5rem);

  --container: 1120px;
  --nav-h: 64px;

  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------------------------------------------------------------------------
 * Additions required by other sections of the specification.
 * Every one of them is a design value, so by rule 2.3 it belongs in this file.
 * Kept minimal: nothing here duplicates a value already defined above.
 * ------------------------------------------------------------------------- */
:root {
  /* Typography scale */
  --fs-xs: .75rem;
  --fs-h3: clamp(1.125rem, 2.5vw, 1.375rem);
  --fs-display: clamp(2.25rem, 8vw, 4rem);
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --measure: 70ch;            /* ~70 characters max line length (spec 6.2) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Elevation / focus */
  --shadow-lg: 0 18px 44px rgba(16,40,58,.12);
  --border-w: 1px;
  --ring-w: 2px;
  --tap-min: 44px;            /* minimum tap target (spec 13.2) */

  /* Status text/background pairs, darkened so they clear 4.5:1 on their tint */
  --c-success-strong: #0F6B47;
  --c-success-soft: #E6F6EF;
  --c-error-strong: #A32B2B;
  --c-error-soft: #FDECEC;
  --c-warn-bg: #FFF6E6;
  --c-warn-border: #F0CE8F;
  --c-warn-text: #6B4A12;
  --c-white: #FFFFFF;

  /* Media aspect ratios reserved for images (no layout shift, spec 13.1) */
  --ratio-card: 16 / 10;
  --ratio-team: 1 / 1;
  --ratio-hero: 16 / 9;

  /* Layering */
  --z-base: 0;
  --z-sticky: 10;
  --z-menu: 20;
  --z-fab: 30;
  --z-toast: 40;

  /* Gradients */
  --grad-hero: linear-gradient(160deg, var(--c-primary-100) 0%, var(--c-primary-300) 100%);
  --grad-band: linear-gradient(120deg, var(--c-primary-50) 0%, var(--c-primary-100) 100%);
  --grad-shimmer: linear-gradient(90deg,
    var(--c-primary-50) 0%, var(--c-primary-100) 50%, var(--c-primary-50) 100%);
  --grad-skeleton: linear-gradient(100deg,
    var(--c-surface) 30%, var(--c-primary-50) 50%, var(--c-surface) 70%);

  /* Component sizing */
  --nav-pad-x: var(--s-4);
  --fab-size: 56px;
  --icon-size: 24px;
  --icon-size-sm: 20px;

  /* Transitions (composed from the duration tokens above) */
  --t-fast: var(--dur-fast) var(--ease);
  --t-base: var(--dur-base) var(--ease);
  --t-slow: var(--dur-slow) var(--ease);
}