/* ChiefMind Luxe Kit: Design-Tokens.
   GENERATED by tools/build-tokens.py. Edit the script, not this file.
   Light is the default. Dark via [data-theme="dark"] on <html>, or the system
   setting when no data-theme is set. Contrast table: README.md. */

:root {
  /* raw palette (Patek Philippe + ivory), same in both themes */
  --cm-black: #000000;
  --cm-white: #FFFFFF;
  --cm-gold: #C6BA82;   /* champagne; never text on light grounds (1.7:1) */
  --cm-taupe: #8C7A66;  /* light grounds: text only >= 24px, or graphics */
  --cm-ivory: #F4EFE6;

  /* fonts */
  --cm-font-serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --cm-font-din: "D-DIN", "DIN Alternate", "Helvetica Neue", Arial, sans-serif;
  --cm-font-din-condensed: "D-DIN Condensed", "D-DIN", "Arial Narrow", sans-serif;
  --cm-font-mono: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* type scale */
  --cm-text-xs: 0.75rem;     /* 12px  labels */
  --cm-text-sm: 0.875rem;    /* 14px  UI small */
  --cm-text-md: 1rem;        /* 16px  UI base, inputs */
  --cm-text-lg: 1.1875rem;   /* 19px  serif body text */
  --cm-text-xl: 1.5rem;      /* 24px  smallest size for taupe text on light */
  --cm-text-2xl: 2rem;       /* 32px */
  --cm-text-3xl: 2.75rem;    /* 44px */
  --cm-text-4xl: 3.75rem;    /* 60px */
  --cm-leading-tight: 1.1;
  --cm-leading-body: 1.55;
  --cm-tracking-label: 0.14em;

  /* spacing */
  --cm-space-1: 4px;
  --cm-space-2: 8px;
  --cm-space-3: 12px;
  --cm-space-4: 16px;
  --cm-space-5: 24px;
  --cm-space-6: 32px;
  --cm-space-7: 48px;
  --cm-space-8: 64px;
  --cm-space-9: 96px;

  /* shape: square corners, hairlines */
  --cm-radius: 0;
  --cm-radius-max: 2px;
  --cm-hairline: 1px;
  --cm-control-h: 44px;
}

/* light (default) */
:root {
  color-scheme: light;
  --cm-bg: #F4EFE6;
  --cm-surface: #FFFFFF;
  --cm-surface-2: #ECE6DC;
  --cm-ink: #000000;
  --cm-muted: rgba(0, 0, 0, 0.72);
  --cm-sub: rgba(0, 0, 0, 0.6);
  --cm-label: #000000;
  --cm-accent: #000000;
  --cm-display-accent: #8C7A66;
  --cm-line: rgba(0, 0, 0, 0.14);
  --cm-line-strong: #8C7A66;
  --cm-link-line: #8C7A66;
  --cm-focus: #8C7A66;
  --cm-btn-bg: #C6BA82;
  --cm-btn-ink: #000000;
  --cm-ok: #3D714A;
  --cm-danger: #7C231D;
}

/* dark, explicit */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cm-bg: #000000;
  --cm-surface: #0B0A08;
  --cm-surface-2: #14110E;
  --cm-ink: #F4EFE6;
  --cm-muted: rgba(244, 239, 230, 0.72);
  --cm-sub: #8C7A66;
  --cm-label: #C6BA82;
  --cm-accent: #C6BA82;
  --cm-display-accent: #C6BA82;
  --cm-line: rgba(244, 239, 230, 0.16);
  --cm-line-strong: #8C7A66;
  --cm-link-line: #C6BA82;
  --cm-focus: #C6BA82;
  --cm-btn-bg: #C6BA82;
  --cm-btn-ink: #000000;
  --cm-ok: #8AC799;
  --cm-danger: #E6574C;
}

/* dark, from the system setting unless light was chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cm-bg: #000000;
    --cm-surface: #0B0A08;
    --cm-surface-2: #14110E;
    --cm-ink: #F4EFE6;
    --cm-muted: rgba(244, 239, 230, 0.72);
    --cm-sub: #8C7A66;
    --cm-label: #C6BA82;
    --cm-accent: #C6BA82;
    --cm-display-accent: #C6BA82;
    --cm-line: rgba(244, 239, 230, 0.16);
    --cm-line-strong: #8C7A66;
    --cm-link-line: #C6BA82;
    --cm-focus: #C6BA82;
    --cm-btn-bg: #C6BA82;
    --cm-btn-ink: #000000;
    --cm-ok: #8AC799;
    --cm-danger: #E6574C;
  }
}