/* Karin v5.273 — Canonical Theme Layer
   --------------------------------------------------------------------------
   Purpose:
   - One late semantic paint layer for the whole product.
   - Future visual/theme changes should start here instead of page CSS.
   - karin-ui.css keeps historical token fallbacks during staged migration.
   - No page/route selectors belong in this file.
   -------------------------------------------------------------------------- */

:root{
  color-scheme:light;

  /* Brand / semantic paint */
  --karin-bg:#f4f7fb;
  --karin-canvas:#f4f7fb;
  --karin-bg-elevated:#f8fafd;
  --karin-surface:#ffffff;
  --karin-surface-raised:#ffffff;
  --karin-surface-soft:#f8fafc;
  --karin-surface-muted:#f1f5f9;
  --karin-surface-border:#dbe4ee;
  --karin-surface-border-strong:#c9d6e4;
  --karin-border:#e2e8f0;
  --karin-border-strong:#cbd5e1;

  --karin-text:#102033;
  --karin-text-muted:#66778c;
  --karin-heading:#0d1f38;

  --karin-primary:#2467d1;
  --karin-primary-strong:#1b56b5;
  --karin-primary-soft:#edf4ff;
  --karin-accent:#1f65c8;
  --karin-accent-strong:#1754aa;
  --karin-accent-soft:#edf4ff;

  --karin-success:#147a43;
  --karin-danger:#b91d45;
  --karin-warning:#ad6807;

  /* Controls */
  --karin-control-bg:#ffffff;
  --karin-control-border:#c9d5e3;
  --karin-control-focus:#79a9e8;
  --karin-focus-ring:0 0 0 3px rgba(36,103,209,.14);

  /* Premium depth: restrained, not decorative. */
  --karin-shadow-sm:0 1px 2px rgba(15,23,42,.025),0 7px 22px rgba(31,51,79,.045);
  --karin-shadow-md:0 2px 5px rgba(15,23,42,.035),0 14px 36px rgba(31,51,79,.075);
  --karin-shadow-hover:0 4px 10px rgba(15,23,42,.04),0 18px 44px rgba(31,51,79,.09);
  --karin-shadow-modal:0 8px 24px rgba(15,23,42,.10),0 34px 100px rgba(15,23,42,.24);
  --karin-shadow-button:0 1px 2px rgba(15,23,42,.08),0 5px 14px rgba(31,83,159,.10);

  /* Interaction / material */
  --karin-overlay:rgba(15,23,42,.20);
  --karin-backdrop-filter:blur(10px) saturate(115%);
  --karin-press-scale:.985;
  --karin-hover-lift:-1px;
  --karin-interactive-border:color-mix(in srgb,var(--karin-primary) 30%,var(--karin-surface-border));

  /* App chrome */
  --karin-chrome-sidebar-bg:rgba(255,255,255,.96);
  --karin-chrome-topbar-bg:rgba(255,255,255,.94);
  --karin-chrome-border:#e2e8f0;
  --karin-chrome-sidebar-shadow:-12px 0 36px rgba(34,55,83,.035);
  --karin-chrome-topbar-shadow:0 8px 26px rgba(31,51,79,.045);
  --karin-chrome-footer-bg:linear-gradient(180deg,rgba(255,255,255,.76),#fff 25%);
  --karin-chrome-theme-hover-bg:#f3f6fa;
  --karin-chrome-theme-hover-border:#e0e7f0;
  --karin-chrome-menu-bg:#fbfcfe;
  --karin-chrome-menu-border:#dfe6ef;
}

html[data-theme="dark"]{
  color-scheme:dark;

  --karin-bg:#0b1421;
  --karin-canvas:#0b1421;
  --karin-bg-elevated:#101b2d;
  --karin-surface:#132033;
  --karin-surface-raised:#15243a;
  --karin-surface-soft:#0f1a2a;
  --karin-surface-muted:#17283d;
  --karin-surface-border:#24374f;
  --karin-surface-border-strong:#314863;
  --karin-border:#2b3e56;
  --karin-border-strong:#39516d;

  --karin-text:#edf3fa;
  --karin-text-muted:#9fb0c4;
  --karin-heading:#f5f8fd;

  --karin-primary:#5799f2;
  --karin-primary-strong:#76adf5;
  --karin-primary-soft:#112b49;
  --karin-accent:#69a7f7;
  --karin-accent-strong:#8abcfb;
  --karin-accent-soft:#122b49;

  --karin-control-bg:#0d1929;
  --karin-control-border:#3a526d;
  --karin-control-focus:#5488c2;
  --karin-focus-ring:0 0 0 3px rgba(87,153,242,.18);

  --karin-shadow-sm:0 1px 2px rgba(0,0,0,.10),0 8px 22px rgba(0,0,0,.18);
  --karin-shadow-md:0 3px 8px rgba(0,0,0,.16),0 18px 46px rgba(0,0,0,.26);
  --karin-shadow-hover:0 5px 12px rgba(0,0,0,.18),0 22px 54px rgba(0,0,0,.30);
  --karin-shadow-modal:0 10px 28px rgba(0,0,0,.26),0 38px 110px rgba(0,0,0,.52);
  --karin-shadow-button:0 1px 2px rgba(0,0,0,.20),0 6px 16px rgba(0,0,0,.18);

  --karin-overlay:rgba(2,8,17,.50);
  --karin-backdrop-filter:blur(12px) saturate(112%);
  --karin-interactive-border:color-mix(in srgb,var(--karin-primary) 36%,var(--karin-surface-border));

  --karin-chrome-sidebar-bg:rgba(15,27,44,.97);
  --karin-chrome-topbar-bg:rgba(15,27,44,.94);
  --karin-chrome-border:#293d56;
  --karin-chrome-sidebar-shadow:-12px 0 40px rgba(0,0,0,.16);
  --karin-chrome-topbar-shadow:0 8px 28px rgba(0,0,0,.16);
  --karin-chrome-footer-bg:linear-gradient(180deg,rgba(15,27,44,.70),#0f1b2c 25%);
  --karin-chrome-theme-hover-bg:#17283d;
  --karin-chrome-theme-hover-border:#334b68;
  --karin-chrome-menu-bg:#101d30;
  --karin-chrome-menu-border:#2d425d;
}

/* Transparency is enhancement only; never required for readability. */
@media(prefers-reduced-transparency:reduce){
  :root,html[data-theme="dark"]{--karin-backdrop-filter:none;}
}

/* ========================================================================
   Karin v5.274 — Semantic State Theme Ownership
   Theme owns state paint so a future visual theme can replace it globally.
   ======================================================================== */
:root{
  --karin-success-surface:#ecfdf3;
  --karin-success-border:#bbebcf;
  --karin-success-text:#0a7144;
  --karin-warning-surface:#fff7e6;
  --karin-warning-border:#f0d59a;
  --karin-warning-text:#915b09;
  --karin-danger-surface:#fff1f3;
  --karin-danger-border:#f3c2cb;
  --karin-danger-text:#a9233e;
  --karin-info-surface:#edf5ff;
  --karin-info-border:#c7dcf7;
  --karin-info-text:#1f64bd;

  --karin-badge-neutral-bg:#e2e8f0;
  --karin-badge-neutral-text:#374151;
  --karin-badge-success-bg:#dcfce7;
  --karin-badge-success-text:#166534;
  --karin-badge-warning-bg:#fef3c7;
  --karin-badge-warning-text:#92400e;
  --karin-badge-danger-bg:#fee2e2;
  --karin-badge-danger-text:#991b1b;
  --karin-badge-info-bg:#dbeafe;
  --karin-badge-info-text:#1d4ed8;
  --karin-badge-complete-bg:#ccfbf1;
  --karin-badge-complete-text:#0f766e;
  --karin-pill-bg:#eef2ff;
  --karin-pill-text:#3730a3;
}
html[data-theme="dark"]{
  --karin-success-surface:#10291f;
  --karin-success-border:#28533f;
  --karin-success-text:#83ddb1;
  --karin-warning-surface:#352714;
  --karin-warning-border:#70531f;
  --karin-warning-text:#f2c36f;
  --karin-danger-surface:#351a24;
  --karin-danger-border:#704052;
  --karin-danger-text:#f3a1b4;
  --karin-info-surface:#142d49;
  --karin-info-border:#365e85;
  --karin-info-text:#9bc9ff;

  --karin-badge-neutral-bg:var(--karin-surface-muted);
  --karin-badge-neutral-text:var(--karin-text);
  --karin-badge-success-bg:var(--karin-success-surface);
  --karin-badge-success-text:var(--karin-success-text);
  --karin-badge-warning-bg:var(--karin-warning-surface);
  --karin-badge-warning-text:var(--karin-warning-text);
  --karin-badge-danger-bg:var(--karin-danger-surface);
  --karin-badge-danger-text:var(--karin-danger-text);
  --karin-badge-info-bg:var(--karin-info-surface);
  --karin-badge-info-text:var(--karin-info-text);
  --karin-badge-complete-bg:#173b35;
  --karin-badge-complete-text:#80e0c9;
  --karin-pill-bg:#173150;
  --karin-pill-text:#a9d2ff;
}


/* ========================================================================
   Karin v5.275 — Form semantic paint
   ======================================================================== */
:root,
html[data-theme="light"]{
  --karin-field-label:var(--karin-text);
  --karin-field-hint:var(--karin-text-muted);
  --karin-control-hover-border:var(--karin-border-strong);
  --karin-control-invalid-border:var(--karin-danger-border);
  --karin-control-invalid-ring:color-mix(in srgb,var(--karin-danger) 15%,transparent);
  --karin-control-success-border:var(--karin-success-border);
  --karin-control-success-ring:color-mix(in srgb,var(--karin-success) 13%,transparent);
  --karin-switch-track:var(--karin-border-strong);
  --karin-switch-track-checked:var(--karin-primary);
  --karin-switch-thumb:#fff;
}
html[data-theme="dark"]{
  --karin-field-label:var(--karin-text);
  --karin-field-hint:var(--karin-text-muted);
  --karin-control-hover-border:#54708e;
  --karin-control-invalid-border:var(--karin-danger-border);
  --karin-control-invalid-ring:color-mix(in srgb,var(--karin-danger-text) 18%,transparent);
  --karin-control-success-border:var(--karin-success-border);
  --karin-control-success-ring:color-mix(in srgb,var(--karin-success-text) 15%,transparent);
  --karin-switch-track:#52677f;
  --karin-switch-track-checked:var(--karin-primary);
  --karin-switch-thumb:#f8fbff;
}

/* ========================================================================
   Karin v5.285 — Premium Visual Language / Phase 1
   Semantic paint only. This is the global skin contract for Karin UI System.
   No route/page selectors belong here.
   ======================================================================== */
:root,
html[data-theme="light"]{
  --karin-premium-canvas:
    radial-gradient(circle at 12% -8%,rgba(47,111,214,.085),transparent 28%),
    radial-gradient(circle at 92% 4%,rgba(92,137,205,.045),transparent 24%),
    linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 48%,#f5f7fa 100%);
  --karin-premium-surface:linear-gradient(180deg,rgba(255,255,255,.995),rgba(252,253,255,.985));
  --karin-premium-surface-soft:linear-gradient(180deg,#fafcff,#f6f9fc);
  --karin-premium-card-border:#dbe4ee;
  --karin-premium-card-border-hover:#c5d4e5;
  --karin-premium-card-shadow:0 1px 2px rgba(15,23,42,.025),0 10px 30px rgba(31,51,79,.052);
  --karin-premium-card-shadow-hover:0 3px 8px rgba(15,23,42,.035),0 18px 44px rgba(31,51,79,.082);
  --karin-premium-control-bg:rgba(255,255,255,.94);
  --karin-premium-control-border:#cbd7e4;
  --karin-premium-control-hover:#b7c7d8;
  --karin-premium-primary-bg:linear-gradient(180deg,#2d72d7 0%,#2262c5 100%);
  --karin-premium-primary-hover:linear-gradient(180deg,#2869ca 0%,#1c57b4 100%);
  --karin-premium-primary-border:#1f5dbb;
  --karin-premium-primary-shadow:0 1px 2px rgba(15,23,42,.10),0 7px 18px rgba(31,102,209,.16);
  --karin-premium-subtle-shadow:0 1px 2px rgba(15,23,42,.035);
  --karin-premium-secondary-bg:linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
  --karin-premium-secondary-hover:linear-gradient(180deg,#fbfcfe 0%,#eef3f8 100%);
  --karin-premium-table-head:linear-gradient(180deg,#f9fbfd 0%,#f3f7fa 100%);
  --karin-premium-table-row-hover:#f7faff;
  --karin-premium-divider:#e4eaf1;
  --karin-premium-modal-header:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  --karin-premium-modal-footer:linear-gradient(180deg,#fbfcfe 0%,#fff 100%);

  --karin-control-bg:var(--karin-premium-control-bg);
  --karin-control-border:var(--karin-premium-control-border);
  --karin-table-head:var(--karin-premium-table-head);
  --karin-shadow-sm:var(--karin-premium-card-shadow);
  --karin-shadow-hover:var(--karin-premium-card-shadow-hover);
  --karin-shadow-button:var(--karin-premium-primary-shadow);

  --karin-chrome-sidebar-bg:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(250,252,255,.975) 72%,rgba(247,250,253,.99) 100%);
  --karin-chrome-topbar-bg:rgba(255,255,255,.88);
  --karin-chrome-border:#dce5ef;
  --karin-chrome-sidebar-shadow:-14px 0 44px rgba(30,52,80,.05);
  --karin-chrome-topbar-shadow:0 1px 2px rgba(15,23,42,.025),0 12px 36px rgba(31,51,79,.07);
  --karin-chrome-nav-hover-bg:#f1f6fc;
  --karin-chrome-nav-hover-text:#185db8;
  --karin-chrome-nav-active-bg:linear-gradient(90deg,#eef5ff 0%,#e8f2ff 100%);
  --karin-chrome-nav-active-text:#1559b2;
  --karin-chrome-nav-icon-bg:#f7f9fc;
  --karin-chrome-nav-icon-border:#dce5ef;
  --karin-chrome-nav-icon-text:#526b84;
  --karin-chrome-footer-bg:linear-gradient(180deg,rgba(249,251,254,.82),rgba(255,255,255,.98) 34%);
}
html[data-theme="dark"]{
  --karin-premium-canvas:
    radial-gradient(circle at 12% -8%,rgba(68,129,214,.14),transparent 28%),
    radial-gradient(circle at 92% 4%,rgba(51,95,155,.09),transparent 24%),
    linear-gradient(180deg,#0b1421 0%,#09121e 52%,#0b1522 100%);
  --karin-premium-surface:linear-gradient(180deg,rgba(20,34,54,.99),rgba(17,30,48,.99));
  --karin-premium-surface-soft:linear-gradient(180deg,#132239,#101d30);
  --karin-premium-card-border:#263b55;
  --karin-premium-card-border-hover:#365475;
  --karin-premium-card-shadow:0 1px 2px rgba(0,0,0,.14),0 12px 34px rgba(0,0,0,.20);
  --karin-premium-card-shadow-hover:0 4px 10px rgba(0,0,0,.18),0 20px 52px rgba(0,0,0,.28);
  --karin-premium-control-bg:rgba(13,25,41,.94);
  --karin-premium-control-border:#39536f;
  --karin-premium-control-hover:#4a6989;
  --karin-premium-primary-bg:linear-gradient(180deg,#4f91e9 0%,#3779d2 100%);
  --karin-premium-primary-hover:linear-gradient(180deg,#61a0ef 0%,#4385dc 100%);
  --karin-premium-primary-border:#4a87d8;
  --karin-premium-primary-shadow:0 1px 2px rgba(0,0,0,.22),0 8px 20px rgba(28,75,135,.24);
  --karin-premium-subtle-shadow:0 1px 2px rgba(0,0,0,.16);
  --karin-premium-secondary-bg:linear-gradient(180deg,#17263c 0%,#132237 100%);
  --karin-premium-secondary-hover:linear-gradient(180deg,#1c2e47 0%,#17283f 100%);
  --karin-premium-table-head:linear-gradient(180deg,#182942 0%,#15253b 100%);
  --karin-premium-table-row-hover:#182a42;
  --karin-premium-divider:#2a3e57;
  --karin-premium-modal-header:linear-gradient(180deg,#17263c 0%,#142238 100%);
  --karin-premium-modal-footer:linear-gradient(180deg,#122036 0%,#142238 100%);

  --karin-control-bg:var(--karin-premium-control-bg);
  --karin-control-border:var(--karin-premium-control-border);
  --karin-table-head:var(--karin-premium-table-head);
  --karin-shadow-sm:var(--karin-premium-card-shadow);
  --karin-shadow-hover:var(--karin-premium-card-shadow-hover);
  --karin-shadow-button:var(--karin-premium-primary-shadow);

  --karin-chrome-sidebar-bg:linear-gradient(180deg,rgba(16,29,48,.985) 0%,rgba(13,25,42,.985) 72%,rgba(12,23,38,.995) 100%);
  --karin-chrome-topbar-bg:rgba(16,29,48,.88);
  --karin-chrome-border:#2b405a;
  --karin-chrome-sidebar-shadow:-16px 0 48px rgba(0,0,0,.18);
  --karin-chrome-topbar-shadow:0 1px 2px rgba(0,0,0,.18),0 14px 40px rgba(0,0,0,.20);
  --karin-chrome-nav-hover-bg:#172a43;
  --karin-chrome-nav-hover-text:#9bc9ff;
  --karin-chrome-nav-active-bg:linear-gradient(90deg,#183351 0%,#16304c 100%);
  --karin-chrome-nav-active-text:#b4d8ff;
  --karin-chrome-nav-icon-bg:#15263d;
  --karin-chrome-nav-icon-border:#2d455f;
  --karin-chrome-nav-icon-text:#aac0d6;
  --karin-chrome-footer-bg:linear-gradient(180deg,rgba(13,25,42,.72),rgba(13,25,42,.98) 34%);
}


/* ========================================================================
   Karin v5.288 — Premium Composition System Paint
   Route-agnostic semantic paint for page headers, actions, KPI and data
   panels. Composition stays quiet: hierarchy first, decoration second.
   ======================================================================== */
:root,
html[data-theme="light"]{
  --karin-composition-divider:#dfe6ee;
  --karin-composition-section-title:#13263d;
  --karin-composition-section-copy:#718197;
  --karin-composition-action-bg:rgba(255,255,255,.88);
  --karin-composition-action-hover:#f6f9fd;
  --karin-composition-action-border:#d7e1ec;
  --karin-composition-tile-bg:linear-gradient(180deg,rgba(255,255,255,.97),rgba(249,251,254,.96));
  --karin-composition-tile-hover:#fff;
  --karin-composition-kpi-bg:linear-gradient(180deg,#fff 0%,#fbfcfe 100%);
  --karin-composition-panel-bg:var(--karin-premium-surface);
  --karin-composition-panel-border:var(--karin-premium-card-border);
  --karin-composition-muted-bg:#f7f9fc;
}
html[data-theme="dark"]{
  --karin-composition-divider:#2b3f58;
  --karin-composition-section-title:#edf4fb;
  --karin-composition-section-copy:#93a6bc;
  --karin-composition-action-bg:rgba(20,35,56,.88);
  --karin-composition-action-hover:#1a2d47;
  --karin-composition-action-border:#324b68;
  --karin-composition-tile-bg:linear-gradient(180deg,rgba(21,37,59,.98),rgba(17,31,50,.98));
  --karin-composition-tile-hover:#192c46;
  --karin-composition-kpi-bg:linear-gradient(180deg,#15263d 0%,#122137 100%);
  --karin-composition-panel-bg:var(--karin-premium-surface);
  --karin-composition-panel-border:var(--karin-premium-card-border);
  --karin-composition-muted-bg:#132238;
}

/* ========================================================================
   Karin v5.314 — Premium Design System v2 / Golden Reference Paint
   Quiet-premium semantic tokens. Rollout is deliberately opt-in so stable
   workspaces do not change until their Golden Reference is approved.
   ======================================================================== */
:root,
html[data-theme="light"]{
  --karin-golden-canvas:#f5f7fa;
  --karin-golden-header-bg:linear-gradient(180deg,rgba(255,255,255,.99),rgba(249,251,254,.98));
  --karin-golden-surface:rgba(255,255,255,.985);
  --karin-golden-surface-soft:#f8fafc;
  --karin-golden-border:#dbe4ee;
  --karin-golden-border-strong:#ccd8e5;
  --karin-golden-divider:#e7ecf2;
  --karin-golden-shadow:0 1px 2px rgba(15,23,42,.025),0 8px 24px rgba(31,51,79,.045);
  --karin-golden-shadow-hover:0 2px 5px rgba(15,23,42,.035),0 12px 30px rgba(31,51,79,.065);
  --karin-golden-title:#132238;
  --karin-golden-muted:#718197;
  --karin-golden-row-hover:#f8fbff;
}
html[data-theme="dark"]{
  --karin-golden-canvas:#0b1421;
  --karin-golden-header-bg:linear-gradient(180deg,rgba(21,36,57,.99),rgba(17,30,49,.99));
  --karin-golden-surface:rgba(18,32,51,.99);
  --karin-golden-surface-soft:#111f33;
  --karin-golden-border:#2b4059;
  --karin-golden-border-strong:#3a5471;
  --karin-golden-divider:#263a52;
  --karin-golden-shadow:0 1px 2px rgba(0,0,0,.16),0 9px 28px rgba(0,0,0,.18);
  --karin-golden-shadow-hover:0 3px 7px rgba(0,0,0,.20),0 14px 34px rgba(0,0,0,.24);
  --karin-golden-title:#eef4fb;
  --karin-golden-muted:#9bacc0;
  --karin-golden-row-hover:#172940;
}