/* GENERATED FILE — DO NOT EDIT. */
/* Source: design/brand-tokens.css · Regenerate: bin/sync-design-tokens (run on the host) */
/* Sheetkeepr design tokens
 * Generated by /naksha:brand-kit from design/brand-strategy-sheetkeepr.md §5.
 * Contrast ratios in comments are measured, not estimated.
 *
 * Themes: Paper (light, default) and Stage (dark).
 * Dark applies via prefers-color-scheme, or explicitly with [data-theme].
 */

:root {
  /* --- Brass: the signature accent -------------------------------------
   * Brass is a FILL colour. It is not a text colour on light surfaces.
   * First AA-safe brass on Paper is 700 (5.53:1); 600 measures 4.42:1 and fails.
   */
  --brass-50: #FDF8F2;
  --brass-100: #FAF1E6;
  --brass-200: #F4E4CD;
  --brass-300: #E8CDA6;
  --brass-400: #D29A3E;  /* text on dark: 7.90:1 on Stage */
  --brass-500: #B8791F;  /* base - fill only */
  --brass-600: #A06717;
  --brass-700: #8A5A12;  /* text on light: 5.53:1 on Paper */
  --brass-800: #6F470E;
  --brass-900: #513409;
  --brass-950: #311F05;

  /* --- Ink: cool neutral, text and structure --------------------------- */
  --ink-50: #F7F7F8;
  --ink-100: #EEEFF1;
  --ink-200: #DEDFE3;
  --ink-300: #A8AEBC;
  --ink-400: #9093A2;
  --ink-500: #6B6F80;
  --ink-600: #4A5060;  /* secondary text: 7.54:1 on Paper */
  --ink-700: #383A43;
  --ink-800: #27292F;
  --ink-900: #14161F;  /* body text: 16.88:1 on Paper */
  --ink-950: #0A0B0F;  /* Stage surface */

  /* --- Paper: warm surfaces --------------------------------------------
   * Deliberately warm while Ink is cool. Real paper and real ink do this;
   * a single tinted grey scale would lose it.
   */
  --paper-50: #FAF7F2;
  --paper-100: #F4F0E8;
  --paper-200: #E6E0D6;
  --paper-300: #D6CEC0;

  /* --- Semantic --------------------------------------------------------
   * Kept out of the brass family on purpose: an amber warning sitting next
   * to an amber brand accent cannot be read as a warning.
   */
  --success: #2E7D5B;
  --success-on-light: #1F5B41;
  --success-on-dark: #6FBF97;
  --warning: #C2410C;
  --warning-on-light: #9A3412;
  --warning-on-dark: #F09A6B;
  --error: #B3261E;
  --error-on-light: #8C1D18;
  --error-on-dark: #F2867E;
  --info: #2F5FA8;
  --info-on-light: #26497F;
  --info-on-dark: #8FB4E8;

  /* --- Semantic aliases: Paper (light) theme ---------------------------- */
  --color-background: var(--paper-50);
  --color-surface: #FFFFFF;
  --color-surface-sunken: var(--paper-100);
  --color-border: var(--paper-300);
  --color-border-strong: var(--ink-300);
  --color-text: var(--ink-900);
  --color-text-secondary: var(--ink-600);
  --color-text-muted: var(--ink-500);
  --color-accent-fill: var(--brass-500);
  --color-accent-text: var(--brass-700);
  --color-on-accent: var(--ink-900);   /* label on a brass fill: 4.98:1 */

  /* --- Typography ------------------------------------------------------- */
  --font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --leading-xs: 1rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-base: 1rem;
  --leading-base: 1.5rem;
  --text-lg: 1.125rem;
  --leading-lg: 1.75rem;
  --text-xl: 1.25rem;
  --leading-xl: 1.75rem;
  --text-2xl: 1.5rem;
  --leading-2xl: 2rem;
  --text-3xl: 1.875rem;
  --leading-3xl: 2.25rem;
  --text-4xl: 2.25rem;
  --leading-4xl: 2.5rem;
  --text-5xl: 3rem;
  --leading-5xl: 3rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing: 8px grid ------------------------------------------------ */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --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;

  /* --- Radius, shadow --------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.06);
  --shadow-md: 0 1px 3px rgba(20, 22, 31, 0.10), 0 1px 2px rgba(20, 22, 31, 0.06);

  /* --- Components -------------------------------------------------------
   * button-* honours the recorded `brass-button` pattern: brass fill,
   * Ink label, never white.
   */
  --button-height-sm: 32px;
  --button-height-md: 40px;
  --button-height-lg: 48px;
  --button-padding-x: var(--space-4);
  --button-radius: var(--radius-md);
  --button-fill: var(--color-accent-fill);
  --button-label: var(--color-on-accent);
  --input-height: 40px;
  --input-padding-x: var(--space-3);
  --input-radius: var(--radius-md);
  --input-border: 1px solid var(--color-border-strong);
  --card-padding: var(--space-6);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
}

/* --- Stage (dark) theme -------------------------------------------------
 * Surface is near-black #0A0B0F, not pure black: it keeps shadow, depth and
 * inactive states renderable, and avoids OLED smearing on fast transitions.
 */
[data-theme='dark'] {
  --color-background: var(--ink-950);
  --color-surface: var(--ink-900);
  --color-surface-sunken: #05060A;
  --color-border: var(--ink-800);
  --color-border-strong: var(--ink-700);
  --color-text: var(--paper-50);        /* 18.41:1 on Stage */
  --color-text-secondary: var(--ink-300); /* 8.85:1 on Stage */
  --color-text-muted: var(--ink-400);
  --color-accent-fill: var(--brass-500);
  --color-accent-text: var(--brass-400);  /* 7.90:1 on Stage */
  --color-on-accent: var(--ink-900);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-background: var(--ink-950);
    --color-surface: var(--ink-900);
    --color-surface-sunken: #05060A;
    --color-border: var(--ink-800);
    --color-border-strong: var(--ink-700);
    --color-text: var(--paper-50);
    --color-text-secondary: var(--ink-300);
    --color-text-muted: var(--ink-400);
    --color-accent-text: var(--brass-400);
    --color-on-accent: var(--ink-900);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.6);
  }
}