@layer tokens {
  :root {
    /* ---- PRIMITIVES ---- */
    /* "Ink & Paper" design system: black on white, one gold accent.
       Swiss editorial — hairlines, hard corners, type does the work. */
    --ink:      #0a0a0a;
    --paper:    #ffffff;

    --gold-500: #d4a017;  /* brand gold — ink text ~8:1 (AAA); never use as text on white */
    --gold-600: #b8860b;  /* hover */
    --gold-100: #f6ecd4;  /* gold wash */

    /* Neutral ramp */
    --gray-900: #1a1a1a;
    --gray-700: #4a4a4a;  /* muted text — ~9:1 on white (AAA) */
    --gray-500: #737373;  /* subtle text — ~4.7:1 on white (AA) */
    --gray-400: #8a8a8a;  /* inactive glyphs */
    --gray-300: #d4d4d4;  /* hairline borders */
    --gray-100: #f0f0f0;  /* light chips */
    --gray-50:  #f5f5f5;  /* washes, sunken surfaces */
    --white:    #ffffff;

    /* ---- SEMANTIC ALIASES (components use ONLY these) ---- */
    --bg:             var(--paper);
    --surface:        var(--paper);
    --surface-sunken: var(--gray-50);
    --text:           var(--ink);
    --text-muted:     var(--gray-700);
    --text-subtle:    var(--gray-500);
    --border:         var(--gray-300);
    --border-strong:  var(--ink);

    --brand:        var(--ink);      /* interactive/emphasis color — always ink */
    --brand-hover:  var(--gray-700);
    --on-brand:     var(--white);
    --accent:       var(--gold-500); /* THE gold moment: primary action, active state */
    --accent-hover: var(--gold-600);
    --on-accent:    var(--ink);
    --focus-ring:   var(--gold-500);

    /* Status convention (colorblind-proof, monochrome):
       approved = solid ink + ✓, pending = light chip, rejected = outline + ✕ */
    --status-pending-bg: var(--gray-100); --status-pending-fg: var(--ink);   --status-pending-border: var(--gray-100);
    --status-review-bg:  var(--gray-50);  --status-review-fg:  var(--gray-700); --status-review-border: var(--gray-300);
    --status-approved-bg: var(--ink);     --status-approved-fg: var(--white); --status-approved-border: var(--ink);
    --status-rejected-bg: var(--paper);   --status-rejected-fg: var(--ink);   --status-rejected-border: var(--ink);

    /* ---- TYPE ---- */
    /* Heebo carries body text in both scripts; display font swaps per locale
       (Secular One for Hebrew, Oswald for Latin — see :lang rule below). */
    --font-family-base: "Heebo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: "Secular One", "Heebo", system-ui, sans-serif;
    --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-base: 1rem;
    --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem;
    --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
    --line-height-tight: 1.25; --line-height-base: 1.5; --line-height-loose: 1.75;

    --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem;
    --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-10: 2.5rem; --spacing-12: 3rem;
    --spacing-16: 4rem; --spacing-20: 5rem; --spacing-24: 6rem;

    /* Hard corners everywhere; --radius-full stays for genuinely round things */
    --border-radius-sm: 0; --border-radius: 0; --border-radius-md: 0;
    --radius-sm: 0; --radius: 0; --radius-lg: 0; --radius-xl: 0; --radius-full: 9999px;
    --border-radius-lg: 0; --border-radius-xl: 0; --border-radius-2xl: 0; --border-radius-full: 9999px;
    --border-width: 1px; --border-width-thin: 1px; --border-width-normal: 2px; --border-width-thick: 2px;

    /* Flat: hairline borders carry elevation, not shadows */
    --shadow-sm: none;
    --shadow: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;

    --z-index-0: 0; --z-index-10: 10; --z-index-20: 20; --z-index-30: 30; --z-index-40: 40; --z-index-50: 50; --z-index-auto: auto;
    --z-nav: 40; --z-modal: 50;
    --transition-fast: 150ms; --transition-normal: 300ms; --transition-slow: 500ms;

    /* Construction-friendly: minimum interactive target */
    --tap-min: 48px;

    --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-2xl: 1320px;

    /* ---- COMPAT: old primitive names → monochrome/gold equivalents ----
       Components still referencing blue/green/red/amber primitives resolve
       to the new palette. Migrate to semantic vars as screens are touched. */
    --blue-900: var(--ink); --blue-700: var(--ink); --blue-600: var(--ink);
    --blue-100: var(--gray-100); --blue-50: var(--gray-50);
    --amber-500: var(--gold-500); --amber-600: var(--gold-600); --amber-400: var(--gold-500); --amber-100: var(--gold-100);
    --green-700: var(--ink); --green-100: var(--gray-100); --green-900: var(--ink);
    --red-700: var(--ink); --red-100: var(--gray-100); --red-900: var(--gray-700);

    /* ---- LEGACY ALIASES — remove as screens are redesigned ---- */
    --primary-color: var(--brand); --primary-dark: var(--brand-hover); --primary-light: var(--gray-100);
    --secondary-color: var(--gray-500); --secondary-light: var(--gray-300); --secondary-dark: var(--gray-700);
    --black: var(--text); --dark-gray: var(--gray-900); --gray: var(--text-muted);
    --light-gray: var(--border); --lighter-gray: var(--gray-50); --lightest-gray: var(--gray-50);
    --background-color: var(--brand); --text-color: var(--text-muted);
    --success-color: var(--ink); --success-light: var(--gray-100); --success-dark: var(--ink);
    --danger-color: var(--ink); --danger-light: var(--gray-100); --danger-dark: var(--ink);
    --warning-color: var(--gold-500); --warning-light: var(--gold-100); --warning-dark: var(--gold-600);
    --info-color: var(--ink); --info-light: var(--gray-100); --info-dark: var(--ink);
    --error-color: var(--ink); --alert-color: var(--gold-500);
    --red: var(--ink); --green: var(--ink); --orange: var(--gold-500);
    --border-color: var(--border);
    --card-bg: var(--surface); --card-border: var(--border); --section-bg: var(--gray-50);
    --input-bg: var(--surface); --input-border: var(--border); --input-focus-border: var(--brand); --label-color: var(--text-muted);
    --header-bg: var(--ink); --header-text: var(--white); --nav-link-color: var(--gray-400); --nav-link-hover: var(--white);
    --status-active: var(--ink); --status-inactive: var(--gray-500); --status-pending: var(--gold-500);
    /* old task-status triples */
    --status-pending-submission-bg: var(--status-pending-bg); --status-pending-submission-color: var(--status-pending-fg); --status-pending-submission-border: var(--status-pending-border);
    --status-pending-review-bg: var(--status-review-bg); --status-pending-review-color: var(--status-review-fg); --status-pending-review-border: var(--status-review-border);
    --status-approved-color: var(--status-approved-fg); --status-rejected-color: var(--status-rejected-fg);
    --primary-button-bg: var(--accent); --primary-button-text: var(--on-accent); --primary-button-hover: var(--accent-hover);
    --secondary-button-bg: var(--surface); --secondary-button-text: var(--text); --secondary-button-hover: var(--gray-50);
  }

  /* Latin UI gets Oswald display; Hebrew (default) gets Secular One */
  html:lang(en) {
    --font-family-heading: "Oswald", "Heebo", system-ui, sans-serif;
  }
}