/* =========================================================================
   CK Demo design system: semantic tokens.
   Style: Minimalism & Swiss (UI/UX Pro Max design-system, density 8 / motion 3).
   Palette: kept from the client's journey reference (navy + trust blue), not the
   generator's default orange, so the product keeps its identity.
   Type: IBM Plex Sans Arabic (Latin + Arabic in one family; Fira Sans has no Arabic).
   See design-system/ck-demo/MASTER.md and docs/UI_AUDIT.md.
   ========================================================================= */
:root {
  /* Typography */
  --font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-2xs: 11px;  /* meta only, never body */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-display: 34px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.25; --leading-normal: 1.5;

  /* Color: brand & neutrals (contrast ≥ 4.5:1 for every text token on surface) */
  --color-primary: #1d4ed8;           /* 6.7:1 on white */
  --color-primary-hover: #1e40af;
  --color-primary-subtle: #eff4ff;
  --color-primary-muted: #dbe5fe;
  --color-on-primary: #ffffff;
  --color-background: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #e5e7eb;
  --color-border-strong: #cfd5dd;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #5b6472;        /* 6.0:1 */
  --color-text-subtle: #6b7280;       /* 4.8:1, the lightest text allowed */
  --color-nav: #0f172a;
  --color-nav-hover: #1e293b;
  --color-nav-text: #cbd5e1;
  --color-nav-muted: #8592a6;

  /* Color: status (text / background / border) */
  --color-success: #15803d; --color-success-bg: #e7f6ec; --color-success-border: #bfe5cc;
  --color-warning: #92400e; --color-warning-bg: #fef6e4; --color-warning-border: #f6dfa8; --color-warning-strong: #d99a1e;
  --color-danger: #b91c1c;  --color-danger-bg: #fdecec;  --color-danger-border: #f6c8c8;
  --color-info: #1e40af;    --color-info-bg: #e8efff;    --color-info-border: #c9d8fb;
  --color-neutral: #4b5563; --color-neutral-bg: #eef0f3;
  --color-focus: #2563eb;
  --color-highlight: #fff3c4;

  /* Spacing (dense dashboard scale: 4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;

  /* Radius & elevation */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .18);

  /* Component sizes */
  --size-control: 40px;     /* buttons, inputs */
  --size-control-sm: 32px;  /* dense desktop only, grows to touch size on touch screens */
  --size-control-lg: 52px;
  --size-touch: 44px;
  --size-sidebar: 240px;
  --size-header: 72px;
  --size-content-max: 1680px;

  /* Motion */
  --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 320ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --transition-fast: var(--duration-fast) ease;
  --transition-base: var(--duration-base) var(--ease-standard);

  /* Layers */
  --z-sticky: 20; --z-guide: 40; --z-drawer: 60; --z-search: 80; --z-toast: 100; --z-tour: 90;

  /* Breakpoints (reference for media queries; CSS vars cannot be used inside @media):
     sm 430 · md 720 · lg 1024 · xl 1280 · 2xl 1800 */
}