/* Marinedal CMS — design tokens v1.0
   Light is the default; set data-theme="dark" on <html> for dark.
   Direction: set dir="rtl" and lang="ar" on <html>; components use logical properties. */

:root, [data-theme="light"] {
  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-arabic: "Cairo", "Segoe UI", Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --lh-tight: 1.25;
  --lh-base: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* Spacing (8px grid) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 999px;
  /* Sizing */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --row-h: 44px;
  --topbar-h: 56px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  /* Motion */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  /* Brand scales */
  --navy-950: #071A2B;
  --navy-900: #0A2640;
  --navy-800: #0E304D;
  --navy-700: #1B4468;
  --navy-600: #2A5A84;
  --navy-300: #9DB4C9;
  --navy-100: #E8EEF3;
  --navy-50: #F3F6F9;
  --copper-800: #743F24;
  --copper-700: #8C4F30;
  --copper-600: #A9623D;
  --copper-500: #CD825B;
  --copper-300: #E4B79E;
  --copper-100: #F9F0EB;
  --slate-700: #4E4C54;
  --slate-600: #6B6973;
  --slate-500: #8A888F;
  --slate-300: #C4C3C8;
  --slate-100: #EEEEF0;
  /* Surfaces */
  --bg-page: #F5F6F7;
  --bg-surface: #FFFFFF;
  --bg-subtle: #F9FAFB;
  --bg-sunken: #EEF1F4;
  --bg-hover: #F1F4F7;
  --bg-selected: #E8EEF3;
  --bg-overlay: rgba(7, 26, 43, .48);
  --border: #D7DCE1;
  --border-subtle: #E7EAEE;
  --border-strong: #AEB8C2;
  /* Text */
  --text-primary: #14212D;
  --text-secondary: #3F4B57;
  --text-muted: #6B6973;
  --text-disabled: #A3A1A8;
  --text-on-brand: #FFFFFF;
  --text-link: #1B4468;
  /* Actions */
  --action-primary: #A9623D;
  --action-primary-hover: #8C4F30;
  --action-primary-active: #743F24;
  --action-primary-fg: #FFFFFF;
  --action-secondary-fg: #0E304D;
  --action-secondary-border: #0E304D;
  --action-secondary-hover: #E8EEF3;
  --action-danger: #B42318;
  --action-danger-hover: #912018;
  --action-danger-fg: #FFFFFF;
  --brand: #0E304D;
  --brand-subtle: #E8EEF3;
  --accent: #CD825B;
  --accent-subtle: #F9F0EB;
  --focus-ring: #2F7BC0;
  /* Navigation */
  --nav-bg: #0E304D;
  --nav-fg: #C8D4DF;
  --nav-fg-muted: #8FA6BA;
  --nav-hover: #16405F;
  --nav-active-bg: #1D4B70;
  --nav-active-fg: #FFFFFF;
  --nav-icon-active: #E0A080;
  --nav-border: #1C4262;
  /* Status */
  --st-draft-bg: #EEF0F2;
  --st-draft-fg: #48515A;
  --st-pending-bg: #FDF1D6;
  --st-pending-fg: #8A5300;
  --st-approved-bg: #E3ECF5;
  --st-approved-fg: #0E304D;
  --st-partial-bg: #EEEAFB;
  --st-partial-fg: #4F35A1;
  --st-invoiced-bg: #E1F2E8;
  --st-invoiced-fg: #1B6B41;
  --st-cancelled-bg: #FCE9E8;
  --st-cancelled-fg: #A3261B;
  /* Feedback */
  --success: #1B7A48;
  --success-subtle: #E1F2E8;
  --warning: #9A5800;
  --warning-subtle: #FDF1D6;
  --danger: #B42318;
  --danger-subtle: #FCE9E8;
  --info: #2A5A84;
  --info-subtle: #E8EEF3;
  /* Charts */
  --chart-1: #0E304D;
  --chart-2: #CD825B;
  --chart-3: #6D9BC3;
  --chart-4: #8A888F;
  --chart-5: #2E8C7A;
  --chart-grid: #E7EAEE;
  --chart-axis: #6B6973;
  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(14, 48, 77, .06);
  --shadow-sm: 0 1px 3px rgba(14, 48, 77, .08), 0 1px 2px rgba(14, 48, 77, .04);
  --shadow-md: 0 8px 24px rgba(14, 48, 77, .12), 0 2px 6px rgba(14, 48, 77, .06);
  --shadow-lg: 0 20px 48px rgba(14, 48, 77, .18), 0 4px 12px rgba(14, 48, 77, .08);
  --focus-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces */
  --bg-page: #111A22;
  --bg-surface: #192733;
  --bg-subtle: #1C2B38;
  --bg-sunken: #0D151C;
  --bg-hover: #213342;
  --bg-selected: #1F3A52;
  --bg-overlay: rgba(0, 0, 0, .6);
  --border: #344652;
  --border-subtle: #273846;
  --border-strong: #4D6273;
  /* Text */
  --text-primary: #E8EDF2;
  --text-secondary: #C0CCD6;
  --text-muted: #95A3B0;
  --text-disabled: #5E6E7B;
  --text-on-brand: #FFFFFF;
  --text-link: #8DB8E0;
  /* Actions */
  --action-primary: #CD825B;
  --action-primary-hover: #D99773;
  --action-primary-active: #E4AA8B;
  --action-primary-fg: #111A22;
  --action-secondary-fg: #B9D0E6;
  --action-secondary-border: #6E8FAE;
  --action-secondary-hover: #213342;
  --action-danger: #EF6F63;
  --action-danger-hover: #F38A80;
  --action-danger-fg: #111A22;
  --brand: #9CC0E3;
  --brand-subtle: #1F3A52;
  --accent: #CD825B;
  --accent-subtle: #3A2A22;
  --focus-ring: #6FA8DC;
  /* Navigation */
  --nav-bg: #0C141B;
  --nav-fg: #B6C3CF;
  --nav-fg-muted: #7E90A0;
  --nav-hover: #16222C;
  --nav-active-bg: #1C2C3A;
  --nav-active-fg: #FFFFFF;
  --nav-icon-active: #E0A080;
  --nav-border: #1E2A35;
  /* Status */
  --st-draft-bg: #26343F;
  --st-draft-fg: #C3CDD6;
  --st-pending-bg: #3A2E14;
  --st-pending-fg: #F2C46B;
  --st-approved-bg: #1D3550;
  --st-approved-fg: #9CC4EA;
  --st-partial-bg: #2D2750;
  --st-partial-fg: #BDB0F5;
  --st-invoiced-bg: #173A2A;
  --st-invoiced-fg: #7FD3A5;
  --st-cancelled-bg: #43201E;
  --st-cancelled-fg: #F4A29A;
  /* Feedback */
  --success: #5CC98F;
  --success-subtle: #173A2A;
  --warning: #F2B45A;
  --warning-subtle: #3A2E14;
  --danger: #F28B82;
  --danger-subtle: #43201E;
  --info: #8DB8E0;
  --info-subtle: #1F3A52;
  /* Charts */
  --chart-1: #8DB8E0;
  --chart-2: #CD825B;
  --chart-3: #4F7FA8;
  --chart-4: #95A3B0;
  --chart-5: #4FB39F;
  --chart-grid: #273846;
  --chart-axis: #95A3B0;
  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, .55);
}