/*
 * SClinic Design System v2.0 — design tokens
 * ------------------------------------------
 * Canonical source: orchestrator/docs/design-specs/sclinic-design-system.md
 *
 * This file is loaded ONLY by layout-v2.pug pages. Legacy pages still pull
 * their tokens from base.css — we do NOT delete those because 17+ pages rely
 * on the v1 green (#33542C) accent. v2 tokens take precedence in v2 pages by
 * being loaded after base.css.
 *
 * Rule: no component CSS or Pug file defines raw hex/px values — everything
 * references `var(--...)` declared here.
 */

:root {
  /* ----- Colors: ink + surface ----- */
  --color-ink-900: #0F0F0F;
  --color-ink-700: #1F1F1F;
  --color-ink-500: #4A4A4A;
  --color-ink-300: #8A8A8A;
  --color-ink-100: #D9D9D9;

  --color-surface-0:   #FFFFFF;
  --color-surface-50:  #FAF7F3;
  --color-surface-100: #F3ECE3;
  --color-surface-200: #ECE6DC;
  --color-surface-stone: #E7E5E2;

  /* ----- Colors: accents (product cards + hero slides) ----- */
  --color-accent-hair:      #E6E8DA;
  --color-accent-spray:     #D8E3EA;
  --color-accent-vitamin:   #F7E4C0;
  --color-accent-collagen:  #F4D6D4;
  --color-accent-gummy:     #E7D5CE;
  --color-accent-hero-warm: #E7D7C5;

  /* ----- Colors: semantic ----- */
  --color-primary:        var(--color-ink-900);
  --color-on-primary:     #FFFFFF;
  --color-secondary:      #FFFFFF;
  --color-on-secondary:   var(--color-ink-900);
  --color-link:           var(--color-ink-900);

  /* Primary CTA pill — warm peach per v2 reference. Tune hex to match
   * brand sign-off; keep text dark so contrast stays ≥ 4.5:1. */
  --color-cta:            #E5B093;
  --color-cta-hover:      #D99F7A;
  --color-on-cta:         var(--color-ink-900);
  --color-cta-lavender:       #9CB5D3;
  --color-cta-lavender-hover: #85A1C2;
  --color-focus:          #1E5AE6;
  --color-error:          #B42318;
  --color-success:        #257942;

  /* ----- Typography ----- */
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  /* Size scale (px) */
  --font-display-size: 64px;
  --font-h1-size:      40px;
  --font-h2-size:      28px;
  --font-h3-size:      14px;
  --font-h4-size:      14px;
  --font-kicker-size:  12px;
  --font-body-size:    14px;
  --font-body-lg-size: 16px;
  --font-small-size:   12px;
  --font-caps-size:    11px;

  /* Weights */
  --font-w-light:   300;
  --font-w-regular: 400;
  --font-w-medium:  500;
  --font-w-bold:    700;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-title:  1.2;
  --lh-body:   1.6;

  /* Tracking */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-caps:   0.22em;
  --tracking-kicker: 0.3em;
  --tracking-title:  0.28em;

  /* ----- Spacing (8px base with half-step at 4) ----- */
  --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;
  --space-11: 160px;
  --space-12: 192px;

  /* ----- Radius ----- */
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   14px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ----- Shadow ----- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 15, 15, 0.06),
              0 1px 3px rgba(15, 15, 15, 0.04);
  --shadow-2: 0 8px 24px rgba(15, 15, 15, 0.08);
  --shadow-3: 0 24px 48px rgba(15, 15, 15, 0.16);

  /* ----- Layout ----- */
  --container-max-v2: 1320px;
  --container-padding: var(--space-4);
  --container-padding-lg: var(--space-7);

  /* ----- Breakpoints (exposed as values for JS; queries still use px) ----- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1440px;

  /* ----- Logo sizes (each slot independently tunable) -----
   * Raise or lower these without touching component CSS. Units must
   * be px or rem so they can feed into `height:` on <img>. */
  --logo-header-h:          40px;   /* header wordmark, mobile */
  --logo-header-h-desktop:  56px;   /* header wordmark, ≥768px */
  --logo-hero-h:            40px;   /* hero monogram lockup, mobile */
  --logo-hero-h-desktop:    62px;   /* hero monogram lockup, ≥1024px */
  --logo-footer-primary-h:  56px;   /* footer top wordmark (same as header desktop) */
  --logo-footer-col-1-h:    18px;   /* footer col-1 small wordmark (matches h4 line) */
  --logo-footer-col-2-h:    18px;   /* footer col-2 small wordmark (matches h4 line) */
  --logo-divider-h:         112px;  /* section divider ornament */
  --logo-divider-h-desktop: 144px;  /* section divider ornament — ≥1024px */

  /* ----- Motion ----- */
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ----- Z-index scale ----- */
  --z-header: 30;
  --z-scrim: 40;
  --z-drawer: 50;
  --z-modal: 60;
}