/* ============================================================
   CORE TOKEN CONTRACT
   ------------------------------------------------------------
   Every theme is just a re-skinning of these custom properties.
   The component layer (components.css) and the demo UI consume
   ONLY these tokens — never hard-coded values. Swap the values,
   swap the entire look. This file also ships the default
   ("Foundation") values so the system renders with no theme set.
   ============================================================ */

/* ---------- Modern reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, svg, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1, h2, h3, h4, h5, h6) { font-weight: inherit; }

/* ============================================================
   THE CONTRACT  (defaults = "Foundation" theme)
   ============================================================ */
:root,
[data-theme="foundation"] {
  color-scheme: light;

  /* — Surfaces — */
  --bg:            #f6f7f9;   /* page */
  --bg-2:          #ffffff;   /* elevated surface / cards */
  --bg-3:          #eef0f3;   /* sunken / inputs / wells */
  --bg-inset:      #f9fafb;

  /* — Text — */
  --text:          #11181c;
  --text-2:        #5b6770;   /* muted */
  --text-3:        #8c97a0;   /* subtle */

  /* — Lines — */
  --border:        #e3e7eb;
  --border-2:      #cfd6dc;   /* strong */
  --bw:            1px;       /* base border width */

  /* — Brand / intent — */
  --primary:       #2563eb;
  --primary-2:     #1d4ed8;   /* hover */
  --on-primary:    #ffffff;
  --accent:        #7c3aed;
  --on-accent:     #ffffff;
  --success:       #16a34a;
  --warning:       #d97706;
  --danger:        #dc2626;
  --info:          #0891b2;
  --ring:          color-mix(in srgb, var(--primary) 45%, transparent);

  /* — Typography — */
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-head:     "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --fw-normal:     400;
  --fw-medium:     500;
  --fw-bold:       650;
  --fw-head:       700;
  --tracking-head: -0.02em;
  --tracking-body: 0em;
  --leading:       1.6;
  --fs-base:       15px;
  --case-head:     none;        /* text-transform for headings */

  /* — Shape — */
  --radius:        10px;
  --radius-sm:     7px;
  --radius-lg:     16px;
  --radius-pill:   999px;

  /* — Depth — */
  --shadow-color:  220 25% 20%;
  --shadow-sm:     0 1px 2px hsl(var(--shadow-color) / .08);
  --shadow:        0 4px 12px -2px hsl(var(--shadow-color) / .12);
  --shadow-lg:     0 18px 40px -12px hsl(var(--shadow-color) / .22);

  /* — Motion — */
  --transition:    180ms cubic-bezier(.2, .7, .3, 1);

  /* — Density (multiplies base spacing) — */
  --density:       1;

  /* ---- Component flourish hooks (themes override for personality) ---- */
  --btn-radius:    var(--radius);
  --btn-weight:    var(--fw-bold);
  --btn-shadow:    var(--shadow-sm);
  --btn-border:    transparent;
  --btn-transform: none;          /* hover translate, etc. via theme */
  --card-bg:       var(--bg-2);
  --card-radius:   var(--radius-lg);
  --card-shadow:   var(--shadow);
  --card-border:   var(--bw) solid var(--border);
  --input-bg:      var(--bg-2);
  --input-radius:  var(--radius-sm);
  --input-border:  var(--bw) solid var(--border-2);
  --nav-bg:        color-mix(in srgb, var(--bg-2) 80%, transparent);
  --sidenav-bg:    var(--bg-2);   /* themed side navigation */
  --topbar-bg:     color-mix(in srgb, var(--bg-2) 85%, transparent);
  --menu-bg:       var(--bg-2);   /* dropdown / context menus */
  --glow:          none;          /* neon themes light this up */
  --backdrop:      none;          /* glass themes set blur here */
  --surface-grad:  none;          /* skeuomorphic gradients */
}

/* spacing scale derived from density */
:root {
  --s-1: calc(4px  * var(--density));
  --s-2: calc(8px  * var(--density));
  --s-3: calc(12px * var(--density));
  --s-4: calc(16px * var(--density));
  --s-5: calc(24px * var(--density));
  --s-6: calc(32px * var(--density));
  --s-7: calc(48px * var(--density));
  --s-8: calc(64px * var(--density));
}