:root {
    /* Typography */
    --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
    --font-mono: var(--font-sans);

    /* Spacing scale (used by m-, p-, gap-*) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;

    /* Text scale */
    --text-xx-small: 0.625rem;
    --text-x-small: 0.75rem;
    --text-small: 0.875rem;
    --text-normal: 1rem;
    --text-medium: 1.125rem;
    --text-large: 1.25rem;
    --text-x-large: 1.5rem;
    --text-xx-large: 2rem;

    /* Typography: Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* Brand */
    --blue-main: #00104B;
    --blue-accent: #0070F0;
    --blue-light: #CCE3FF;

    /* Neutral */
    --white: #FFFFFF;
    --black: #000000;
    --gray-soft: #F9FAFB;
    --gray-surface: #F2F3F6;
    --gray-border: #E5E7ED;
    --gray-muted: #4B5563;

    /* Status colors */
    --green-main: #0A8547;
    --green-light: #F3FCF9;

    --yellow-main: #A3691F;
    --yellow-light: #FEF9E8;

    --red-main: #C2002A;
    --red-light: #FEF1F6;

    /* Semantic tokens used by base and utilities */
    --color-canvas: var(--gray-soft);
    --color-ink: var(--blue-main);
    --color-blue-accent: var(--blue-accent);
    --color-ink-inverted: #ffffff;
    --color-link: var(--blue-accent);
    --color-selected: var(--blue-light);

    --color-muted: var(--gray-muted);
    --color-border: var(--gray-border);
    --color-surface: var(--gray-soft);
    --color-surface-soft: var(--gray-surface);

    --color-positive: var(--green-main);
    --color-positive-soft: var(--green-light);

    --color-warning: var(--yellow-main);
    --color-warning-soft: var(--yellow-light);

    --color-negative: var(--red-main);
    --color-negative-soft: var(--red-light);

    --color-ink-lightest: var(--gray-surface);

    /* Focus ring */
    --focus-ring-color: var(--color-link);
    --focus-ring-size: 2px;
    --focus-ring-offset: 2px;

    /* Border primitives */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;

    --border-style-solid: solid;
    --border-style-dashed: dashed;
    --border-style-dotted: dotted;

    --border-color: var(--color-border);
    --border-color-strong: var(--color-muted);
    --border-color-subtle: var(--color-surface-soft);

    /* Ready-to-use border shorthands */
    --border: var(--border-width-1) var(--border-style-solid) var(--border-color);
    --border-strong: var(--border-width-1) var(--border-style-solid) var(--border-color-strong);
    --border-subtle: var(--border-width-1) var(--border-style-solid) var(--border-color-subtle);
    --border-dashed: var(--border-width-1) var(--border-style-dashed) var(--border-color);

    /* Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 10px rgb(0 0 0 / 0.10);
    --shadow-lg: 0 10px 24px rgb(0 0 0 / 0.14);
    --shadow-inset-sm: inset 0 1px 2px rgb(0 0 0 / 0.08);

    /* Optional focus shadow helper (for custom controls) */
    --shadow-focus: 0 0 0 var(--focus-ring-size) color-mix(in srgb, var(--focus-ring-color), transparent 70%);

    /* Z-index */
    --z-0: 0;
    --z-1: 1;
    --z-nav: 50;
    --z-modal: 100;
}