/* ═══════════════════════════════════════════════════════════════
   OL-UI-000060 — Oleren design tokens
   Loaded before every other stylesheet. Components consume semantic
   tokens; legacy variable names remain as compatibility aliases while
   the phased responsive overhaul migrates older page CSS.
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  /* Brand primitives */
  --ol-navy-900: #0A1A30;
  --ol-navy-800: #0E2A47;
  --ol-navy-700: #163A5F;
  --ol-navy-600: #1F4E79;
  --ol-navy-300: #7FA9E8;
  --ol-navy-100: #DCE6F3;

  --ol-brown-800: #3E2A1B;
  --ol-brown-600: #6B4A2F;
  --ol-brown-400: #9A7350;

  --ol-bronze-700: #6B4D10;
  --ol-bronze-500: #B8862B;
  --ol-bronze-300: #D9A441;

  --ol-beige-50: #FBF8F3;
  --ol-beige-100: #F5EFE6;
  --ol-beige-200: #EAE0D1;
  --ol-beige-300: #D9CBB6;

  --ol-ink-900: #16181D;
  --ol-ink-600: #4A5160;
  --ol-ink-400: #78808F;

  --ol-success: #1F7A4D;
  --ol-warning: #A9660A;
  --ol-danger: #B3261E;
  --ol-info: #1F4E79;

  /* Installation-configurable primitives. appearance.css may override. */
  --ol-brand-ink: var(--ol-navy-900);
  --ol-brand-primary: var(--ol-navy-800);
  --ol-brand-accent: var(--ol-bronze-500);
  --ol-brand-bg: var(--ol-beige-50);
  --ol-brand-surface: #FFFFFF;
  --ol-brand-warm: var(--ol-bronze-500);

  /* Semantic colour tokens */
  --c-bg: var(--ol-brand-bg);
  --c-surface: var(--ol-brand-surface);
  --c-surface-2: var(--ol-beige-100);
  --c-surface-sunken: var(--ol-beige-200);
  --c-border: var(--ol-beige-300);
  --c-border-strong: var(--ol-brown-400);

  --c-text: var(--ol-ink-900);
  --c-text-muted: var(--ol-ink-600);
  --c-text-faint: var(--ol-ink-400);
  --c-text-on-primary: #FFFFFF;
  --c-text-on-accent: var(--ol-navy-900);
  --c-text-on-danger: #FFFFFF;
  --c-text-inverse: var(--ol-beige-50);

  --c-primary: var(--ol-brand-primary);
  --c-primary-hover: var(--ol-navy-700);
  --c-primary-soft: var(--ol-navy-100);
  --c-accent: var(--ol-brand-accent);
  --c-accent-hover: var(--ol-bronze-700);
  --c-accent-soft: #F7ECD8;
  --c-accent-text: var(--ol-bronze-700);
  --c-link: var(--ol-navy-700);

  --c-nav-bg: var(--ol-navy-900);
  --c-nav-text: var(--ol-beige-100);
  --c-nav-text-muted: #A9B7CA;
  --c-nav-active-bg: var(--ol-navy-700);
  --c-nav-active-bar: var(--ol-bronze-500);

  /* Expanded off-canvas admin drawer. Light mode follows the normal
     navigation chrome; dark mode intentionally uses a light sheet so
     the menu remains high-contrast against dark page content. */
  --c-drawer-bg: var(--c-nav-bg);
  --c-drawer-text: var(--c-nav-text);
  --c-drawer-text-muted: var(--c-nav-text-muted);
  --c-drawer-section: #64809A;
  --c-drawer-hover-bg: var(--c-nav-active-bg);
  --c-drawer-hover-text: var(--c-nav-text);
  --c-drawer-active-bg: var(--c-nav-active-bg);
  --c-drawer-active-text: var(--c-nav-text);
  --c-drawer-border: color-mix(in srgb, var(--c-nav-text) 16%, transparent);
  --c-drawer-close-bg: #102A42;
  --c-drawer-close-text: #FFFFFF;

  --c-success: var(--ol-success);
  --c-success-bg: #E7F4EC;
  --c-success-text: #145A36;
  --c-warning: var(--ol-warning);
  --c-warning-bg: #FBF1DF;
  --c-warning-text: #6B4308;
  --c-danger: var(--ol-danger);
  --c-danger-bg: #FBE9E7;
  --c-danger-text: #8C1D18;
  --c-info: var(--ol-info);
  --c-info-bg: #E5EFF6;
  --c-info-text: #164C71;

  --c-focus: var(--ol-bronze-500);
  --c-overlay: rgba(10, 26, 48, .55);

  /* Radius / spacing / elevation / motion */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --shadow-1: 0 1px 2px rgba(10,26,48,.06), 0 1px 3px rgba(10,26,48,.08);
  --shadow-2: 0 4px 12px rgba(10,26,48,.10);
  --shadow-3: 0 12px 32px rgba(10,26,48,.16);
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 180ms;

  /* Type — Core intentionally stays on system fonts. */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  /* Layout */
  --shell-max: 1180px;
  --sidebar-w: 264px;
  --sidebar-w-rail: 76px;
  --topbar-h: 60px;
  --z-nav: 100;
  --z-drawer: 300;
  --z-sheet: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* Compatibility aliases used by the pre-1.0.14 CSS. */
  --ink: var(--ol-brand-ink);
  --deep: var(--c-primary);
  --deep-soft: var(--ol-navy-700);
  --deep-wash: var(--c-primary-soft);
  --sand: var(--c-bg);
  --sand-deep: var(--c-surface-sunken);
  --paper: var(--c-surface);
  --signal: var(--c-accent);
  --signal-dim: var(--c-accent-hover);
  --signal-wash: var(--c-accent-soft);
  --amber: var(--ol-brand-warm);
  --amber-wash: var(--c-warning-bg);
  --danger: var(--c-danger);
  --danger-wash: var(--c-danger-bg);
  --success: var(--c-success);
  --success-wash: var(--c-success-bg);
  --info: var(--c-info);
  --info-wash: var(--c-info-bg);
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-faint: var(--c-text-faint);
  --text-invert: var(--c-text-on-primary);
  --line: var(--c-border);
  --line-soft: color-mix(in srgb, var(--c-border) 48%, var(--c-surface));
  --line-strong: var(--c-border-strong);
  --t-xs: var(--fs-xs);
  --t-sm: var(--fs-sm);
  --t-base: .9375rem;
  --t-md: var(--fs-lg);
  --t-lg: var(--fs-xl);
  --t-xl: var(--fs-2xl);
  --t-2xl: var(--fs-3xl);
  --t-3xl: 3.25rem;
  --s-1: var(--sp-1);
  --s-2: var(--sp-2);
  --s-3: var(--sp-3);
  --s-4: var(--sp-4);
  --s-5: var(--sp-5);
  --s-6: var(--sp-6);
  --s-7: var(--sp-7);
  --s-8: var(--sp-8);
  --s-9: var(--sp-9);
  --r-card: var(--r-lg);
  --r-input: var(--r-md);
  --r-button: var(--r-pill);
  --r-chip: var(--r-sm);
}

.ol-mode-dark {
  color-scheme: dark;
  --c-bg: #0B1220;
  --c-surface: #121C2E;
  --c-surface-2: #18243A;
  --c-surface-sunken: #0E1626;
  --c-border: #2B3B55;
  --c-border-strong: #465A78;
  --c-text: #EDE7DC;
  --c-text-muted: #B3C0D2;
  --c-text-faint: #8F9DB0;
  --c-text-on-primary: #0B1220;
  --c-text-on-accent: #0B1220;
  --c-text-on-danger: #FFF6F4;
  --c-text-inverse: #0B1220;
  --c-primary: var(--ol-navy-300);
  --c-primary-hover: #A3C2F1;
  --c-primary-soft: #1B2C46;
  --c-accent: var(--ol-bronze-300);
  --c-accent-hover: #E7BC65;
  --c-accent-soft: #352916;
  --c-accent-text: #F3D490;
  --c-link: #A9C8F4;
  --c-nav-bg: #0E1626;
  --c-nav-text: #EDE7DC;
  --c-nav-text-muted: #A7B5C9;
  --c-nav-active-bg: #1B2C46;
  --c-nav-active-bar: var(--ol-bronze-300);

  /* In dark mode the expanded mobile/tablet admin menu is a light
     navigation sheet with deep-navy text. This deliberately avoids
     pale-on-pale contrast when installation branding uses a light ink. */
  --c-drawer-bg: #FFFFFF;
  --c-drawer-text: var(--ol-navy-900);
  --c-drawer-text-muted: var(--ol-navy-600);
  --c-drawer-section: var(--ol-navy-600);
  --c-drawer-hover-bg: var(--ol-beige-100);
  --c-drawer-hover-text: var(--ol-navy-900);
  --c-drawer-active-bg: var(--ol-navy-600);
  --c-drawer-active-text: #FFFFFF;
  --c-drawer-border: var(--ol-beige-300);
  --c-drawer-close-bg: var(--ol-navy-900);
  --c-drawer-close-text: #FFFFFF;
  --c-success-bg: #123324;
  --c-success-text: #BDEDD0;
  --c-warning-bg: #3C2E16;
  --c-warning-text: #F7D58B;
  --c-danger-bg: #3A1918;
  --c-danger-text: #FFD1CD;
  --c-info-bg: #102D43;
  --c-info-text: #BFE2FA;
  --c-focus: var(--ol-bronze-300);
  --c-overlay: rgba(0,0,0,.65);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5);
  --shadow-3: 0 14px 36px rgba(0,0,0,.6);

  --ink: var(--c-text);
  --deep: var(--c-primary);
  --deep-soft: var(--c-primary-hover);
  --deep-wash: var(--c-primary-soft);
  --sand: var(--c-bg);
  --sand-deep: var(--c-surface-sunken);
  --paper: var(--c-surface);
  --signal: var(--c-accent);
  --signal-dim: var(--c-accent-hover);
  --signal-wash: var(--c-accent-soft);
  --amber: var(--c-accent);
  --amber-wash: var(--c-warning-bg);
  --danger-wash: var(--c-danger-bg);
  --success-wash: var(--c-success-bg);
  --info-wash: var(--c-info-bg);
  --text: var(--c-text);
  --text-muted: var(--c-text-muted);
  --text-faint: var(--c-text-faint);
  --text-invert: var(--c-text-inverse);
  --line: var(--c-border);
  --line-soft: var(--c-surface-2);
  --line-strong: var(--c-border-strong);
}

@media (prefers-color-scheme: dark) {
  .ol-mode-system {
    color-scheme: dark;
    --c-bg: #0B1220;
    --c-surface: #121C2E;
    --c-surface-2: #18243A;
    --c-surface-sunken: #0E1626;
    --c-border: #2B3B55;
    --c-border-strong: #465A78;
    --c-text: #EDE7DC;
    --c-text-muted: #B3C0D2;
    --c-text-faint: #8F9DB0;
    --c-text-on-primary: #0B1220;
    --c-text-on-accent: #0B1220;
    --c-text-on-danger: #FFF6F4;
    --c-text-inverse: #0B1220;
    --c-primary: var(--ol-navy-300);
    --c-primary-hover: #A3C2F1;
    --c-primary-soft: #1B2C46;
    --c-accent: var(--ol-bronze-300);
    --c-accent-hover: #E7BC65;
    --c-accent-soft: #352916;
    --c-accent-text: #F3D490;
    --c-link: #A9C8F4;
    --c-nav-bg: #0E1626;
    --c-nav-text: #EDE7DC;
    --c-nav-text-muted: #A7B5C9;
    --c-nav-active-bg: #1B2C46;
    --c-nav-active-bar: var(--ol-bronze-300);
    --c-success-bg: #123324;
    --c-success-text: #BDEDD0;
    --c-warning-bg: #3C2E16;
    --c-warning-text: #F7D58B;
    --c-danger-bg: #3A1918;
    --c-danger-text: #FFD1CD;
    --c-info-bg: #102D43;
    --c-info-text: #BFE2FA;
    --c-focus: var(--ol-bronze-300);
    --c-overlay: rgba(0,0,0,.65);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 14px rgba(0,0,0,.5);
    --shadow-3: 0 14px 36px rgba(0,0,0,.6);

    --ink: var(--c-text);
    --deep: var(--c-primary);
    --deep-soft: var(--c-primary-hover);
    --deep-wash: var(--c-primary-soft);
    --sand: var(--c-bg);
    --sand-deep: var(--c-surface-sunken);
    --paper: var(--c-surface);
    --signal: var(--c-accent);
    --signal-dim: var(--c-accent-hover);
    --signal-wash: var(--c-accent-soft);
    --amber: var(--c-accent);
    --amber-wash: var(--c-warning-bg);
    --danger-wash: var(--c-danger-bg);
    --success-wash: var(--c-success-bg);
    --info-wash: var(--c-info-bg);
    --text: var(--c-text);
    --text-muted: var(--c-text-muted);
    --text-faint: var(--c-text-faint);
    --text-invert: var(--c-text-inverse);
    --line: var(--c-border);
    --line-soft: var(--c-surface-2);
    --line-strong: var(--c-border-strong);
  }
}