:root {
  --cyan: #00A8B4;
  --cyan-dark: #008A94;
  --cyan-light: #33C0CC;
  --cyan-glow: rgba(0, 168, 180, 0.28);
  --copper: #E48418;
  --copper-dark: #C46E10;
  --copper-light: #F0A040;
  --navy: #0C3054;
  --navy-mid: #143D68;
  --navy-dark: #061828;
  --navy-deep: #002448;
  --black: #0A0A0A;
  --ink: #111418;
  --charcoal: #1A1F26;
  --slate: #3A4654;
  --muted: #5A6B7A;
  --silver: #B8C5CE;
  --smoke: #E8ECF0;
  --fog: #F2F4F6;
  --white: #FFFFFF;
  --success: #1A9E6E;
  --warning: #D4A017;
  --error: #C4453A;
  --info: #00A8B4;
  --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--copper) 100%);
  --grad-hero: linear-gradient(165deg, var(--black) 0%, var(--navy-dark) 42%, var(--navy) 100%);
  --grad-surface: linear-gradient(180deg, var(--fog) 0%, var(--smoke) 100%);
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --radius: 4px;
  --radius-lg: 12px;
  --shadow: 0 12px 40px rgba(6, 24, 40, 0.08);

  /* POS default stays navy-dark; night mode goes true black */
  --bg: var(--navy-dark);
  --surface: var(--navy);
  --surface-2: var(--navy-mid);
  --surface-muted: var(--navy-deep);
  --text: var(--silver);
  --text-muted: var(--muted);
  --border: rgba(0, 168, 180, 0.35);
  --shell-bg: var(--black);
  --shell-text: var(--silver);
  --shell-border: rgba(0, 168, 180, 0.35);
  --input-bg: var(--navy);
  --input-border: var(--slate);
  --table-head-bg: var(--navy-deep);
  --table-row-hover: rgba(0, 168, 180, 0.1);
  --overlay: rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] {
  --bg: #050506;
  --surface: #10141A;
  --surface-2: #14181D;
  --surface-muted: #0A0A0A;
  --text: #E8ECF0;
  --text-muted: #93A2B0;
  --border: rgba(184, 197, 206, 0.16);
  --shell-bg: #000000;
  --shell-text: #C8D2DA;
  --shell-border: rgba(0, 168, 180, 0.4);
  --input-bg: #14181D;
  --input-border: #3A4654;
  --navy-dark: #050506;
  --navy: #10141A;
  --navy-mid: #14181D;
  --silver: #E8ECF0;
  --muted: #93A2B0;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

html[lang="ar"] {
  --font-display: "Cairo", "Montserrat", system-ui, sans-serif;
  --font-body: "Cairo", "Montserrat", system-ui, sans-serif;
}