/* jQode design tokens — VENDORED VERBATIM from jQodeDesignSystemV1/tokens/.
   Do not hand-edit. Re-copy from the design system when it changes.
   Source order matches jQodeDesignSystemV1/styles.css. */

/* ---------- tokens/colors.css ---------- */
/* jQode color tokens.
   Warm neutral monochrome + one accent: Ember (oklch hue 35).
   Base scale + semantic aliases. Dark theme via [data-theme="dark"]. */

:root {
  /* ---- Base: warm neutrals ("Carbon") ---- */
  --gray-0:   oklch(0.99 0.003 75);   /* #fcfbfa page white */
  --gray-50:  oklch(0.975 0.004 75);  /* #f8f6f4 */
  --gray-100: oklch(0.945 0.005 75);  /* #efedea */
  --gray-200: oklch(0.90 0.006 70);   /* #e3e0dc */
  --gray-300: oklch(0.83 0.008 70);   /* #cfcac5 */
  --gray-400: oklch(0.70 0.010 65);   /* #a49e98 */
  --gray-500: oklch(0.57 0.012 60);   /* #7d7670 */
  --gray-600: oklch(0.47 0.012 55);   /* #625b56 */
  --gray-700: oklch(0.37 0.012 50);   /* #48423e */
  --gray-800: oklch(0.28 0.012 45);   /* #322d29 */
  --gray-900: oklch(0.21 0.012 40);   /* #221e1b */
  --gray-950: oklch(0.16 0.010 40);   /* #191512 ink */

  /* ---- Base: Ember accent ---- */
  --ember-100: oklch(0.94 0.035 40);
  --ember-200: oklch(0.88 0.07 38);
  --ember-300: oklch(0.79 0.11 37);
  --ember-400: oklch(0.70 0.16 36);
  --ember-500: oklch(0.63 0.19 35);   /* primary accent */
  --ember-600: oklch(0.56 0.185 33);
  --ember-700: oklch(0.49 0.155 32);

  /* ---- Base: semantic hues (chroma/lightness matched to ember) ---- */
  --green-500:  oklch(0.63 0.145 150);
  --green-100:  oklch(0.94 0.035 150);
  --amber-500:  oklch(0.72 0.145 75);
  --amber-100:  oklch(0.95 0.05 85);
  --red-500:    oklch(0.58 0.19 25);
  --red-100:    oklch(0.93 0.04 25);

  /* ---- Semantic: surfaces ---- */
  --bg-page:     var(--gray-0);
  --bg-surface:  #ffffff;
  --bg-sunken:   var(--gray-50);
  --bg-raised:   #ffffff;
  --bg-inverse:  var(--gray-950);
  --bg-accent-soft: var(--ember-100);

  /* ---- Semantic: text ---- */
  --text-primary:   var(--gray-950);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-400);
  --text-inverse:   var(--gray-0);
  --text-on-accent: #ffffff;
  --text-accent:    var(--ember-600);

  /* ---- Semantic: accent ---- */
  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-600);
  --accent-active: var(--ember-700);

  /* ---- Semantic: status ---- */
  --status-success:      var(--green-500);
  --status-success-soft: var(--green-100);
  --status-warning:      var(--amber-500);
  --status-warning-soft: var(--amber-100);
  --status-danger:       var(--red-500);
  --status-danger-soft:  var(--red-100);

  /* ---- Semantic: borders & focus ---- */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --focus-ring: 0 0 0 3px oklch(0.63 0.19 35 / 0.28);
}

[data-theme="dark"] {
  --bg-page:     oklch(0.17 0.010 40);
  --bg-surface:  oklch(0.21 0.011 40);
  --bg-sunken:   oklch(0.145 0.009 40);
  --bg-raised:   oklch(0.25 0.011 42);
  --bg-inverse:  var(--gray-0);
  --bg-accent-soft: oklch(0.28 0.05 36);

  --text-primary:   oklch(0.95 0.004 75);
  --text-secondary: oklch(0.72 0.008 65);
  --text-muted:     oklch(0.52 0.010 58);
  --text-inverse:   var(--gray-950);
  --text-on-accent: #ffffff;
  --text-accent:    var(--ember-400);

  --accent:        var(--ember-500);
  --accent-hover:  var(--ember-400);
  --accent-active: var(--ember-300);

  --status-success-soft: oklch(0.27 0.04 150);
  --status-warning-soft: oklch(0.28 0.045 80);
  --status-danger-soft:  oklch(0.27 0.05 25);

  --border-subtle:  oklch(0.26 0.010 42);
  --border-default: oklch(0.31 0.011 44);
  --border-strong:  oklch(0.38 0.012 46);
  --focus-ring: 0 0 0 3px oklch(0.63 0.19 35 / 0.4);
}

/* ---------- tokens/typography.css ---------- */
/* jQode typography tokens.
   Instrument Sans for everything; Spline Sans Mono for eyebrows, code, data. */

:root {
  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;

  /* ---- Scale (size / line-height / tracking / weight) ---- */
  --type-display-1: 600 56px/1.04 var(--font-sans);   /* hero */
  --tracking-display-1: -0.025em;
  --type-display-2: 600 40px/1.08 var(--font-sans);   /* page hero, slide title */
  --tracking-display-2: -0.02em;
  --type-title-1: 600 28px/1.2 var(--font-sans);      /* page title */
  --tracking-title-1: -0.015em;
  --type-title-2: 600 21px/1.3 var(--font-sans);      /* section, card title */
  --tracking-title-2: -0.01em;
  --type-title-3: 600 17px/1.35 var(--font-sans);     /* widget title */
  --tracking-title-3: -0.005em;
  --type-body-lg: 400 17px/1.55 var(--font-sans);     /* lede, marketing body */
  --type-body: 400 15px/1.5 var(--font-sans);         /* default UI body */
  --type-body-sm: 400 13px/1.45 var(--font-sans);     /* secondary, table meta */
  --type-label: 500 13px/1.2 var(--font-sans);        /* buttons, form labels */
  --type-eyebrow: 500 12px/1.2 var(--font-mono);      /* uppercase, tracked */
  --tracking-eyebrow: 0.1em;
  --type-code: 400 13px/1.55 var(--font-mono);
  --type-data: 500 13px/1.4 var(--font-mono);         /* numbers in tables/KPIs */
}

/* ---------- tokens/spacing.css ---------- */
/* jQode spacing + radius tokens. 4px base, spacious defaults. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Corner radii — subtle rounding */
  --radius-xs: 4px;    /* checkboxes, tags, code chips */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius-md: 8px;    /* cards, menus, dialogs */
  --radius-lg: 12px;   /* large surfaces, modals, phone cards */
  --radius-pill: 999px;/* badges, avatars-as-pills */

  /* Layout */
  --container-max: 1120px;   /* marketing content width */
  --sidebar-w: 240px;        /* dashboard nav */
  --control-h-sm: 32px;
  --control-h-md: 38px;
  --control-h-lg: 46px;
}

/* ---------- tokens/effects.css ---------- */
/* jQode elevation, borders, motion. Shadows are warm-tinted and quiet. */

:root {
  --shadow-xs: 0 1px 2px oklch(0.21 0.012 40 / 0.05);
  --shadow-sm: 0 1px 2px oklch(0.21 0.012 40 / 0.05), 0 2px 8px oklch(0.21 0.012 40 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.21 0.012 40 / 0.05), 0 8px 24px oklch(0.21 0.012 40 / 0.08);
  --shadow-lg: 0 4px 8px oklch(0.21 0.012 40 / 0.06), 0 20px 48px oklch(0.21 0.012 40 / 0.14);
  --shadow-card: var(--shadow-xs);

  /* Motion — quick, understated */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
}

/* ---------- tokens/base.css ---------- */
/* jQode minimal base reset. */
* { box-sizing: border-box; }
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}