/* Sabal Forge — web color tokens v1.0 · LOCKED (approved 2026-10-14). Do not change hex values without a new version.
 * Base locked: ink #0A0A0A, ember #B87333, grays. All ratios computed (WCAG 2.x), see palette.json.
 * Rule: #B87333 is 3.79:1 on white -> large type / accents / UI only. Small ember text & links: --sf-color-link (#9C5E28, 5.19:1).
 */
:root {
  /* primitives */
  --sf-ember-50: #FBF4ED;
  --sf-ember-100: #F5E6D6;
  --sf-ember-200: #EBCBAE;
  --sf-ember-300: #DDA97D;
  --sf-ember-400: #CC8D55;
  --sf-ember-500: #B87333;
  --sf-ember-600: #9C5E28;
  --sf-ember-700: #7F4B20;
  --sf-ember-800: #643B1A;
  --sf-ember-900: #4A2C15;
  --sf-ember-950: #2B190C;
  --sf-neutral-0: #FFFFFF;
  --sf-neutral-50: #FAFAFA;
  --sf-neutral-100: #F5F5F5;
  --sf-neutral-200: #E5E5E5;
  --sf-neutral-300: #D4D4D4;
  --sf-neutral-400: #A3A3A3;
  --sf-neutral-500: #737373;
  --sf-neutral-550: #6B6B6B;
  --sf-neutral-600: #525252;
  --sf-neutral-700: #404040;
  --sf-neutral-800: #262626;
  --sf-neutral-900: #171717;
  --sf-neutral-950: #0A0A0A;
  --sf-success-solid: #4E7A4F;
  --sf-success-text: #3F6B42;
  --sf-success-tint: #EEF3EC;
  --sf-success-border: #C5D5C2;
  --sf-success-dark-text: #8DB58A;
  --sf-success-dark-tint: #16211A;
  --sf-success-dark-border: #2E4631;
  --sf-warning-solid: #8A6A1C;
  --sf-warning-text: #7A5C14;
  --sf-warning-tint: #F8F1DE;
  --sf-warning-border: #E2D09E;
  --sf-warning-dark-text: #D2B060;
  --sf-warning-dark-tint: #231D0E;
  --sf-warning-dark-border: #4A3C17;
  --sf-error-solid: #A8402F;
  --sf-error-text: #9C3B2E;
  --sf-error-tint: #F8E9E6;
  --sf-error-border: #E5BFB8;
  --sf-error-dark-text: #E08A78;
  --sf-error-dark-tint: #2A1613;
  --sf-error-dark-border: #5A2A22;
  --sf-info-solid: #4A6378;
  --sf-info-text: #435A6D;
  --sf-info-tint: #EDF1F4;
  --sf-info-border: #C3CFD9;
  --sf-info-dark-text: #94AFC4;
  --sf-info-dark-tint: #141B21;
  --sf-info-dark-border: #2C3B47;

  /* semantic — light (default) */
  --sf-color-bg: #FFFFFF;
  --sf-color-bg-subtle: #FAFAFA;
  --sf-color-bg-sunken: #F5F5F5;
  --sf-color-surface: #FFFFFF;
  --sf-color-surface-raised: #FFFFFF;
  --sf-color-border: #E5E5E5;
  --sf-color-border-strong: #D4D4D4;
  --sf-color-border-input: #737373;
  --sf-color-text: #0A0A0A;
  --sf-color-text-secondary: #525252;
  --sf-color-text-muted: #6B6B6B;
  --sf-color-text-disabled: #A3A3A3;
  --sf-color-text-inverse: #FFFFFF;
  --sf-color-primary: #0A0A0A;
  --sf-color-on-primary: #FFFFFF;
  --sf-color-primary-hover: #262626;
  --sf-color-accent: #B87333;
  --sf-color-on-accent: #0A0A0A;
  --sf-color-accent-hover: #9C5E28;
  --sf-color-on-accent-hover: #FFFFFF;
  --sf-color-accent-strong: #9C5E28;
  --sf-color-accent-subtle: #FBF4ED;
  --sf-color-link: #9C5E28;
  --sf-color-link-hover: #7F4B20;
  --sf-color-link-visited: #643B1A;
  --sf-color-focus-ring: #B87333;
  --sf-color-focus-ring-offset: #FFFFFF;
  --sf-color-selection: #F5E6D6;
  --sf-color-success: #3F6B42;
  --sf-color-warning: #7A5C14;
  --sf-color-error: #9C3B2E;
  --sf-color-info: #435A6D;
  --sf-color-success-solid: #4E7A4F;
  --sf-color-warning-solid: #8A6A1C;
  --sf-color-error-solid: #A8402F;
  --sf-color-info-solid: #4A6378;
  --sf-color-success-bg: #EEF3EC;
  --sf-color-warning-bg: #F8F1DE;
  --sf-color-error-bg: #F8E9E6;
  --sf-color-info-bg: #EDF1F4;
  --sf-color-success-border: #C5D5C2;
  --sf-color-warning-border: #E2D09E;
  --sf-color-error-border: #E5BFB8;
  --sf-color-info-border: #C3CFD9;

  --sf-focus-ring: 0 0 0 2px var(--sf-color-focus-ring-offset), 0 0 0 4px var(--sf-color-focus-ring);
  --sf-font-sans: "Inter", ui-sans-serif, sans-serif;
  color-scheme: light;
}

/* semantic — dark: explicit opt-in */
[data-theme="dark"] {
  --sf-color-bg: #0A0A0A;
  --sf-color-bg-subtle: #111111;
  --sf-color-bg-sunken: #050505;
  --sf-color-surface: #171717;
  --sf-color-surface-raised: #262626;
  --sf-color-border: #262626;
  --sf-color-border-strong: #404040;
  --sf-color-border-input: #737373;
  --sf-color-text: #F5F5F5;
  --sf-color-text-secondary: #D4D4D4;
  --sf-color-text-muted: #A3A3A3;
  --sf-color-text-disabled: #525252;
  --sf-color-text-inverse: #0A0A0A;
  --sf-color-primary: #F5F5F5;
  --sf-color-on-primary: #0A0A0A;
  --sf-color-primary-hover: #FFFFFF;
  --sf-color-accent: #B87333;
  --sf-color-on-accent: #0A0A0A;
  --sf-color-accent-hover: #CC8D55;
  --sf-color-on-accent-hover: #0A0A0A;
  --sf-color-accent-strong: #CC8D55;
  --sf-color-accent-subtle: #2B190C;
  --sf-color-link: #DDA97D;
  --sf-color-link-hover: #EBCBAE;
  --sf-color-link-visited: #CC8D55;
  --sf-color-focus-ring: #CC8D55;
  --sf-color-focus-ring-offset: #0A0A0A;
  --sf-color-selection: #4A2C15;
  --sf-color-success: #8DB58A;
  --sf-color-warning: #D2B060;
  --sf-color-error: #E08A78;
  --sf-color-info: #94AFC4;
  --sf-color-success-solid: #4E7A4F;
  --sf-color-warning-solid: #8A6A1C;
  --sf-color-error-solid: #A8402F;
  --sf-color-info-solid: #4A6378;
  --sf-color-success-bg: #16211A;
  --sf-color-warning-bg: #231D0E;
  --sf-color-error-bg: #2A1613;
  --sf-color-info-bg: #141B21;
  --sf-color-success-border: #2E4631;
  --sf-color-warning-border: #4A3C17;
  --sf-color-error-border: #5A2A22;
  --sf-color-info-border: #2C3B47;
  color-scheme: dark;
}

/* semantic — dark: follow OS unless page forces light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sf-color-bg: #0A0A0A;
    --sf-color-bg-subtle: #111111;
    --sf-color-bg-sunken: #050505;
    --sf-color-surface: #171717;
    --sf-color-surface-raised: #262626;
    --sf-color-border: #262626;
    --sf-color-border-strong: #404040;
    --sf-color-border-input: #737373;
    --sf-color-text: #F5F5F5;
    --sf-color-text-secondary: #D4D4D4;
    --sf-color-text-muted: #A3A3A3;
    --sf-color-text-disabled: #525252;
    --sf-color-text-inverse: #0A0A0A;
    --sf-color-primary: #F5F5F5;
    --sf-color-on-primary: #0A0A0A;
    --sf-color-primary-hover: #FFFFFF;
    --sf-color-accent: #B87333;
    --sf-color-on-accent: #0A0A0A;
    --sf-color-accent-hover: #CC8D55;
    --sf-color-on-accent-hover: #0A0A0A;
    --sf-color-accent-strong: #CC8D55;
    --sf-color-accent-subtle: #2B190C;
    --sf-color-link: #DDA97D;
    --sf-color-link-hover: #EBCBAE;
    --sf-color-link-visited: #CC8D55;
    --sf-color-focus-ring: #CC8D55;
    --sf-color-focus-ring-offset: #0A0A0A;
    --sf-color-selection: #4A2C15;
    --sf-color-success: #8DB58A;
    --sf-color-warning: #D2B060;
    --sf-color-error: #E08A78;
    --sf-color-info: #94AFC4;
    --sf-color-success-solid: #4E7A4F;
    --sf-color-warning-solid: #8A6A1C;
    --sf-color-error-solid: #A8402F;
    --sf-color-info-solid: #4A6378;
    --sf-color-success-bg: #16211A;
    --sf-color-warning-bg: #231D0E;
    --sf-color-error-bg: #2A1613;
    --sf-color-info-bg: #141B21;
    --sf-color-success-border: #2E4631;
    --sf-color-warning-border: #4A3C17;
    --sf-color-error-border: #5A2A22;
    --sf-color-info-border: #2C3B47;
    color-scheme: dark;
  }
}

/* minimal base usage */
body { background: var(--sf-color-bg); color: var(--sf-color-text); font-family: var(--sf-font-sans); }
a { color: var(--sf-color-link); text-underline-offset: 0.18em; }
a:hover { color: var(--sf-color-link-hover); }
a:visited { color: var(--sf-color-link-visited); }
:focus-visible { outline: none; box-shadow: var(--sf-focus-ring); }
::selection { background: var(--sf-color-selection); }