/* ============================================================================
   OWSA LABS — Design Tokens
   Single source of truth for the visual system. Every colour, space, type and
   radius value used across the theme resolves to a variable defined here so the
   brand can be re-skinned in one file.

   Aesthetic: scientific / laboratory — cool mist ground, near-black ink,
   electric cyan accent. Adapted for a research-peptide retail context.

   Accessibility note (EU Accessibility Act / WCAG 2.2 AA):
   - The bright signature cyan (--brand-teal #22D3EE) is reserved for dark
     surfaces, large graphic accents, borders, and focus rings — never body-size
     text on light grounds.
   - --brand-teal-ink (#0E7490) is the AA-safe "cyan as text" token.
   These ratios are asserted by scripts/check-contrast.mjs in CI.
   ============================================================================ */

:root {
  /* ---- Core brand palette --------------------------------------------- */
  --brand-ink:        #0B0D12;   /* near-black — primary text & dark sections */
  --brand-ink-md:     rgba(11, 13, 18, 0.62);  /* secondary text (>= AA on light) */
  --brand-ink-lt:     rgba(11, 13, 18, 0.32);  /* hairline / disabled */
  --brand-mist:       #F0F4F8;   /* cool off-white ground */
  --brand-white:      #FFFFFF;
  --brand-teal:       #22D3EE;   /* signature cyan accent — dark surfaces / graphics only */
  --brand-teal-ink:   #0E7490;   /* AA-safe cyan for text/links on light grounds */
  --brand-teal-dim:   rgba(34, 211, 238, 0.12);
  --brand-teal-deep:  #0C4A6E;   /* deep cyan-navy section ground */

  /* ---- Functional / status colours ------------------------------------ */
  --c-success:        #0E7490;   /* tested, verified */
  --c-warning:        #8A5A00;   /* AA-safe amber for caution notes on light */
  --c-danger:         #B3261E;   /* AA-safe red for error / restricted */
  --c-info:           #0E7490;

  /* ---- Semantic surface & text aliases (components reference these) ---- */
  --ground:           var(--brand-white);   /* the page. White dominates. */
  --ground-alt:       var(--brand-mist);    /* at most one band per page, never a card */
  --rule:             rgba(11, 13, 18, 0.12);  /* hairline — the primary divider */
  --rule-strong:      rgba(11, 13, 18, 0.28);  /* table heads, ghost-button outline */
  --surface:          var(--brand-white);
  --surface-sunken:   var(--brand-mist);
  --surface-inverse:  var(--brand-ink);
  --text:             var(--brand-ink);
  --text-muted:       var(--brand-ink-md);
  --text-on-inverse:  var(--brand-mist);
  --link:             var(--brand-teal-ink);
  --link-on-inverse:  var(--brand-teal);
  --border:           rgba(11, 13, 18, 0.09);
  --border-strong:    rgba(11, 13, 18, 0.18);
  --border-inverse:   rgba(255, 255, 255, 0.12);
  --focus-ring:       var(--brand-teal-ink);

  /* ---- Typography ----------------------------------------------------- */
  --font-display: 'Figtree', 'Inter', system-ui, -apple-system, Arial, sans-serif;
  --font-body:    'Inter', 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-eyebrow:   0.6875rem;  /* 11px mono uppercase label */
  --fs-body:      1rem;       /* 16px base — never smaller for body */
  --fs-small:     0.8125rem;  /* 13px — captions, legal (still AA on light) */
  --lh-body:      1.6;
  --lh-tight:     1.05;
  --tracking-eyebrow: 0.16em;
  --tracking-display: -0.03em;

  /* Fluid display scale */
  --fs-h1: clamp(2.5rem, 6vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 4vw, 3rem);
  --fs-h3: clamp(1.375rem, 2.4vw, 1.875rem);
  --fs-h4: 1.25rem;

  /* ---- Spacing scale (8px base) --------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-6: 1.5rem;   --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;
  --sp-24: 6rem;    --sp-32: 8rem;
  --gutter:   clamp(1.25rem, 5vw, 4rem);
  --measure:  68ch;          /* readable line length for editorial */
  --content-max: 1200px;     /* store content width */
  --wide-max:    1440px;

  /* ---- Radius, border, shadow, motion --------------------------------- */
  /* Square by default. The ghost button's pill is the ONE exception in the system,
     and that deliberateness is what stops radius:0 reading as an unstyled default.
     See DESIGN.md §4 'The radius rule'. */
  --radius-sm: 0;    --radius: 0;     --radius-lg: 0;    --radius-pill: 999px;
  --bw: 1px;
  /* No elevation system. Depth is carried by hairlines and whitespace, not shadow.
     Kept as tokens so any stray consumer resolves to nothing rather than breaking. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-focus: 0 0 0 3px rgba(14,116,144,0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 220ms;

  /* ---- Z-index scale -------------------------------------------------- */
  --z-sticky-atc: 60;
  --z-header:     70;
  --z-cookie:     90;
  --z-modal:      100;
}

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