/* Karin v5.74 — Design System Foundation
   Non-visual architecture contract.
   This file intentionally defines shared design-system primitives only.
   It must not carry page-specific selectors, route patches, legacy aliases or forced-priority declarations.
   Existing visual output remains owned by style.css + karin-ui.css during staged migration. */
html:root{
  /* Spacing scale */
  --karin-space-0:0;
  --karin-space-1:4px;
  --karin-space-2:8px;
  --karin-space-3:12px;
  --karin-space-4:16px;
  --karin-space-5:20px;
  --karin-space-6:24px;
  --karin-space-8:32px;
  --karin-space-10:40px;
  --karin-space-12:48px;

  /* Canonical control geometry */
  --karin-control-height-sm:34px;
  --karin-control-height-md:42px;
  --karin-control-height-lg:48px;
  --karin-touch-target:44px;
  --karin-icon-size-sm:16px;
  --karin-icon-size-md:20px;
  --karin-icon-size-lg:24px;

  /* Typography scale */
  --karin-font-size-xs:10.5px;
  --karin-font-size-sm:12px;
  --karin-font-size-md:13.5px;
  --karin-font-size-lg:16px;
  --karin-font-size-xl:20px;
  --karin-line-height-tight:1.4;
  --karin-line-height-normal:1.7;
  --karin-line-height-relaxed:1.9;

  /* Layout primitives */
  --karin-layout-gap-sm:8px;
  --karin-layout-gap-md:12px;
  --karin-layout-gap-lg:16px;
  --karin-card-padding-block:14px;
  --karin-card-padding-inline:15px;
  --karin-section-head-gap:10px;
  --karin-section-head-margin:12px;
  --karin-table-cell-block:9px;
  --karin-table-cell-inline:10px;
  --karin-page-inline-mobile:12px;
  --karin-page-inline-tablet:18px;
  --karin-page-inline-desktop:20px;
  --karin-modal-mobile-gap:8px;

  /* Application chrome / responsive layout */
  --karin-sidebar-width:252px;
  --karin-content-max-width:1360px;
  --karin-content-gutter-desktop:24px;
  --karin-content-gutter-tablet:13px;
  --karin-content-gutter-mobile:10px;
  --karin-topbar-height:64px;
  --karin-topbar-height-mobile:58px;
  --karin-z-topbar:30;

  /* Application chrome semantic paint */
  --karin-chrome-sidebar-bg:var(--k21-surface,var(--karin-surface));
  --karin-chrome-topbar-bg:var(--k21-surface,var(--karin-surface));
  --karin-chrome-border:var(--k21-border,var(--karin-border));
  --karin-chrome-text:var(--karin-text);
  --karin-chrome-sidebar-shadow:-10px 0 32px rgba(34,55,83,.028);
  --karin-chrome-topbar-shadow:0 7px 24px rgba(31,51,79,.045);
  --karin-chrome-brand-title:var(--k21-text);
  --karin-chrome-brand-subtitle:var(--k21-muted);
  --karin-chrome-nav-text:var(--k21-text-2);
  --karin-chrome-nav-hover-bg:var(--k21-blue-soft);
  --karin-chrome-nav-hover-text:var(--k21-blue);
  --karin-chrome-nav-icon-bg:var(--k21-surface-2);
  --karin-chrome-nav-icon-border:var(--k21-border);
  --karin-chrome-nav-icon-text:#50677f;
  --karin-chrome-footer-bg:linear-gradient(180deg,rgba(255,255,255,.78),#fff 24%);
  --karin-chrome-footer-border:#e9eef4;
  --karin-chrome-theme-text:var(--karin-nav-text);
  --karin-chrome-theme-hover-bg:#f4f7fb;
  --karin-chrome-theme-hover-border:#e5ebf2;
  --karin-chrome-logout-bg:#fff;
  --karin-chrome-logout-text:#c9334f;
  --karin-chrome-credit:#8a98a9;
  --karin-chrome-menu-bg:#fbfcfe;
  --karin-chrome-menu-border:#e1e7ef;
  --karin-chrome-menu-text:#33445c;
  --karin-chrome-status-area-bg:transparent;
  --karin-chrome-clock-border:var(--k21-border);
  --karin-chrome-clock-text:var(--k21-text-2);
  --karin-chrome-clock-detail:var(--k21-muted);
  --karin-chrome-clock-time:var(--k21-text);
  --karin-chrome-offline-bg:#fff1f2;
  --karin-chrome-offline-border:#fecdd3;
  --karin-chrome-offline-text:#be123c;

  /* Motion contract — simple state transitions only. */
  --karin-motion-fast:120ms;
  --karin-motion-base:160ms;
  --karin-motion-slow:220ms;
  --karin-ease-standard:cubic-bezier(.2,.8,.2,1);
  --karin-ease-emphasized:cubic-bezier(.2,.9,.2,1);
  --karin-ease-spring:cubic-bezier(.18,.89,.32,1.16);
  --karin-motion-modal:240ms;
  --karin-motion-feedback:90ms;

  /* Component architecture contract */
  --karin-component-radius:var(--karin-radius-lg,16px);
  --karin-component-gap:var(--karin-space-3);
  --karin-component-border:var(--karin-surface-border,var(--karin-border));
  --karin-component-surface:var(--karin-surface);
  --karin-component-surface-soft:var(--karin-surface-soft);

  /* Layering contract */
  --karin-z-base:0;
  --karin-z-sticky:100;
  --karin-z-dropdown:1000;
  --karin-z-sidebar-backdrop:999990;
  --karin-z-sidebar:999991;
  --karin-z-modal:1000000;
  --karin-z-toast:1000100;
}

/* v5.74 contract:
   Canonical component names for staged source migration:
   .karin-button (+ --primary/--secondary/--danger)
   .karin-control
   .karin-card
   .karin-badge
   .karin-actions
   .karin-table-wrap / .karin-table
   .karin-pagination
   .karin-actions / .karin-actions--row
   .karin-empty-state
   .karin-modal / .karin-modal-shell / .karin-modal__header / .karin-modal__body / .karin-modal__footer
   .karin-app-shell / .karin-sidebar / .karin-content / .karin-topbar

   Legacy .karin-button/.karin-card/.box/.modal/... remain compatibility hooks only until migrated.
*/

/* ========================================================================
   Karin v5.274 — Canonical Feedback / State Geometry
   Shared feedback primitives must not be re-sized independently by pages.
   ======================================================================== */
html:root{
  --karin-notice-radius:var(--karin-radius-md,12px);
  --karin-notice-padding-block:11px;
  --karin-notice-padding-inline:13px;
  --karin-toast-width:min(360px,calc(100vw - 24px));
  --karin-toast-offset:16px;
}


/* ========================================================================
   Karin v5.275 — Canonical Form System Geometry
   Form geometry belongs to Foundation; paint remains theme-owned and page
   styles may compose layout without redefining shared control states.
   ======================================================================== */
html:root{
  --karin-field-gap:6px;
  --karin-field-message-gap:4px;
  --karin-control-padding-block:8px;
  --karin-control-padding-inline:10px;
  --karin-control-radius:var(--karin-radius-sm,10px);
  --karin-control-ring-size:3px;
  --karin-choice-size:17px;
  --karin-switch-width:42px;
  --karin-switch-height:24px;
  --karin-switch-thumb:18px;
  --karin-switch-gap:3px;
}

/* ========================================================================
   Karin v5.276 — Canonical Layout / Table / Modal Geometry
   Shared sizing and responsive geometry only; paint stays theme-owned.
   ======================================================================== */
html:root{
  --karin-page-stack-gap:var(--karin-space-4);
  --karin-toolbar-gap:var(--karin-space-2);
  --karin-modal-width-sm:440px;
  --karin-modal-width-md:680px;
  --karin-modal-width-lg:920px;
  --karin-modal-width-xl:1180px;
  --karin-table-cell-compact-block:7px;
  --karin-table-cell-comfortable-block:12px;
}


/* ========================================================================
   Karin v5.277 — Canonical Form Layout Rhythm
   Form-bearing modals and conditional panels consume one shared spacing
   contract so the last field never visually collides with action separators.
   ======================================================================== */
html:root{
  --karin-modal-body-padding-block:var(--karin-space-4);
  --karin-modal-body-padding-inline:18px;
  --karin-modal-footer-padding-block:var(--karin-space-3);
  --karin-modal-footer-padding-inline:18px;
  --karin-modal-field-footer-gap:var(--karin-space-4);
  --karin-conditional-panel-gap:var(--karin-space-3);
}
/* ========================================================================
   Karin v5.279 — Legacy Layout Migration Geometry
   Legacy row/row4 ownership retired in v5.281; only the protected order-delivery flow keeps a page-scoped compatibility geometry,
   while source markup carries canonical form-grid ownership in parallel.
   ======================================================================== */
html:root{
  --karin-form-grid-gap:10px;
}

/* ========================================================================
   Karin v5.285 — Premium Visual Language Geometry
   Quiet-premium geometry shared by the canonical component system.
   Visual paint remains theme-owned; pages must not clone these values.
   ======================================================================== */
html:root{
  --karin-premium-card-radius:18px;
  --karin-premium-card-padding-block:16px;
  --karin-premium-card-padding-inline:17px;
  --karin-premium-control-radius:11px;
  --karin-premium-button-radius:11px;
  --karin-premium-table-radius:14px;
  --karin-premium-modal-radius:20px;
  --karin-premium-section-gap:14px;
  --karin-premium-chrome-radius:18px;
}


/* ========================================================================
   Karin v5.288 — Premium Composition System Geometry
   Page composition primitives are shared and route-agnostic. Pages choose
   which content deserves a surface; the system does not box every section.
   ======================================================================== */
html:root{
  --karin-composition-page-gap:22px;
  --karin-composition-section-gap:12px;
  --karin-composition-header-gap:14px;
  --karin-composition-header-padding-block:8px 18px;
  --karin-composition-header-avatar:48px;
  --karin-composition-action-height:38px;
  --karin-composition-action-radius:11px;
  --karin-composition-tile-min-height:74px;
  --karin-composition-kpi-min-height:102px;
  --karin-composition-panel-radius:var(--karin-premium-card-radius,18px);
  --karin-composition-panel-padding:16px;
  --karin-composition-mobile-gap:8px;
  --karin-composition-mobile-card-radius:13px;
}

/* ========================================================================
   Karin v5.314 — Premium Design System v2 / Golden Reference Geometry
   Staged rollout: tokens are global; the first consumer is Dashboard only.
   No business/page behavior is defined in Foundation.
   ======================================================================== */
html:root{
  --karin-golden-page-gap:16px;
  --karin-golden-section-gap:10px;
  --karin-golden-panel-radius:16px;
  --karin-golden-panel-padding:16px;
  --karin-golden-header-radius:16px;
  --karin-golden-header-padding-block:14px;
  --karin-golden-header-padding-inline:16px;
  --karin-golden-action-radius:13px;
  --karin-golden-action-min-height:70px;
  --karin-golden-action-icon:36px;
  --karin-golden-kpi-radius:15px;
  --karin-golden-kpi-min-height:108px;
  --karin-golden-kpi-icon:40px;
  --karin-golden-data-row-radius:12px;
  --karin-golden-mobile-panel-padding:12px;
}