/* Design tokens — Auditus / Claude theme. See CLAUDE.md §2. */
:root {
  /* Brand — Claude coral / clay */
  --clay-600: #BD5D3A;
  --clay-500: #D97757;
  --clay-400: #E08E72;
  --clay-100: #F5E4DC;

  /* Canvas — cream / ivory */
  --cream-bg: #F0EEE6;
  --paper:    #FAF9F5;
  --white:    #FFFFFF;

  /* Ink — slate */
  --ink-900: #1F1E1D;
  --ink-700: #3D3D3A;
  --ink-500: #6B6B68;
  --ink-300: #9A9A95;

  /* Lines */
  --border: #E5E3DB;
  --border-strong: #D6D3C8;

  /* Semantic */
  --win:   #5B8C6E;
  --watch: #C9A24B;
  --risk:  #C0563F;
  --info:  #5B7A99;

  /* On-color text — accessible foregrounds for solid/tinted fills (WCAG AA) */
  --on-accent:   #FFFFFF;   /* text on clay / win / risk / info solids */
  --watch-ink:   #8C6F29;   /* amber text on light/cream — passes AA where --watch would not */
  --watch-ink-strong: #2C2410; /* text on solid --watch fills */
  --ink-850:     #2A2725;   /* deep panel gradient stop (between ink-900 and paper) */

  /* Decorative — window-chrome dots in product-preview mockups */
  --chrome-red:   #E8836B;
  --chrome-amber: #E3B341;
  --chrome-green: #6FAE7E;

  /* Win-score */
  --score-hot: #5B8C6E;
  --score-mid: #C9A24B;
  --score-low: #C0563F;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(31,30,29,.06);
  --shadow-md: 0 4px 16px rgba(31,30,29,.08);
  --shadow-lg: 0 12px 40px rgba(31,30,29,.12);

  /* Geometry */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --space: 8px;

  /* Type */
  --font-display: "Lora", "Tiempos", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ar-ui: "IBM Plex Sans Arabic", "Noto Naskh Arabic", system-ui, sans-serif;
  --font-ar-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif;
}

[data-theme="dark"] {
  --cream-bg: #1F1E1D;
  --paper:    #2A2826;
  --white:    #34312E;
  --ink-900:  #F0EEE6;
  --ink-700:  #DAD7CE;
  --ink-500:  #A8A59C;
  --ink-300:  #6B6864;
  --border:   #3A3835;
  --border-strong: #4A4744;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.55);
}

html[lang="ar"] body { font-family: var(--font-ar-ui); }
html[lang="ar"] .hero__title,
html[lang="ar"] .h2 { font-family: var(--font-ar-display); }