/* ============================================================
   Brand CMS Core — Canonical Design Tokens (V3 Sprint 14H-U1-I1)
   ============================================================
   Single source of truth for the --ds-* CORE scale. Surface-agnostic.
   Loaded LAST by BOTH layouts (public header.php after foundation.css;
   admin header.php after admin.css) so compatibility aliases declared in
   the mutable surface CSS (foundation.css / admin.css) resolve against
   this canonical source.

   Contract (D1 canonical-token-contract.tsv + css-loading-decision):
     - ONLY --ds-* core + --ds-focus-* live here.
     - NO --public-* and NO --admin-* (those live in their surface CSS).
     - Pure :root custom properties — NO element/selector rules, NO !important.
     - No CSS-variable cycles; --ds-* reference only other --ds-* or literals.
     - No external URLs / fonts / icons. (The font stack is system-first.)
     - Breakpoint tokens are CONTRACT/DOCUMENTATION only: CSS custom properties
       CANNOT be used inside @media() queries, so media queries elsewhere use
       these same values as literals (320/375/768/1024/1280/1440). They are
       declared here solely as the named contract.
   ============================================================ */

:root {
    /* ── Color: neutral (slate) scale ─────────────────────────── */
    --ds-color-neutral-50:  #f8fafc;
    --ds-color-neutral-100: #f1f5f9;
    --ds-color-neutral-200: #e2e8f0;
    --ds-color-neutral-300: #cbd5e1;
    --ds-color-neutral-400: #94a3b8;
    --ds-color-neutral-500: #64748b;
    --ds-color-neutral-600: #475569;
    --ds-color-neutral-700: #334155;
    --ds-color-neutral-800: #1e293b;
    --ds-color-neutral-900: #0f172a;

    /* ── Color: semantic intent ───────────────────────────────── */
    --ds-color-success:       #10b981;
    --ds-color-danger:        #ef4444;
    --ds-color-danger-hover:  #dc2626;
    --ds-color-warning:       #f59e0b;
    --ds-color-info:          #06b6d4;

    /* ── Focus ring (uniform visible keyboard focus) ──────────── */
    --ds-focus-rgb:  59 130 246;
    --ds-focus-ring: 0 0 0 3px rgba(var(--ds-focus-rgb), .45);

    /* ── Typography ───────────────────────────────────────────── */
    --ds-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    "Helvetica Neue", "Noto Sans TC", Arial, sans-serif;

    --ds-font-size-xs:   0.75rem;    /* 12 — non-critical only  */
    --ds-font-size-sm:   0.8125rem;  /* 13 — dense secondary    */
    --ds-font-size-base: 1rem;       /* 16 — CJK floor          */
    --ds-font-size-md:   1.125rem;   /* 18                      */
    --ds-font-size-lg:   1.25rem;    /* 20                      */
    --ds-font-size-xl:   1.5rem;     /* 24                      */
    --ds-font-size-2xl:  1.875rem;   /* 30                      */
    --ds-font-size-3xl:  2.25rem;    /* 36                      */
    --ds-font-size-4xl:  3rem;       /* 48                      */
    --ds-font-size-5xl:  3.75rem;    /* 60 — hero               */

    --ds-line-height-tight:   1.25;  /* headings          */
    --ds-line-height-snug:    1.4;   /* large headings    */
    --ds-line-height-normal:  1.55;  /* secondary / dense */
    --ds-line-height-relaxed: 1.7;   /* body / CJK default*/
    --ds-line-height-loose:   1.8;   /* CJK long-form     */

    /* ── Spacing (4px grid) ───────────────────────────────────── */
    --ds-space-1:  4px;
    --ds-space-2:  8px;
    --ds-space-3:  12px;
    --ds-space-4:  16px;
    --ds-space-5:  20px;
    --ds-space-6:  24px;
    --ds-space-8:  32px;
    --ds-space-10: 40px;   /* section spacing narrow */
    --ds-space-12: 48px;
    --ds-space-16: 64px;
    --ds-space-18: 72px;   /* section spacing default */

    /* ── Radius ───────────────────────────────────────────────── */
    --ds-radius-sm:   6px;     /* admin default   */
    --ds-radius-md:   8px;     /* public default  */
    --ds-radius-lg:   12px;    /* cards           */
    --ds-radius-pill: 9999px;  /* badges / chips  */

    /* ── Border ───────────────────────────────────────────────── */
    --ds-border-width:   1px;
    --ds-border-default: 1px solid var(--ds-color-neutral-200);
    --ds-border-strong:  1px solid var(--ds-color-neutral-300);

    /* ── Elevation / shadow ───────────────────────────────────── */
    --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);   /* card rest */
    --ds-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08);
    --ds-shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
    --ds-shadow-lg: 0 14px 34px rgba(15, 23, 42, .12); /* card hover */

    /* ── Motion (duration + easing) ───────────────────────────── */
    --ds-motion-fast: 120ms;  /* hover / focus   */
    --ds-motion-base: 180ms;  /* expand / transition */
    --ds-motion-slow: 240ms;  /* modal / large   */
    --ds-ease-core:   cubic-bezier(.4, 0, .2, 1);

    /* ── Breakpoint tokens — CONTRACT/DOCUMENTATION ONLY ────────
       CSS custom properties CANNOT appear inside @media() conditions.
       These named values are the single source for breakpoint widths;
       actual @media queries (in foundation.css / admin.css) use these
       exact values as LITERALS. Do NOT write @media (min-width: var(...)). */
    --ds-breakpoint-xs:  320px;   /* min test width */
    --ds-breakpoint-sm:  375px;   /* phone          */
    --ds-breakpoint-md:  768px;   /* tablet         */
    --ds-breakpoint-lg:  1024px;  /* laptop         */
    --ds-breakpoint-xl:  1280px;  /* desktop        */
    --ds-breakpoint-2xl: 1440px;  /* wide           */

    /* ── Container widths ─────────────────────────────────────── */
    --ds-container-core:    1200px;  /* default max       */
    --ds-container-narrow:  800px;   /* prose / legal     */
    --ds-container-wide:    1280px;  /* wide listings     */

    /* ── z-index layers ───────────────────────────────────────── */
    --ds-z-base:     0;
    --ds-z-dropdown: 100;
    --ds-z-sticky:   200;   /* sticky save bar */
    --ds-z-header:   300;
    --ds-z-overlay:  400;
}