/* =====================================================================
   KALITLY — DESIGN TOKENS  v1.0
   Single source of truth for the Windows app, kalitly.uz and the admin panel.
   Direction 5 "Kalitly". Light = :root, Dark = [data-theme="dark"].
   Any element may carry data-theme="light" | "dark" to scope a theme.
   Fonts: Exo 2 (headings, numbers) + Commissioner (body/UI), SIL OFL 1.1.
   Windows app: bundle both font files locally; fallback Segoe UI.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;500;600&family=Exo+2:wght@500;600;700&display=swap");

:root, [data-theme="light"] {
  color-scheme: light;

  /* ---------- 1. PRIMITIVES (never use directly in components) ---------- */
  /* Teal — brand */
  --color-teal-50: #E5F4F8;
  --color-teal-100: #C8E8F0;
  --color-teal-200: #9DD4E3;
  --color-teal-300: #6CC3D8;
  --color-teal-400: #3E9DB5;
  --color-teal-500: #19748D;
  --color-teal-600: #146A81;
  --color-teal-700: #0E6079;
  --color-teal-800: #0A4658;
  /* Cyan — bright teal for dark-theme foregrounds */
  --color-cyan-200: #92DCF0;
  --color-cyan-300: #8DD7E8;
  /* Ink — deepest text / on-brand */
  --color-ink-800: #064168;
  --color-ink-900: #0F2433;
  --color-ink-925: #13262F;
  --color-ink-950: #0B2330;
  /* Slate — light neutrals */
  --color-slate-0: #FFFFFF;
  --color-slate-50: #F3F6F8;
  --color-slate-100: #E8EDF1;
  --color-slate-200: #D2DAE0;
  --color-slate-300: #B4BDC6;
  --color-slate-400: #9FB3BA;
  --color-slate-500: #5E878F;
  --color-slate-600: #417586;
  --color-slate-700: #4A5D6B;
  /* Frost — dark-theme text */
  --color-frost-50: #F7FBFD;
  --color-frost-100: #F2F7FA;
  --color-frost-300: #C5D6DE;
  --color-frost-400: #86BCC4;
  /* Deep — dark-theme surfaces */
  --color-deep-100: #86ABBA;
  --color-deep-200: #548A9C;
  --color-deep-300: #4A7689;
  --color-deep-400: #3A6377;
  --color-deep-500: #2F5B71;
  --color-deep-600: #2A5367;
  --color-deep-700: #264C5F;
  --color-deep-800: #224658;
  --color-deep-900: #1B3A4B;
  /* Sage — accent */
  --color-sage-300: #AABF85;
  --color-sage-500: #789557;
  /* Status hues (50 = light tint, 200/300 = dark fg, 700 = light fg, tint-dark = dark tint) */
  --color-green-50: #E6F6EC;
  --color-green-200: #95E2A6;
  --color-green-700: #1B7035;
  --color-green-tint-dark: #27585B;
  --color-amber-50: #FCF2D8;
  --color-amber-300: #FFD166;
  --color-amber-700: #845400;
  --color-amber-tint-dark: #415751;
  --color-red-50: #FCE7E8;
  --color-red-200: #FFABA3;
  --color-red-700: #B3261E;
  --color-red-tint-dark: #414656;
  --color-indigo-50: #ECEFFD;
  --color-indigo-200: #BCC8FF;
  --color-indigo-700: #3A4FA0;
  --color-indigo-tint-dark: #2E5070;
  --color-pro-tint-dark: #26566A;

  /* ---------- 2. SEMANTIC COLOR — LIGHT ---------- */
  --color-bg: var(--color-slate-50);                 /* page / window background */
  --color-surface: var(--color-slate-0);             /* cards, panels, sidebar */
  --color-surface-raised: var(--color-slate-0);      /* dialogs, menus, popovers (+ shadow) */
  --color-surface-subtle: var(--color-slate-100);    /* subtle fills, table header, off state */
  --color-border: var(--color-slate-200);            /* dividers, card outlines (decorative) */
  --color-border-strong: var(--color-slate-500);     /* input & control edges — 3:1 UI */
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-slate-700);        /* secondary text */
  --color-text-subtle: var(--color-slate-600);       /* tertiary text, meta */
  --color-heading: var(--color-ink-800);
  --color-disabled: var(--color-slate-400);          /* disabled fg/fill (contrast-exempt) */
  --color-mist: var(--color-slate-300);              /* decorative lines, illustration */

  --color-brand: var(--color-teal-500);
  --color-brand-hover: var(--color-teal-600);
  --color-brand-active: var(--color-teal-700);
  --color-brand-subtle: var(--color-teal-50);
  --color-on-brand: var(--color-slate-0);
  --color-brand-text: var(--color-teal-600);         /* links, brand-coloured text */

  --color-accent: var(--color-sage-300);
  --color-on-accent: var(--color-ink-900);
  --color-petal: var(--color-sage-500);              /* decorative accent */

  --color-success: var(--color-green-700);
  --color-success-subtle: var(--color-green-50);
  --color-on-success: var(--color-slate-0);
  --color-warning: var(--color-amber-700);
  --color-warning-subtle: var(--color-amber-50);
  --color-on-warning: var(--color-slate-0);
  --color-danger: var(--color-red-700);
  --color-danger-subtle: var(--color-red-50);
  --color-on-danger: var(--color-slate-0);
  --color-info: var(--color-indigo-700);
  --color-info-subtle: var(--color-indigo-50);
  --color-on-info: var(--color-slate-0);
  --color-pro: var(--color-teal-700);                /* "Pro kerak" — calm upgrade, never warning */
  --color-pro-subtle: var(--color-teal-50);
  --color-pro-line: var(--color-teal-200);
  --color-on-pro: var(--color-slate-0);

  --color-focus: var(--color-ink-800);
  --color-focus-halo: rgba(25, 116, 141, 0.18);     /* brand @ 18 % — input focus halo */
  --color-scrim: rgba(15, 36, 51, 0.48);
  --color-selection: var(--color-teal-100);

  /* ---------- 3. ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(6, 65, 104, 0.06);      /* cards at rest */
  --shadow-2: 0 4px 16px rgba(6, 65, 104, 0.08);     /* menus, popovers, hover */
  --shadow-3: 0 16px 40px rgba(6, 65, 104, 0.12);    /* dialogs, toasts */
}

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

  /* ---------- 2. SEMANTIC COLOR — DARK ---------- */
  --color-bg: var(--color-deep-900);
  --color-surface: var(--color-deep-800);
  --color-surface-raised: var(--color-deep-700);
  --color-surface-subtle: var(--color-deep-600);
  --color-border: var(--color-deep-300);
  --color-border-strong: var(--color-deep-100);
  --color-text: var(--color-frost-100);
  --color-text-muted: var(--color-frost-300);
  --color-text-subtle: var(--color-frost-400);
  --color-heading: var(--color-frost-50);
  --color-disabled: var(--color-deep-400);
  --color-mist: var(--color-deep-500);

  --color-brand: var(--color-teal-300);
  --color-brand-hover: var(--color-cyan-300);
  --color-brand-active: var(--color-teal-200);
  --color-brand-subtle: var(--color-pro-tint-dark);
  --color-on-brand: var(--color-ink-950);
  --color-brand-text: var(--color-cyan-300);

  --color-accent: var(--color-sage-300);
  --color-on-accent: var(--color-ink-925);
  --color-petal: var(--color-sage-300);

  --color-success: var(--color-green-200);
  --color-success-subtle: var(--color-green-tint-dark);
  --color-on-success: var(--color-ink-950);
  --color-warning: var(--color-amber-300);
  --color-warning-subtle: var(--color-amber-tint-dark);
  --color-on-warning: var(--color-ink-950);
  --color-danger: var(--color-red-200);
  --color-danger-subtle: var(--color-red-tint-dark);
  --color-on-danger: var(--color-ink-950);
  --color-info: var(--color-indigo-200);
  --color-info-subtle: var(--color-indigo-tint-dark);
  --color-on-info: var(--color-ink-950);
  --color-pro: var(--color-cyan-200);
  --color-pro-subtle: var(--color-pro-tint-dark);
  --color-pro-line: var(--color-deep-200);
  --color-on-pro: var(--color-ink-950);

  --color-focus: var(--color-cyan-300);
  --color-focus-halo: rgba(108, 195, 216, 0.28);    /* brand @ 28 % */
  --color-scrim: rgba(8, 20, 28, 0.64);
  --color-selection: var(--color-deep-400);

  /* ---------- 3. ELEVATION — DARK (deeper, still soft) ---------- */
  --shadow-1: 0 1px 2px rgba(4, 14, 20, 0.28);
  --shadow-2: 0 4px 16px rgba(4, 14, 20, 0.32);
  --shadow-3: 0 16px 40px rgba(4, 14, 20, 0.44);
}

:root {
  /* ---------- 4. TYPOGRAPHY ---------- */
  --font-heading: "Exo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --font-numeric: "Exo 2", "Segoe UI", system-ui, sans-serif; /* + font-variant-numeric: tabular-nums */
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --font-weight-regular: 400;   /* body */
  --font-weight-medium: 500;    /* UI labels, numbers */
  --font-weight-semibold: 600;  /* headings, emphasis */
  --font-weight-bold: 700;      /* max — never 800 */
  --letter-spacing: 0;

  /* Shared roles — size / line-height */
  --text-display-size: 48px;        --text-display-line: 54px;         /* web hero ≥1024 */
  --text-display-mobile-size: 30px; --text-display-mobile-line: 36px;  /* web hero <768 */
  --text-headline-size: 32px;       --text-headline-line: 40px;        /* web section heading */
  --text-title-size: 24px;          --text-title-line: 32px;           /* page / screen title */
  --text-subtitle-size: 18px;       --text-subtitle-line: 28px;        /* section, card title */
  --text-body-web-size: 16px;       --text-body-web-line: 24px;        /* website body */
  --text-body-app-size: 15px;       --text-body-app-line: 22px;        /* app + admin body */
  --text-label-size: 15px;          --text-label-line: 20px;           /* buttons, field labels (500) */
  --text-caption-size: 13px;        --text-caption-line: 20px;         /* minimum size anywhere */
  /* Numbers */
  --text-figure-lg-size: 24px;      --text-figure-lg-line: 32px;       /* KPI, amounts */

  /* ---------- 5. SPACING (4 px base) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---------- 6. RADII & BORDERS ---------- */
  --radius-sm: 4px;      /* inputs, checkboxes */
  --radius-md: 8px;      /* buttons, cards, list rows */
  --radius-lg: 12px;     /* panels, dialogs, app icon tile */
  --radius-pill: 999px;  /* chips & badges only. Radius 0 is never used. */
  --border-width: 1px;   /* everywhere */

  /* ---------- 7. FOCUS ---------- */
  /* Buttons, links, switches, checkboxes: keyboard only (:focus-visible), slim outline */
  --focus-ring-width: 1.5px;
  --focus-ring-offset: 1px;
  --focus-ring: var(--focus-ring-width) solid var(--color-focus);   /* use as `outline` value */
  /* Text / password / phone / code inputs, selects: border → brand + soft halo */
  --focus-input-border: var(--color-brand);
  --focus-halo-width: 3px;
  --focus-halo: 0 0 0 var(--focus-halo-width) var(--color-focus-halo);

  /* ---------- 8. MOTION ---------- */
  --duration-instant: 80ms;   /* press feedback, checkbox tick */
  --duration-fast: 140ms;     /* hover, colour changes */
  --duration-base: 200ms;     /* menus, tooltips, expand */
  --duration-slow: 300ms;     /* dialogs, drawers, toasts */
  --duration-slower: 420ms;   /* page-level, first-run */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- 9. LAYERS ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---------- 10. BREAKPOINTS (website + admin; reference — media queries need literals) ---------- */
  --bp-xs: 360px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;
  --bp-xl: 1920px;

  /* ---------- 11. LAYOUT GRIDS ---------- */
  /* Windows app window */
  --app-window-min-w: 800px;
  --app-window-min-h: 480px;
  --app-titlebar-h: 40px;
  --app-sidebar-w: 224px;
  --app-content-pad: 24px;
  --app-content-max: 960px;
  /* Website — 4 / 8 / 12 columns */
  --web-columns: 4;
  --web-gutter: 16px;
  --web-margin: 16px;
  --web-container-max: 1200px;
  /* Admin shell */
  --admin-sidebar-w: 256px;
  --admin-topbar-h: 64px;
  --admin-content-pad: 16px;
  --admin-content-max: 1440px;

  /* =====================================================================
     12. COMPONENT SIZES — change sizes here, in one place
     ===================================================================== */
  --control-h: 40px;                 /* inputs, selects, secondary buttons, sidebar items */
  --control-h-primary: 44px;         /* primary button */
  --hit-area-min: 40px;
  --control-pad-x: 16px;             /* buttons */
  --control-pad-x-primary: 24px;
  --input-pad-x: 12px;
  --control-gap: 8px;                /* icon ↔ label */
  --field-label-gap: 8px;            /* label ↔ input */
  --chip-h: 28px;
  --chip-pad-x: 12px;
  --status-chip-w: 140px;            /* fixed width for ALL status chips — see :lang() overrides below */
  --badge-h: 20px;
  --badge-pad-x: 6px;
  --checkbox-size: 20px;
  --switch-w: 40px;
  --switch-h: 24px;
  --icon-grid: 24px;
  --icon-size: 20px;
  --icon-size-min: 16px;
  --icon-stroke: 1.75px;
  --list-row-pad: 16px;
  --list-row-min-h: 56px;
  --card-pad: 24px;
  --panel-pad: 32px;
  --dialog-w: 480px;
  --tooltip-pad: 6px 10px;
  --table-row-h: 48px;
}

/* Status chip width per language — fits the longest label of the set
   (Ishlayapti, Oʻchirilgan, Pro kerak, Ogohlantirish, Xato, Maʼlumot, Faol emas).
   Chip = 1 px border + 12 pad + 16 icon + 6 gap + label + 12 pad + 1 px border, Commissioner 600 13 px. */
:lang(uz)      { --status-chip-w: 140px; }  /* decided by "Ogohlantirish" */
:lang(uz-Cyrl) { --status-chip-w: 148px; }  /* decided by "Огоҳлантириш" */
:lang(ru)      { --status-chip-w: 160px; }  /* decided by "Предупреждение" */
:lang(en)      { --status-chip-w: 124px; }  /* decided by "Turned off" */

/* Focus behaviour — base rules. Never remove an outline without one of these replacements. */
:where(button, a, summary, [role="button"], [role="switch"], [role="checkbox"], [role="tab"], input[type="checkbox"], input[type="radio"]):focus { outline: none; }
:where(button, a, summary, [role="button"], [role="switch"], [role="checkbox"], [role="tab"], input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: var(--focus-ring); outline-offset: var(--focus-ring-offset);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]), select, textarea):focus {
  outline: none; border-color: var(--focus-input-border); box-shadow: var(--focus-halo);
}

@media (min-width: 768px) {
  :root { --web-columns: 8; --web-gutter: 24px; --web-margin: 32px; --admin-content-pad: 24px; }
}
@media (min-width: 1024px) {
  :root { --web-columns: 12; --web-margin: 48px; --admin-content-pad: 32px; }
}
@media (min-width: 1440px) {
  :root { --web-margin: 64px; }
}

/* =====================================================================
   13. ADDED IN P1-B (components) — additive only, no existing value changed
   ===================================================================== */
:root {
  --button-h-lg: 48px;               /* website hero / onboarding CTA */
  --button-h-md: 40px;               /* default everywhere */
  --button-h-sm: 32px;               /* dense tables, admin toolbars */
  --button-pad-x-sm: 12px;
  --code-cell-w: 48px;               /* 6-digit code input cell */
  --code-cell-h: 56px;
  --toast-w: 360px;
  --sheet-w: 420px;
  --menu-min-w: 200px;
  --tooltip-max-w: 240px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 56px;
  --status-dot: 8px;
  --progress-h: 8px;
  --spinner-size: 20px;
  --spinner-stroke: 2px;
  --bubble-max-w: 72%;
  --table-row-h-dense: 36px;
}
:root, [data-theme="light"] {
  --color-danger-hover: #9A2019;
  --color-danger-active: #821A14;
  /* Data-viz — derived from brand, ordered for colour-blind separation (hue + lightness) */
  --color-viz-1: #19748D;   /* teal (brand) */
  --color-viz-2: #D98B1E;   /* amber */
  --color-viz-3: #4F63C4;   /* indigo */
  --color-viz-4: #789557;   /* sage */
  --color-viz-5: #B5487A;   /* rose */
  --color-viz-grid: var(--color-slate-100);
  --color-viz-axis: var(--color-slate-600);
  /* Sequential (funnel, heat) — teal ramp dark → light */
  --color-viz-seq-1: var(--color-teal-800);
  --color-viz-seq-2: var(--color-teal-600);
  --color-viz-seq-3: var(--color-teal-400);
  --color-viz-seq-4: var(--color-teal-300);
  --color-viz-seq-5: var(--color-teal-200);
}
[data-theme="dark"] {
  --color-danger-hover: #FFC2BC;
  --color-danger-active: #FFD6D2;
  --color-viz-1: #6CC3D8;
  --color-viz-2: #FFC24D;
  --color-viz-3: #A9B8FF;
  --color-viz-4: #AABF85;
  --color-viz-5: #F29CC2;
  --color-viz-grid: var(--color-deep-600);
  --color-viz-axis: var(--color-frost-400);
  --color-viz-seq-1: var(--color-teal-200);
  --color-viz-seq-2: var(--color-teal-300);
  --color-viz-seq-3: var(--color-teal-400);
  --color-viz-seq-4: var(--color-deep-200);
  --color-viz-seq-5: var(--color-deep-300);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
  }
}

/* =====================================================================
   14. ADDED IN P3-A (website) — additive only
   ===================================================================== */
:root {
  --web-header-h: 64px;              /* sticky site header; also scroll-padding for anchors */
  --touch-target: 44px;              /* website controls on touch layouts (< 1280 px) */
  --web-prose-max: 68ch;             /* max line length for prose */
}

/* =====================================================================
   15. ADDED IN P3-C (website) — additive only
   ===================================================================== */
:root, [data-theme="light"], [data-theme="dark"] {
  --color-mock-winblue: #0F5FA6;     /* drawn mock of the blue Windows warning screen (same in both themes) */
  --color-on-mock-winblue: #FFFFFF;  /* 6.6:1 on --color-mock-winblue */
}