@layer tokens {
  :root {
    --oc-bg: #f6f7fb;
    --oc-bg-input: #ffffff;
    --oc-ink: rgba(16,24,40,.92);
    --oc-muted: rgba(16,24,40,.60);
    --oc-border-weak: rgba(16,24,40,.08);
    --oc-border: rgba(16,24,40,.12);
    --oc-border-strong: rgba(16,24,40,.18);
    --oc-line: var(--oc-border);
    --oc-panel: rgba(255,255,255,.92);
    --oc-panel2: rgba(255,255,255,.80);
    
    --oc-accent: #6d28d9;
    --oc-accent2: #2563eb;

    --oc-neon1: #22d3ee;
    --oc-neon2: #a78bfa;
    --oc-neon3: #34d399;
    --oc-line-strong: var(--oc-border-strong);
    --oc-surface-raised: var(--oc-panel);
    --oc-surface-subtle: var(--oc-panel2);
    --oc-table-head-bg: rgba(255, 255, 255, .04);
    --oc-table-row-alt-bg: rgba(255, 255, 255, .02);
    --oc-table-row-hover-bg: rgba(255, 255, 255, .05);

    --oc-radius-s: 6px;
    --oc-radius-m: 10px;
    --oc-radius-l: 14px;

    --oc-shadow-1: 0 4px 12px rgba(16, 24, 40, .08);
    --oc-shadow-2: 0 10px 30px rgba(16, 24, 40, .12);
    --oc-shadow-3: 0 14px 36px rgba(16, 24, 40, .18);

    /* Keyboard focus ring tokens (shared across components) */
    --oc-focus-ring-color: rgba(37, 99, 235, .52); /* accent2 with alpha */
    --oc-focus-ring-width: 2px;
    --oc-focus-ring-offset: 2px;
    --oc-focus-ring-shadow: 0 0 0 3px var(--oc-focus-ring-color);
    --oc-focus-ring-radius: var(--oc-radius-m);

    /* Layer registry (shared overlay/sticky stacking levels) */
    /* Z-index registry levels:
       sticky header: 200
       overlay/dropdown/popover: 400
       column menu: 500
       modal backdrop: 10000
       modal: 10010
       toast: 11000
    */
    --oc-z-sticky-header: 200;
    --oc-z-overlay: 400;
    --oc-z-dropdown: var(--oc-z-overlay);
    --oc-z-column-menu: 500;
    --oc-z-modal-backdrop: 10000;
    --oc-z-modal: 10010;
    --oc-z-toast: 11000;

    /* Django admin semantic vars -> OC tokens (prevents black-on-black regressions) */
    --body-bg: var(--oc-bg);
    --body-fg: var(--oc-ink);
    --body-quiet-color: var(--oc-muted);
    --body-loud-color: var(--oc-ink);
    --hairline-color: var(--oc-border);
    --border-color: var(--oc-border);
    --link-fg: var(--oc-accent2);
    --link-hover-color: var(--oc-accent);
    --header-bg: var(--oc-panel2);
    --header-color: var(--oc-ink);
    --header-branding-color: var(--oc-ink);
    --header-link-color: var(--oc-ink);
    --breadcrumbs-bg: var(--oc-panel2);
    --breadcrumbs-fg: var(--oc-muted);
    --breadcrumbs-link-fg: var(--oc-ink);
    --button-bg: var(--oc-panel2);
    --button-hover-bg: var(--oc-panel);
    --default-button-bg: var(--oc-accent2);
    --default-button-hover-bg: var(--oc-accent);
    --selected-bg: rgba(109, 40, 217, .16);
    --selected-row: rgba(109, 40, 217, .10);
    --close-button-bg: #ba2121;
    --close-button-hover-bg: #a41515;
  }

  html[data-oc-theme="light"] {
    --oc-bg: #eff3f8;
    --oc-bg-input: #ffffff;
    --oc-ink: rgba(16,24,40,.92);
    --oc-muted: rgba(16,24,40,.60);
    --oc-border-weak: rgba(16,24,40,.10);
    --oc-border: rgba(16,24,40,.15);
    --oc-border-strong: rgba(16,24,40,.22);
    --oc-line: var(--oc-border);
    --oc-line-strong: var(--oc-border-strong);
    --oc-panel: rgba(255,255,255,.98);
    --oc-panel2: rgba(255,255,255,.94);
    --oc-surface-raised: rgba(255,255,255,.99);
    --oc-surface-subtle: rgba(244,247,252,.96);
    --oc-table-head-bg: rgba(241,245,251,.98);
    --oc-table-row-alt-bg: rgba(248,250,253,.96);
    --oc-table-row-hover-bg: rgba(37,99,235,.045);
    --oc-accent: #6d28d9;
    --oc-accent2: #2563eb;
    --oc-neon1: #22d3ee;
    --oc-neon2: #a78bfa;
    --oc-neon3: #34d399;
    --oc-focus-ring-color: rgba(37, 99, 235, .44);
    --oc-shadow-1: 0 2px 10px rgba(16, 24, 40, .05);
    --oc-shadow-2: 0 8px 24px rgba(16, 24, 40, .08);
    --oc-shadow-3: 0 14px 30px rgba(16, 24, 40, .12);
  }

  html[data-oc-theme="light"] body {
    background: var(--oc-bg);
    color: var(--oc-ink);
  }

  html[data-oc-theme="dark"] {
    --oc-bg: #05060a;
    --oc-bg-input: rgba(0,0,0,.25);
    --oc-ink: rgba(255,255,255,.92);
    --oc-muted: rgba(255,255,255,.62);
    --oc-border-weak: rgba(255,255,255,.08);
    --oc-border: rgba(255,255,255,.10);
    --oc-border-strong: rgba(255,255,255,.16);
    --oc-line: var(--oc-border);
    --oc-panel: rgba(18, 20, 30, .72);
    --oc-panel2: rgba(12, 14, 24, .62);
    --oc-accent: #6d28d9;
    --oc-accent2: #2563eb;
    --oc-neon1: #22d3ee;
    --oc-neon2: #a78bfa;
    --oc-neon3: #34d399;
    --oc-focus-ring-color: rgba(37, 99, 235, .68);
    --oc-shadow-1: 0 6px 16px rgba(0, 0, 0, .28);
    --oc-shadow-2: 0 12px 34px rgba(0, 0, 0, .34);
    --oc-shadow-3: 0 16px 44px rgba(0, 0, 0, .42);
  }

  html[data-oc-theme="dark"] body {
    background:
      radial-gradient(1100px 700px at 18% -10%, rgba(109,40,217,.28), transparent 62%),
      radial-gradient(900px 620px at 80% 0%, rgba(37,99,235,.18), transparent 58%),
      radial-gradient(1000px 650px at 50% 120%, rgba(22,163,74,.12), transparent 62%),
      #05060a;
    color: var(--oc-ink);
  }

  html[data-oc-theme="graphite"] {
    --oc-bg: #181818;
    --oc-bg-input: rgba(0,0,0,.25);
    --oc-ink: rgba(255,255,255,.92);
    --oc-muted: rgba(255,255,255,.62);
    --oc-border-weak: rgba(255,255,255,.08);
    --oc-border: rgba(255,255,255,.10);
    --oc-border-strong: rgba(255,255,255,.16);
    --oc-line: var(--oc-border);
    --oc-panel: rgba(33,33,33,.92);
    --oc-panel2: rgba(53,53,53,.82);
    --oc-accent: #6d28d9;
    --oc-accent2: #2563eb;
    --oc-neon1: #22d3ee;
    --oc-neon2: #a78bfa;
    --oc-neon3: #34d399;
    --oc-focus-ring-color: rgba(37, 99, 235, .68);
    --oc-shadow-1: 0 6px 16px rgba(0, 0, 0, .30);
    --oc-shadow-2: 0 12px 34px rgba(0, 0, 0, .36);
    --oc-shadow-3: 0 16px 44px rgba(0, 0, 0, .44);
  }

  html[data-oc-theme="graphite"] body {
    background:
      radial-gradient(1100px 700px at 18% -10%, rgba(124,58,237,.18), transparent 62%),
      radial-gradient(900px 620px at 80% 0%, rgba(96,165,250,.10), transparent 58%),
      radial-gradient(1000px 650px at 50% 120%, rgba(34,197,94,.08), transparent 62%),
      #181818;
    color: var(--oc-ink);
  }

  html[data-oc-theme="galaxy"] {
    --oc-bg: #05060f;
    --oc-bg-input: rgba(0,0,0,.25);
    --oc-ink: rgba(255,255,255,.92);
    --oc-muted: rgba(255,255,255,.72);
    --oc-border-weak: rgba(255,255,255,.10);
    --oc-border: rgba(255,255,255,.16);
    --oc-border-strong: rgba(255,255,255,.24);
    --oc-line: var(--oc-border);
    --oc-line-strong: var(--oc-border-strong);
    --oc-panel: rgba(14, 17, 30, .88);
    --oc-panel2: rgba(11, 14, 24, .82);
    --oc-surface-raised: rgba(10, 13, 24, .90);
    --oc-surface-subtle: rgba(8, 11, 21, .86);
    --oc-table-head-bg: rgba(18, 22, 38, .94);
    --oc-table-row-alt-bg: rgba(14, 18, 31, .90);
    --oc-table-row-hover-bg: rgba(34, 211, 238, .11);
    --oc-accent: #8b5cf6;
    --oc-accent2: #7dd3fc;
    --oc-neon1: #22d3ee;
    --oc-neon2: #a78bfa;
    --oc-neon3: #34d399;
    --oc-focus-ring-color: rgba(34, 211, 238, .72); /* neon1 with alpha */
    --oc-shadow-1: 0 6px 16px rgba(0, 0, 0, .30);
    --oc-shadow-2: 0 12px 34px rgba(0, 0, 0, .34);
    --oc-shadow-3: 0 16px 40px rgba(0, 0, 0, .40);
  }

  html[data-oc-theme="galaxy"] body {
    background: #05060f;
    color: var(--oc-ink);
  }
}

/* Django admin CSS ships unlayered. Mirror semantic vars unlayered so they win
   against Django defaults while still sourcing values from OC theme tokens. */
:root,
html[data-oc-theme] {
  --body-bg: var(--oc-bg);
  --body-fg: var(--oc-ink);
  --body-quiet-color: var(--oc-muted);
  --body-loud-color: var(--oc-ink);
  --hairline-color: var(--oc-border);
  --border-color: var(--oc-border);
  --darkened-bg: var(--oc-panel2);
  --link-fg: var(--oc-accent2);
  --link-hover-color: var(--oc-accent);
  --link-selected-fg: var(--oc-ink);
  --header-bg: var(--oc-panel2);
  --header-color: var(--oc-ink);
  --header-branding-color: var(--oc-ink);
  --header-link-color: var(--oc-ink);
  --breadcrumbs-bg: var(--oc-panel2);
  --breadcrumbs-fg: var(--oc-muted);
  --breadcrumbs-link-fg: var(--oc-ink);
  --button-bg: var(--oc-panel2);
  --button-hover-bg: var(--oc-panel);
  --default-button-bg: var(--oc-accent2);
  --default-button-hover-bg: var(--oc-accent);
  --selected-bg: rgba(109, 40, 217, .16);
  --selected-row: rgba(109, 40, 217, .10);
}

html[data-oc-theme="galaxy"] {
  /* Stronger Django-admin semantic surfaces in Galaxy for visual readability */
  --header-bg: rgba(8, 10, 18, .94);
  --header-color: rgba(255, 255, 255, .96);
  --header-link-color: rgba(255, 255, 255, .96);
  --breadcrumbs-bg: rgba(9, 11, 20, .84);
  --darkened-bg: rgba(11, 14, 24, .90);
  --link-fg: var(--oc-accent2);
  --link-hover-color: var(--oc-neon1);
}