/* GAGENCY design tokens («Liquid glass») — the only place colours, type, spacing, radii,
   shadows and motion are defined. Rules live in DESIGN.md. System preference is the default;
   theme.js applies a saved light/dark choice. Explicit data-theme overrides the system. */

:root {
  color-scheme: light dark;

  /* ---- Raw palette: Apple greys, gagency.ae pink, calm jade -------------------------- */
  --white: #ffffff;
  --gray-50: #f5f5f7;
  --gray-100: #ebebf0;
  --gray-200: #d2d2d7;
  --gray-400: #7c7c80;
  --gray-500: #636366;
  --gray-600: #424245;
  --gray-900: #1d1d1f;
  --black: #000000;
  --gray-d850: #1c1c1e;
  --gray-d800: #2c2c2e;
  --gray-d700: #38383a;
  --gray-d500: #8e8e93;
  --gray-d400: #98989d;
  --gray-d300: #d1d1d6;
  --gray-d50: #f5f5f7;
  --pink-500: #fe347e;
  --pink-550: #e0156a;
  --pink-600: #c8105a;
  --pink-400: #ff5c93;
  --pink-100: #ffe4ee;
  --pink-900: #3a1426;
  --jade-500: #3cc47c;
  --jade-600: #17733f;
  --jade-300: #7edca3;
  --jade-100: #ddf5e6;
  --jade-900: #12301f;

  /* ---- Semantic pairs ------------------------------------------------------------------ */
  --color-bg-light: var(--gray-50);  --color-bg-dark: var(--black);
  --color-bg-2-light: var(--gray-100);  --color-bg-2-dark: var(--gray-d850);
  --color-card-light: var(--white);  --color-card-dark: var(--gray-d850);
  --color-line-light: var(--gray-200);  --color-line-dark: var(--gray-d700);
  --color-line-strong-light: var(--gray-400);  --color-line-strong-dark: var(--gray-d500);
  --color-text-light: var(--gray-900);  --color-text-dark: var(--gray-d50);
  --color-text-2-light: var(--gray-600);  --color-text-2-dark: var(--gray-d300);
  --color-muted-light: var(--gray-500);  --color-muted-dark: var(--gray-d400);
  --color-display-light: var(--gray-900);  --color-display-dark: var(--gray-d50);
  --color-primary-light: var(--pink-550);  --color-primary-dark: var(--pink-550);
  --color-primary-strong-light: var(--pink-600);  --color-primary-strong-dark: var(--pink-600);
  --color-on-primary-light: var(--white);  --color-on-primary-dark: var(--white);
  --color-accent-light: var(--pink-600);  --color-accent-dark: var(--pink-400);
  --color-accent-strong-light: var(--pink-550);  --color-accent-strong-dark: var(--pink-500);
  --color-accent-soft-light: var(--pink-100);  --color-accent-soft-dark: var(--pink-900);
  --color-brand-light: var(--pink-500);  --color-brand-dark: var(--pink-500);
  --color-on-brand-light: var(--black);  --color-on-brand-dark: var(--black);
  --color-green-light: var(--jade-600);  --color-green-dark: var(--jade-300);
  --color-green-soft-light: var(--jade-100);  --color-green-soft-dark: var(--jade-900);
  --color-glass-light: #ffffffa6;  --color-glass-dark: #2c2c2e8c;
  --color-glass-strong-light: #ffffffd9;  --color-glass-strong-dark: #2c2c2ecc;
  --color-glass-rim-light: #ffffffcc;  --color-glass-rim-dark: #ffffff2e;
  --color-glass-edge-light: #0000000f;  --color-glass-edge-dark: #ffffff1a;
  --color-ambient-1-light: #fe347e33;  --color-ambient-1-dark: #fe347e40;
  --color-ambient-2-light: #3cc47c2e;  --color-ambient-2-dark: #3cc47c33;
  --color-ink-surface-light: var(--gray-900);  --color-ink-surface-dark: var(--gray-d850);
  --color-on-ink-light: var(--white);  --color-on-ink-dark: var(--gray-d50);
  --color-on-ink-accent-light: var(--pink-400);  --color-on-ink-accent-dark: var(--pink-400);
  --color-band-light: var(--gray-900);  --color-band-dark: var(--gray-d50);
  --color-on-band-light: var(--white);  --color-on-band-dark: var(--gray-900);
  --color-band-display-light: var(--jade-300);  --color-band-display-dark: var(--jade-600);
  --color-band-accent-light: var(--pink-400);  --color-band-accent-dark: var(--pink-600);
  --color-band-muted-light: var(--gray-d400);  --color-band-muted-dark: var(--gray-500);
  --color-band-line-light: var(--gray-d700);  --color-band-line-dark: var(--gray-200);
  --color-focus-light: var(--pink-600);  --color-focus-dark: var(--pink-400);
  --color-success-light: var(--jade-600);  --color-success-dark: var(--jade-300);
  --color-success-soft-light: var(--jade-100);  --color-success-soft-dark: var(--jade-900);
  --color-warning-light: #87570f;  --color-warning-dark: #e3b96c;
  --color-warning-soft-light: #f5e9d2;  --color-warning-soft-dark: #33281a;
  --color-danger-light: #b3261e;  --color-danger-dark: #ff8a80;
  --color-danger-soft-light: #fbe4e2;  --color-danger-soft-dark: #3b1a17;
  --color-on-danger-light: var(--white);  --color-on-danger-dark: var(--black);
  --color-info-light: #2c5e6d;  --color-info-dark: #90c3d0;
  --color-info-soft-light: #e0ecee;  --color-info-soft-dark: #1d2b2f;
  --shadow-1-light: 0 1px 3px #0000001f, 0 1px 1px #0000000a;  --shadow-1-dark: 0 1px 3px #00000080;
  --shadow-card-light: 0 1px 2px #0000000a, 0 8px 24px -12px #0000001f;  --shadow-card-dark: 0 0 0 1px #ffffff12, 0 8px 24px -12px #00000099;
  --shadow-glass-light: inset 0 1px 0 #ffffffcc, inset 0 0 0 1px #ffffff59, 0 0 0 1px #0000000d, 0 12px 40px -12px #00000033;  --shadow-glass-dark: inset 0 1px 0 #ffffff2e, inset 0 0 0 1px #ffffff14, 0 12px 40px -12px #000000cc;
  --shadow-pop-light: inset 0 1px 0 #ffffffcc, 0 0 0 1px #00000014, 0 24px 60px -16px #00000047;  --shadow-pop-dark: inset 0 1px 0 #ffffff2e, 0 0 0 1px #ffffff1a, 0 24px 60px -16px #000000e6;

  /* ---- Resolved tokens (light) — use these in components ------------------------------- */
  --color-bg: var(--color-bg-light);
  --color-bg-2: var(--color-bg-2-light);
  --color-card: var(--color-card-light);
  --color-line: var(--color-line-light);
  --color-line-strong: var(--color-line-strong-light);
  --color-text: var(--color-text-light);
  --color-text-2: var(--color-text-2-light);
  --color-muted: var(--color-muted-light);
  --color-display: var(--color-display-light);
  --color-primary: var(--color-primary-light);
  --color-primary-strong: var(--color-primary-strong-light);
  --color-on-primary: var(--color-on-primary-light);
  --color-accent: var(--color-accent-light);
  --color-accent-strong: var(--color-accent-strong-light);
  --color-accent-soft: var(--color-accent-soft-light);
  --color-brand: var(--color-brand-light);
  --color-on-brand: var(--color-on-brand-light);
  --color-green: var(--color-green-light);
  --color-green-soft: var(--color-green-soft-light);
  --color-glass: var(--color-glass-light);
  --color-glass-strong: var(--color-glass-strong-light);
  --color-glass-rim: var(--color-glass-rim-light);
  --color-glass-edge: var(--color-glass-edge-light);
  --color-ambient-1: var(--color-ambient-1-light);
  --color-ambient-2: var(--color-ambient-2-light);
  --color-ink-surface: var(--color-ink-surface-light);
  --color-on-ink: var(--color-on-ink-light);
  --color-on-ink-accent: var(--color-on-ink-accent-light);
  --color-band: var(--color-band-light);
  --color-on-band: var(--color-on-band-light);
  --color-band-display: var(--color-band-display-light);
  --color-band-accent: var(--color-band-accent-light);
  --color-band-muted: var(--color-band-muted-light);
  --color-band-line: var(--color-band-line-light);
  --color-focus: var(--color-focus-light);
  --color-success: var(--color-success-light);
  --color-success-soft: var(--color-success-soft-light);
  --color-warning: var(--color-warning-light);
  --color-warning-soft: var(--color-warning-soft-light);
  --color-danger: var(--color-danger-light);
  --color-danger-soft: var(--color-danger-soft-light);
  --color-on-danger: var(--color-on-danger-light);
  --color-info: var(--color-info-light);
  --color-info-soft: var(--color-info-soft-light);
  --shadow-1: var(--shadow-1-light);
  --shadow-card: var(--shadow-card-light);
  --shadow-glass: var(--shadow-glass-light);
  --shadow-pop: var(--shadow-pop-light);
  --shadow-2: var(--shadow-pop);

  /* ---- Typography --------------------------------------------------------------------- */
  --font-display: "Zaychik", "Onest", system-ui, sans-serif;  /* Wordmark and the landing headline only. */
  --font-sans: "Onest", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: var(--font-sans);  /* Legacy alias: headings are Onest 700 now. */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-caption: 0.8125rem;  /* 13px. Captions, footnotes. */
  --fs-0: 0.875rem;  /* 14px. Labels, kickers, badges, table text, small buttons, CRM rows. */
  --fs-1: 1rem;  /* 16px. Body, buttons. */
  --fs-2: 1.125rem;  /* 18px. h3. */
  --fs-lede: 1.25rem;  /* 20px. Ledes. */
  --fs-3: 1.5rem;  /* 24px. Form section titles, landing service titles. */
  --fs-4: 2rem;  /* 32px. h2; KPI figures. */
  --fs-5: 2.75rem;  /* 44px. h1; display on phones. */
  --fs-6: 4rem;  /* 64px. Display. */
  --fs-7: 6rem;  /* 96px. Landing hero headline (Zaychik), scaled down with clamp(). */
  --lh-display: 1;  /* Display and landing headline. */
  --lh-heading: 1.15;  /* h1, h2, section titles. */
  --lh-snug: 1.35;  /* h3, labels, kickers. */
  --lh-text: 1.5;  /* Ledes, captions, small text. */
  --lh-body: 1.6;  /* Running text. */
  --tracking-display: 0;  /* Zaychik is set as drawn. */
  --tracking-heading: -0.02em;  /* Onest 700 headings, iOS-tight. */
  --tracking-kicker: 0;  /* Kickers: sentence case, no tracking. */
  --tracking-tight: var(--tracking-heading);
  --tracking-caps: var(--tracking-kicker);

  /* ---- Space, radii, sizes ------------------------------------------------------------- */
  --space-1: 0.25rem;  /* 4px. Kicker to heading, badge internals, tight inline gaps. */
  --space-2: 0.5rem;  /* 8px. Label to control, icon gaps, tight stacks. */
  --space-3: 0.75rem;  /* 12px. Alert and checklist padding, table cell inline padding, button groups. */
  --space-4: 1rem;  /* 16px. Between fields, container gutter on phones, default stack. */
  --space-5: 1.5rem;  /* 24px. Card padding on phones; between questionnaire sections. */
  --space-6: 2rem;  /* 32px. Card padding on desktop; between page blocks. */
  --space-7: 3rem;  /* 48px. Between major blocks; landing column gap. */
  --space-8: 4rem;  /* 64px. Landing section padding on phones. */
  --space-9: 6rem;  /* 96px. Landing section padding on desktop. */
  --radius-xs: 6px;  /* Registry chips, checklist marks. */
  --radius-sm: 6px;  /* Legacy alias of xs. */
  --radius-control: 14px;  /* Inputs, alerts, menus. */
  --radius-card: 24px;  /* Cards, form sections, glass tiles, side notes. */
  --radius-sheet: 32px;  /* Large glass sheets: inset lists, the contrast and contact sheets. */
  --radius-round: 999px;  /* Capsules: buttons, badges, segmented controls, markers. */
  --radius-pill: var(--radius-round);
  --measure-form: 44rem;  /* 704px. Questionnaires and forms (.container--form). */
  --measure-wide: 76rem;  /* 1216px. Pages, dashboards and the landing (.container). */
  --measure-prose: 66ch;  /* Running text never wider. */
  --control-height: 2.75rem;  /* 44px. Buttons, inputs and choice rows on public pages — the tap target. */
  --control-height-sm: 2.25rem;  /* 36px. Small buttons and CRM row actions. */
  --control-height-lg: 3.25rem;  /* 52px. Landing capsule buttons. */
  --backdrop-glass: blur(24px) saturate(180%);  /* Header, inset lists, facts, contact. */
  --backdrop-glass-strong: blur(40px) saturate(200%);  /* Floating chrome: the mobile action bar. */

  /* ---- Motion (opacity only, see DESIGN.md) ------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 220ms;

  accent-color: var(--color-accent);
}

/* Dark: system preference (unless the page pins light) or explicit data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--color-bg-dark);
    --color-bg-2: var(--color-bg-2-dark);
    --color-card: var(--color-card-dark);
    --color-line: var(--color-line-dark);
    --color-line-strong: var(--color-line-strong-dark);
    --color-text: var(--color-text-dark);
    --color-text-2: var(--color-text-2-dark);
    --color-muted: var(--color-muted-dark);
    --color-display: var(--color-display-dark);
    --color-primary: var(--color-primary-dark);
    --color-primary-strong: var(--color-primary-strong-dark);
    --color-on-primary: var(--color-on-primary-dark);
    --color-accent: var(--color-accent-dark);
    --color-accent-strong: var(--color-accent-strong-dark);
    --color-accent-soft: var(--color-accent-soft-dark);
    --color-brand: var(--color-brand-dark);
    --color-on-brand: var(--color-on-brand-dark);
    --color-green: var(--color-green-dark);
    --color-green-soft: var(--color-green-soft-dark);
    --color-glass: var(--color-glass-dark);
    --color-glass-strong: var(--color-glass-strong-dark);
    --color-glass-rim: var(--color-glass-rim-dark);
    --color-glass-edge: var(--color-glass-edge-dark);
    --color-ambient-1: var(--color-ambient-1-dark);
    --color-ambient-2: var(--color-ambient-2-dark);
    --color-ink-surface: var(--color-ink-surface-dark);
    --color-on-ink: var(--color-on-ink-dark);
    --color-on-ink-accent: var(--color-on-ink-accent-dark);
    --color-band: var(--color-band-dark);
    --color-on-band: var(--color-on-band-dark);
    --color-band-display: var(--color-band-display-dark);
    --color-band-accent: var(--color-band-accent-dark);
    --color-band-muted: var(--color-band-muted-dark);
    --color-band-line: var(--color-band-line-dark);
    --color-focus: var(--color-focus-dark);
    --color-success: var(--color-success-dark);
    --color-success-soft: var(--color-success-soft-dark);
    --color-warning: var(--color-warning-dark);
    --color-warning-soft: var(--color-warning-soft-dark);
    --color-danger: var(--color-danger-dark);
    --color-danger-soft: var(--color-danger-soft-dark);
    --color-on-danger: var(--color-on-danger-dark);
    --color-info: var(--color-info-dark);
    --color-info-soft: var(--color-info-soft-dark);
    --shadow-1: var(--shadow-1-dark);
    --shadow-card: var(--shadow-card-dark);
    --shadow-glass: var(--shadow-glass-dark);
    --shadow-pop: var(--shadow-pop-dark);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--color-bg-dark);
  --color-bg-2: var(--color-bg-2-dark);
  --color-card: var(--color-card-dark);
  --color-line: var(--color-line-dark);
  --color-line-strong: var(--color-line-strong-dark);
  --color-text: var(--color-text-dark);
  --color-text-2: var(--color-text-2-dark);
  --color-muted: var(--color-muted-dark);
  --color-display: var(--color-display-dark);
  --color-primary: var(--color-primary-dark);
  --color-primary-strong: var(--color-primary-strong-dark);
  --color-on-primary: var(--color-on-primary-dark);
  --color-accent: var(--color-accent-dark);
  --color-accent-strong: var(--color-accent-strong-dark);
  --color-accent-soft: var(--color-accent-soft-dark);
  --color-brand: var(--color-brand-dark);
  --color-on-brand: var(--color-on-brand-dark);
  --color-green: var(--color-green-dark);
  --color-green-soft: var(--color-green-soft-dark);
  --color-glass: var(--color-glass-dark);
  --color-glass-strong: var(--color-glass-strong-dark);
  --color-glass-rim: var(--color-glass-rim-dark);
  --color-glass-edge: var(--color-glass-edge-dark);
  --color-ambient-1: var(--color-ambient-1-dark);
  --color-ambient-2: var(--color-ambient-2-dark);
  --color-ink-surface: var(--color-ink-surface-dark);
  --color-on-ink: var(--color-on-ink-dark);
  --color-on-ink-accent: var(--color-on-ink-accent-dark);
  --color-band: var(--color-band-dark);
  --color-on-band: var(--color-on-band-dark);
  --color-band-display: var(--color-band-display-dark);
  --color-band-accent: var(--color-band-accent-dark);
  --color-band-muted: var(--color-band-muted-dark);
  --color-band-line: var(--color-band-line-dark);
  --color-focus: var(--color-focus-dark);
  --color-success: var(--color-success-dark);
  --color-success-soft: var(--color-success-soft-dark);
  --color-warning: var(--color-warning-dark);
  --color-warning-soft: var(--color-warning-soft-dark);
  --color-danger: var(--color-danger-dark);
  --color-danger-soft: var(--color-danger-soft-dark);
  --color-on-danger: var(--color-on-danger-dark);
  --color-info: var(--color-info-dark);
  --color-info-soft: var(--color-info-soft-dark);
  --shadow-1: var(--shadow-1-dark);
  --shadow-card: var(--shadow-card-dark);
  --shadow-glass: var(--shadow-glass-dark);
  --shadow-pop: var(--shadow-pop-dark);
}

:root[data-theme="light"] {
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
  }
}