/*
 * Zapzei design tokens, light theme (round 1): the `:root` block of
 * docs/design/tokens-spec.md, copied 1:1. Never edit a value here; change the
 * spec (and its divergence log) and copy it again.
 */
:root {
  /* Color. Light theme only (round 1). */

  /* Raw scales: neutral */
  --neutral-0: #ffffff;
  --neutral-25: #fbfaf7;
  --neutral-50: #f5f3ee;
  --neutral-100: #ece9e2;
  --neutral-200: #dedad1;
  --neutral-300: #c6c1b6;
  --neutral-450: #8a857a;
  --neutral-500: #716b60;
  --neutral-600: #57524a;
  --neutral-700: #3f3b35;
  --neutral-800: #2b2824;
  --neutral-900: #1c1a17;

  /* Raw scales: brasa (brand) */
  --brasa-50: #fff3ec;
  --brasa-100: #ffe2d1;
  --brasa-200: #ffc3a1;
  --brasa-400: #ff8a4c;
  --brasa-500: #ff6a2b;
  --brasa-600: #e8520f;
  --brasa-650: #cf460b;
  --brasa-700: #b83f08;
  --brasa-800: #8a2f06;

  /* Raw scales: sol (accent) */
  --sol-100: #fff4d1;
  --sol-400: #ffc23d;

  /* Surfaces */
  --surface-page: var(--neutral-25);
  --surface: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-table-head: var(--brasa-650);
  --surface-hover: var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-next: var(--brasa-50);
  --surface-brand-soft: var(--brasa-100);
  --surface-celebrate: var(--sol-100);

  /* Overlays */
  --overlay-scrim: rgba(28, 26, 23, 0.44);
  --overlay-ink-soft: rgba(28, 26, 23, 0.12);

  /* Borders and rings */
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-control: var(--neutral-450);
  --ring-next: var(--brasa-400);
  --focus-ring: var(--neutral-900);

  /* Text */
  --text: var(--neutral-900);
  --text-muted: var(--neutral-600);
  --text-subtle: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-brand: var(--brasa-700);
  --text-on-brand: var(--neutral-0);
  --text-accent-inverse: var(--brasa-400);

  /* Actions */
  --action-primary: var(--brasa-650);
  --action-primary-hover: var(--brasa-700);
  --action-disabled: var(--neutral-100);

  /* Contact status */
  --status-pending-fg: var(--neutral-600);
  --status-pending-bg: var(--neutral-50);
  --status-pending-border: var(--neutral-300);
  --status-sent-fg: #0b6b5c;
  --status-sent-bg: #e3f3ef;
  --status-sent-border: #9fd4c7;
  --status-sent-fill: #14917c;
  --status-skipped-fg: #5b4fa0;
  --status-skipped-bg: #efedf8;
  --status-skipped-border: #c9c3e8;
  --status-skipped-fill: #8a7fd0;
  --status-invalid-fg: #b42318;
  --status-invalid-bg: #fdecea;
  --status-invalid-border: #f4b4ad;
  --status-duplicate-fg: #1b5bb8;
  --status-duplicate-bg: #e9f0fc;
  --status-duplicate-border: #b3cbf1;

  /* Semantic families */
  --info-fg: var(--status-duplicate-fg);
  --info-bg: var(--status-duplicate-bg);
  --info-border: var(--status-duplicate-border);
  --success-fg: var(--status-sent-fg);
  --success-bg: var(--status-sent-bg);
  --success-border: var(--status-sent-border);
  --warning-fg: #8f5200;
  --warning-bg: #fff3d6;
  --warning-border: #f3cf7f;
  --danger-fg: var(--status-invalid-fg);
  --danger-bg: var(--status-invalid-bg);
  --danger-border: var(--status-invalid-border);

  /* Type */
  --font-sans: Figtree, "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Font weight */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

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

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 26, 23, 0.08), 0 1px 2px rgba(28, 26, 23, 0.04);
  --shadow-md: 0 6px 16px rgba(28, 26, 23, 0.08), 0 2px 4px rgba(28, 26, 23, 0.04);
  --shadow-lg: 0 20px 48px rgba(28, 26, 23, 0.16), 0 4px 12px rgba(28, 26, 23, 0.06);

  /* Size */
  --size-row: 48px;
  --size-control-sm: 32px;
  --size-button: 34px;
  --size-control: 40px;
  --size-control-lg: 48px;
  --size-send: 120px;
  --size-header: 64px;
  --size-content: 1320px;

  /* Z-index */
  --z-sticky: 10;
  --z-header: 20;
  --z-modal: 40;
  --z-toast: 50;
}