/* Fareeq AI · Halo design tokens v1.0.0 (2026-10-12)
   Theme follows the OS setting by default (prefers-color-scheme).
   Force a theme with <html data-theme="light"> or <html data-theme="dark">.
   Fonts (SIL OFL 1.1): Alexandria (display), IBM Plex Sans Arabic (body), Geist (Latin). */

:root {
  color-scheme: light dark;

  /* Fonts */
  --fq-font-display: "Alexandria", "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
  --fq-font-body: "IBM Plex Sans Arabic", "Geist", system-ui, sans-serif;
  --fq-font-latin: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --fq-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: size / line-height / weight */
  --fq-text-display: 56px;
  --fq-leading-display: 1.25;
  --fq-weight-display: 500;
  --fq-text-h1: 40px;
  --fq-leading-h1: 1.3;
  --fq-weight-h1: 500;
  --fq-text-h2: 32px;
  --fq-leading-h2: 1.35;
  --fq-weight-h2: 500;
  --fq-text-h3: 24px;
  --fq-leading-h3: 1.4;
  --fq-weight-h3: 500;
  --fq-text-title: 20px;
  --fq-leading-title: 1.5;
  --fq-weight-title: 600;
  --fq-text-body-lg: 18px;
  --fq-leading-body-lg: 1.75;
  --fq-weight-body-lg: 400;
  --fq-text-body: 16px;
  --fq-leading-body: 1.75;
  --fq-weight-body: 400;
  --fq-text-body-sm: 14px;
  --fq-leading-body-sm: 1.6;
  --fq-weight-body-sm: 400;
  --fq-text-caption: 12.5px;
  --fq-leading-caption: 1.5;
  --fq-weight-caption: 500;

  /* Radii */
  --fq-radius-xs: 4px;
  --fq-radius-sm: 6px;
  --fq-radius-md: 10px;
  --fq-radius-lg: 14px;
  --fq-radius-xl: 20px;
  --fq-radius-2xl: 28px;
  --fq-radius-pill: 999px;
  --fq-radius-app-icon: 22.37%;

  /* Spacing (4px base) */
  --fq-space-0: 0px;
  --fq-space-1: 2px;
  --fq-space-2: 4px;
  --fq-space-3: 8px;
  --fq-space-4: 12px;
  --fq-space-5: 16px;
  --fq-space-6: 20px;
  --fq-space-7: 24px;
  --fq-space-8: 32px;
  --fq-space-9: 40px;
  --fq-space-10: 48px;
  --fq-space-11: 64px;
  --fq-space-12: 80px;
  --fq-space-13: 96px;

  /* Motion */
  --fq-duration-fast: 120ms;
  --fq-duration-base: 200ms;
  --fq-duration-slow: 320ms;
  --fq-ease: cubic-bezier(.2, .8, .2, 1);

  /* Light theme colors (default) */
  --fq-bg: #FAFAFC;
  --fq-surface: #FFFFFF;
  --fq-surface2: #F3F4F8;
  --fq-line: #E4E6EE;
  --fq-line-strong: #D2D5E1;
  --fq-text: #0E1020;
  --fq-muted: #4F556B;
  --fq-subtle: #6B7186;
  --fq-accent: #5B57F0;
  --fq-accent-text: #4A45E0;
  --fq-accent-soft: #EEEDFE;
  --fq-on-accent: #FFFFFF;
  --fq-aqua: #0B8F7C;
  --fq-btn: #0E1020;
  --fq-on-btn: #FFFFFF;
  --fq-user: #EEEDFE;
  --fq-user-text: #0E1020;
  --fq-success: #137A4D;
  --fq-warning: #8F5B00;
  --fq-danger: #C2283A;
  --fq-focus: #5B57F0;
  --fq-glow: rgba(91,87,240,.14);
  --fq-shadow-sm: 0 1px 2px rgba(14,16,32,.06);
  --fq-shadow-md: 0 1px 2px rgba(14,16,32,.04), 0 8px 24px -12px rgba(14,16,32,.18);
  --fq-shadow-lg: 0 2px 4px rgba(14,16,32,.04), 0 24px 48px -20px rgba(14,16,32,.28);
}

/* Dark theme: follows the system unless light is forced */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fq-bg: #0A0B10;
    --fq-surface: #111219;
    --fq-surface2: #191B26;
    --fq-line: #252838;
    --fq-line-strong: #34384D;
    --fq-text: #ECEDF3;
    --fq-muted: #9499AE;
    --fq-subtle: #7C8197;
    --fq-accent: #8F8CFF;
    --fq-accent-text: #A6A3FF;
    --fq-accent-soft: #1F1E45;
    --fq-on-accent: #0A0B10;
    --fq-aqua: #5EE6D0;
    --fq-btn: #ECEDF3;
    --fq-on-btn: #0A0B10;
    --fq-user: #191B26;
    --fq-user-text: #ECEDF3;
    --fq-success: #4ED69A;
    --fq-warning: #F3B54A;
    --fq-danger: #FF6B7A;
    --fq-focus: #A6A3FF;
    --fq-glow: rgba(143,140,255,.30);
    --fq-shadow-sm: 0 0 0 1px rgba(255,255,255,.04);
    --fq-shadow-md: 0 0 0 1px rgba(255,255,255,.05), 0 12px 32px -12px rgba(0,0,0,.7);
    --fq-shadow-lg: 0 0 0 1px rgba(255,255,255,.06), 0 32px 64px -24px rgba(0,0,0,.85);
  }
}

/* Explicit overrides */
:root[data-theme="dark"] {
  --fq-bg: #0A0B10;
  --fq-surface: #111219;
  --fq-surface2: #191B26;
  --fq-line: #252838;
  --fq-line-strong: #34384D;
  --fq-text: #ECEDF3;
  --fq-muted: #9499AE;
  --fq-subtle: #7C8197;
  --fq-accent: #8F8CFF;
  --fq-accent-text: #A6A3FF;
  --fq-accent-soft: #1F1E45;
  --fq-on-accent: #0A0B10;
  --fq-aqua: #5EE6D0;
  --fq-btn: #ECEDF3;
  --fq-on-btn: #0A0B10;
  --fq-user: #191B26;
  --fq-user-text: #ECEDF3;
  --fq-success: #4ED69A;
  --fq-warning: #F3B54A;
  --fq-danger: #FF6B7A;
  --fq-focus: #A6A3FF;
  --fq-glow: rgba(143,140,255,.30);
  --fq-shadow-sm: 0 0 0 1px rgba(255,255,255,.04);
  --fq-shadow-md: 0 0 0 1px rgba(255,255,255,.05), 0 12px 32px -12px rgba(0,0,0,.7);
  --fq-shadow-lg: 0 0 0 1px rgba(255,255,255,.06), 0 32px 64px -24px rgba(0,0,0,.85);
}
:root[data-theme="light"] {
  color-scheme: light;
  --fq-bg: #FAFAFC;
  --fq-surface: #FFFFFF;
  --fq-surface2: #F3F4F8;
  --fq-line: #E4E6EE;
  --fq-line-strong: #D2D5E1;
  --fq-text: #0E1020;
  --fq-muted: #4F556B;
  --fq-subtle: #6B7186;
  --fq-accent: #5B57F0;
  --fq-accent-text: #4A45E0;
  --fq-accent-soft: #EEEDFE;
  --fq-on-accent: #FFFFFF;
  --fq-aqua: #0B8F7C;
  --fq-btn: #0E1020;
  --fq-on-btn: #FFFFFF;
  --fq-user: #EEEDFE;
  --fq-user-text: #0E1020;
  --fq-success: #137A4D;
  --fq-warning: #8F5B00;
  --fq-danger: #C2283A;
  --fq-focus: #5B57F0;
  --fq-glow: rgba(91,87,240,.14);
  --fq-shadow-sm: 0 1px 2px rgba(14,16,32,.06);
  --fq-shadow-md: 0 1px 2px rgba(14,16,32,.04), 0 8px 24px -12px rgba(14,16,32,.18);
  --fq-shadow-lg: 0 2px 4px rgba(14,16,32,.04), 0 24px 48px -20px rgba(14,16,32,.28);
}

/* Base usage */
html { background: var(--fq-bg); color: var(--fq-text); }
body { font-family: var(--fq-font-body); font-size: var(--fq-text-body); line-height: var(--fq-leading-body); }
:lang(en) { font-family: var(--fq-font-latin); }
h1, h2, h3, .fq-display { font-family: var(--fq-font-display); font-weight: 500; }
:focus-visible { outline: 2px solid var(--fq-focus); outline-offset: 2px; }