/*
 * Constitution v2 admin chrome — design tokens.
 *
 * Custom properties only. Loaded ahead of chrome.css and any per-page
 * inline <style>. Components reference these tokens via var(--…).
 *
 * Palette anchors match the existing admin look (no rebrand) so the
 * skin pass tokenizes rather than redesigns the brand.
 */

:root {
  /* ---- Color: brand & surfaces ------------------------------------ */
  --color-accent:        #d97706;   /* brand orange */
  --color-accent-strong: #b45309;
  --color-accent-soft:   #fef3c7;

  --color-ink:           #1a1a1a;   /* near-black body text + header */
  --color-ink-soft:      #374151;
  --color-muted:         #6b7280;
  --color-muted-strong:  #4b5563;

  --color-canvas:        #f5f5f3;   /* page background */
  --color-surface:       #ffffff;   /* cards, inputs */
  --color-surface-alt:   #fafaf9;
  --color-shell:         #18181B;   /* dark chrome (live viewer body) */
  --color-shell-soft:    #27272a;

  --color-border:        #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-divider:       #f3f4f6;

  /* ---- Color: semantic states ------------------------------------- */
  --color-success:       #047857;
  --color-success-soft:  #d1fae5;
  --color-warning:       #b45309;
  --color-warning-soft:  #fef3c7;
  --color-danger:        #b91c1c;
  --color-danger-soft:   #fee2e2;

  /* Focus ring uses accent at low alpha */
  --color-focus-ring:    rgba(217, 119, 6, 0.35);

  /* ---- Compat aliases (U3) ----------------------------------------
     Base-loaded templates (~70 declarations across base/client/files/
     brand_kits/client_new/edit/merge) reference the studio/portal token
     names, which were undefined here — accent links rendered as body
     ink, muted/dim text as full black. Alias them to the canonical
     tokens so every base.html page resolves. */
  --color-primary:    var(--color-accent);
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-muted);
  --color-text-dim:   #9ca3af;   /* one step lighter than muted */

  /* ---- Typography ------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Modular 1.25 scale */
  --font-size-xs:   0.7rem;
  --font-size-sm:   0.8rem;
  --font-size-md:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.25rem;
  --font-size-xl:   1.5rem;
  --font-size-2xl:  1.95rem;

  --line-tight:  1.2;
  --line-snug:   1.4;
  --line-normal: 1.55;
  --line-loose:  1.75;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Spacing scale (4-px base, rem-aware) ----------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */

  /* ---- Radii ------------------------------------------------------ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Shadows ---------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* ---- Motion ----------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 280ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-index --------------------------------------------------- */
  --z-base:     1;
  --z-elevated: 10;
  --z-dialog:   100;
  --z-toast:    200;

  /* ---- Touch (token reserved for later mobile pass) -------------- */
  --touch-min: 44px;
}