/* =============================================================================
   QuickCare Design System — TOKENS  (single source of truth)
   -----------------------------------------------------------------------------
   Phase 1 of the 2026 modernization. See docs/modernization-2026/ and STYLEGUIDE.md.

   STRATEGY
   - Tokens are declared UNLAYERED on :root so they are always resolvable and are
     never overridden by Bootstrap (which is loaded unlayered and does not define
     --qc-* anyway). Structural CSS (reset/base/components/utilities) uses the
     @layer order declared below so the system's internal cascade is predictable
     and the qc- namespace coexists with the legacy Bootstrap stack during
     migration. Bootstrap is retired page-by-page, never big-bang.
   - LEGACY ALIASES: every variable the old base.css / per-page CSS already
     references (--qc-color-text-dark, --qc-shadow-sm, --qc-radius-md, …) is kept
     and mapped onto the new scales, so loading this file changes nothing until a
     page is intentionally migrated.
   - Mobile-first: heading sizes use clamp() to scale fluidly from phone to desktop.
   ========================================================================== */

/* Canonical cascade order for the design system's structural CSS.
   (Tokens themselves stay unlayered — see strategy note above.) */
@layer qc.reset, qc.base, qc.components, qc.utilities;

:root {
  /* ---------------------------------------------------------------------------
     1. COLOR — brand
     ------------------------------------------------------------------------- */
  --qc-color-primary: #6a3de8;          /* brand violet */
  --qc-color-primary-light: #8a65f0;
  --qc-color-primary-dark: #5227cf;
  --qc-color-secondary: #00b8d4;        /* cyan */
  --qc-color-secondary-dark: #0098b3;
  --qc-color-accent: #2eca8b;           /* green */
  --qc-color-accent-dark: #20a06d;

  /* COLOR — feedback / status */
  --qc-color-success: #2eca8b;
  --qc-color-warning: #f6ad37;
  --qc-color-danger: #ff5252;
  --qc-color-danger-dark: #e23c3c;
  --qc-color-info: var(--qc-color-secondary);

  /* COLOR — neutral ramp (cool slate; subsumes the old ad-hoc greys) */
  --qc-neutral-0:   #ffffff;
  --qc-neutral-50:  #f7f9fc;
  --qc-neutral-100: #edf2f7;
  --qc-neutral-200: #e2e8f0;
  --qc-neutral-300: #cbd5e0;
  --qc-neutral-400: #a0aec0;
  --qc-neutral-500: #718096;
  --qc-neutral-600: #4a5568;
  --qc-neutral-700: #2d3a4f;
  --qc-neutral-800: #1a2a42;
  --qc-neutral-900: #141f2e;

  /* COLOR — semantic surfaces & text (prefer these in new work) */
  --qc-surface:          var(--qc-neutral-0);
  --qc-surface-muted:    var(--qc-neutral-50);
  --qc-surface-sunken:   var(--qc-neutral-100);
  --qc-surface-inverse:  var(--qc-neutral-900);
  --qc-text:             var(--qc-neutral-800);
  --qc-text-muted:       var(--qc-neutral-600);
  --qc-text-subtle:      var(--qc-neutral-500);
  --qc-text-on-primary:  #ffffff;
  --qc-text-on-dark:     #ffffff;
  --qc-border:           var(--qc-neutral-200);
  --qc-border-strong:    var(--qc-neutral-300);

  /* Signature header gradient (was hard-coded inline in base.css) */
  --qc-gradient-header: linear-gradient(135deg, #1e3a5f, var(--qc-neutral-900));
  --qc-gradient-primary: linear-gradient(135deg, var(--qc-color-primary), var(--qc-color-primary-dark));

  /* ---------------------------------------------------------------------------
     2. TYPOGRAPHY — one family (Roboto), one scale
     ------------------------------------------------------------------------- */
  --qc-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
                  Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
  --qc-font-base: var(--qc-font-sans);
  --qc-font-heading: var(--qc-font-sans);
  --qc-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --qc-fw-light: 300;
  --qc-fw-regular: 400;
  --qc-fw-medium: 500;
  --qc-fw-semibold: 600;
  --qc-fw-bold: 700;

  /* Step scale (1rem base, ~1.20 ratio) */
  --qc-fs-xs:   0.75rem;    /* 12 */
  --qc-fs-sm:   0.875rem;   /* 14 */
  --qc-fs-base: 1rem;       /* 16 */
  --qc-fs-lg:   1.125rem;   /* 18 */
  --qc-fs-xl:   1.25rem;    /* 20 */
  --qc-fs-2xl:  1.5rem;     /* 24 */
  --qc-fs-3xl:  1.875rem;   /* 30 */
  --qc-fs-4xl:  2.25rem;    /* 36 */
  --qc-fs-5xl:  3rem;       /* 48 */

  /* Fluid heading sizes (mobile-first; min on phone, max on desktop) */
  --qc-fs-h1: clamp(2rem, 1.4rem + 3vw, 3rem);
  --qc-fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.25rem);
  --qc-fs-h3: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --qc-fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.375rem);

  --qc-lh-tight: 1.15;
  --qc-lh-snug: 1.3;
  --qc-lh-base: 1.6;
  --qc-lh-loose: 1.8;

  --qc-ls-tight: -0.02em;
  --qc-ls-normal: 0;
  --qc-ls-wide: 0.04em;

  /* ---------------------------------------------------------------------------
     3. SPACING — 4px base unit
     ------------------------------------------------------------------------- */
  --qc-space-0: 0;
  --qc-space-1: 0.25rem;   /* 4  */
  --qc-space-2: 0.5rem;    /* 8  */
  --qc-space-3: 0.75rem;   /* 12 */
  --qc-space-4: 1rem;      /* 16 */
  --qc-space-5: 1.25rem;   /* 20 */
  --qc-space-6: 1.5rem;    /* 24 */
  --qc-space-8: 2rem;      /* 32 */
  --qc-space-10: 2.5rem;   /* 40 */
  --qc-space-12: 3rem;     /* 48 */
  --qc-space-16: 4rem;     /* 64 */
  --qc-space-20: 5rem;     /* 80 */
  --qc-space-24: 6rem;     /* 96 */
  --qc-space-32: 8rem;     /* 128 */

  /* Fluid section rhythm (vertical padding for page sections) */
  --qc-section-y: clamp(3rem, 2rem + 5vw, 6rem);

  /* ---------------------------------------------------------------------------
     4. RADIUS
     ------------------------------------------------------------------------- */
  --qc-radius-sm: 4px;
  --qc-radius-md: 8px;
  --qc-radius-lg: 12px;
  --qc-radius-xl: 16px;
  --qc-radius-2xl: 24px;
  --qc-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     5. ELEVATION / SHADOW
     ------------------------------------------------------------------------- */
  --qc-shadow-sm: 0 1px 3px rgba(20, 31, 46, 0.08), 0 1px 2px rgba(20, 31, 46, 0.06);
  --qc-shadow-md: 0 4px 6px -1px rgba(20, 31, 46, 0.10), 0 2px 4px -1px rgba(20, 31, 46, 0.06);
  --qc-shadow-lg: 0 10px 15px -3px rgba(20, 31, 46, 0.10), 0 4px 6px -2px rgba(20, 31, 46, 0.05);
  --qc-shadow-xl: 0 20px 25px -5px rgba(20, 31, 46, 0.12), 0 10px 10px -5px rgba(20, 31, 46, 0.05);

  /* ---------------------------------------------------------------------------
     6. LAYOUT / CONTAINER
     ------------------------------------------------------------------------- */
  --qc-container-max: 1200px;
  --qc-container-narrow: 760px;
  --qc-container-wide: 1320px;
  --qc-container-pad: clamp(1rem, 4vw, 2rem);
  --qc-header-height: 64px;

  /* ---------------------------------------------------------------------------
     7. BREAKPOINTS  (reference / JS only — @media cannot read var(); use the
        documented px values directly in min-width media queries)
        sm 480px · md 768px · lg 1024px · xl 1280px
     ------------------------------------------------------------------------- */
  --qc-bp-sm: 480px;
  --qc-bp-md: 768px;
  --qc-bp-lg: 1024px;
  --qc-bp-xl: 1280px;

  /* ---------------------------------------------------------------------------
     8. Z-INDEX  (named layers — aligned with Bootstrap's scale to coexist)
     ------------------------------------------------------------------------- */
  --qc-z-base: 1;
  --qc-z-raised: 10;
  --qc-z-sticky: 1020;
  --qc-z-fixed: 1030;
  --qc-z-overlay: 1040;
  --qc-z-modal: 1050;
  --qc-z-popover: 1060;
  --qc-z-tooltip: 1070;
  --qc-z-toast: 1080;

  /* ---------------------------------------------------------------------------
     9. MOTION  (respect prefers-reduced-motion in reset/base)
     ------------------------------------------------------------------------- */
  --qc-dur-fast: 150ms;
  --qc-dur-base: 250ms;
  --qc-dur-slow: 400ms;
  --qc-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --qc-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --qc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --qc-transition: var(--qc-dur-base) var(--qc-ease-standard);

  /* ---------------------------------------------------------------------------
     10. FOCUS  (accessibility — visible focus is mandatory, WCAG 2.4.7)
     ------------------------------------------------------------------------- */
  --qc-ring-color: rgba(106, 61, 232, 0.45);
  --qc-focus-ring: 0 0 0 3px var(--qc-ring-color);
  --qc-focus-outline-width: 2px;

  /* ===========================================================================
     LEGACY ALIASES — keep existing base.css / per-page CSS working unchanged.
     Migrate consumers to the canonical tokens above, then delete these.
     ========================================================================= */
  --qc-color-text-dark: var(--qc-text);
  --qc-color-text-medium: var(--qc-text-muted);
  --qc-color-text-light: var(--qc-text-subtle);
  --qc-color-bg-white: var(--qc-surface);
  --qc-color-bg-light: var(--qc-surface-muted);
  --qc-color-bg-gray: var(--qc-surface-sunken);
  --qc-color-bg-dark: var(--qc-neutral-900);
  --qc-color-border: var(--qc-border);
  --qc-transition-standard: var(--qc-transition);
}