/* ==========================================================================
   Curo design tokens · v0.2 — the single source of truth
   Light values live on :root. Dark values apply with [data-theme="dark"],
   or automatically when the OS prefers dark and no data-theme="light" is set.
   Tailwind v4: @import this file; the @theme inline block at the bottom
   exposes the tokens as utilities (bg-surface, text-muted, border-hairline…).
   ========================================================================== */

/* ---- Theme-free tokens ------------------------------------------------- */
:root {
  /* Type · 14px base */
  --curo-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --curo-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 12px;   --lh-xs: 16px;
  --fs-sm: 13px;   --lh-sm: 20px;
  --fs-base: 14px; --lh-base: 20px;
  --fs-md: 16px;   --lh-md: 24px;
  --fs-lg: 20px;   --lh-lg: 28px;
  --fs-xl: 24px;   --lh-xl: 32px;
  --fs-2xl: 32px;  --lh-2xl: 40px;

  /* Spacing · 8px grid (4 is the half-step) */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Motion */
  --dur-fast: 150ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

/* ---- Light (default) --------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg: #F7F7F5;
  --surface: #FFFFFF;
  --surface-2: #F2F2EF;
  --surface-3: #E8E8E4;
  --overlay: rgba(23, 23, 26, 0.32);

  /* Lines */
  --border: #E4E4E0;
  --border-strong: #CFCFCA;

  /* Text */
  --text: #17171A;
  --text-2: #4F4F56;
  --text-3: #6B6B72;

  /* Accent · Curo Green #00DB78 (dark text on fills; --accent-text is the AA-safe text shade) */
  --accent: #00DB78;
  --accent-hover: #00C46B;
  --accent-fg: #05140D;
  --accent-soft: #DDF9EA;
  --accent-text: #00663A;
  --accent-ring: rgba(0, 219, 120, 0.35);
  --highlight: rgba(0, 219, 120, 0.14);

  /* Status */
  --warning: #8A5300;
  --warning-soft: #FDF3DC;
  --danger: #B42318;
  --danger-soft: #FCEBE9;
  --info: #1E5BB8;
  --info-soft: #E9F0FB;

  /* Inverse (toasts, tooltips) */
  --inverse-bg: #17171A;
  --inverse-fg: #F7F7F5;
  --inverse-accent: #00DB78;

  /* People (avatar tints) */
  --avatar-1-bg: #DCE8F7; --avatar-1-fg: #1B3F73;
  --avatar-2-bg: #F6E2D3; --avatar-2-fg: #6E3510;
  --avatar-3-bg: #E4DEF5; --avatar-3-fg: #3F2E7A;

  /* Count pill inside a filled button */
  --pill-bg: rgba(255, 255, 255, 0.22);

  --shadow-pop: 0 1px 2px rgba(23, 23, 26, 0.06), 0 8px 24px rgba(23, 23, 26, 0.08);
}

/* ---- Dark: explicit ---------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0D0E10;
  --surface: #141518;
  --surface-2: #1B1C20;
  --surface-3: #25272C;
  --overlay: rgba(0, 0, 0, 0.56);

  --border: #25272C;
  --border-strong: #373A41;

  --text: #EDEDEF;
  --text-2: #B0B1B8;
  --text-3: #8C8E96;

  --accent: #00DB78;
  --accent-hover: #2EE891;
  --accent-fg: #05140D;
  --accent-soft: #0B2A1C;
  --accent-text: #3DE896;
  --accent-ring: rgba(0, 219, 120, 0.32);
  --highlight: rgba(0, 219, 120, 0.14);

  --warning: #F0C36A;
  --warning-soft: #2A2112;
  --danger: #FF8B80;
  --danger-soft: #2D1614;
  --info: #8DB4FF;
  --info-soft: #14203A;

  --inverse-bg: #EDEDEF;
  --inverse-fg: #141518;
  --inverse-accent: #175A42;

  --avatar-1-bg: #1D2C44; --avatar-1-fg: #A9C7F2;
  --avatar-2-bg: #3A2516; --avatar-2-fg: #F2C3A0;
  --avatar-3-bg: #2A2342; --avatar-3-fg: #C9BCF5;

  --pill-bg: rgba(0, 0, 0, 0.18);

  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ---- Dark: follow the OS unless light is forced ------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0D0E10;
    --surface: #141518;
    --surface-2: #1B1C20;
    --surface-3: #25272C;
    --overlay: rgba(0, 0, 0, 0.56);

    --border: #25272C;
    --border-strong: #373A41;

    --text: #EDEDEF;
    --text-2: #B0B1B8;
    --text-3: #8C8E96;

    --accent: #00DB78;
    --accent-hover: #2EE891;
    --accent-fg: #05140D;
    --accent-soft: #0B2A1C;
    --accent-text: #3DE896;
    --accent-ring: rgba(0, 219, 120, 0.32);
    --highlight: rgba(0, 219, 120, 0.14);

    --warning: #F0C36A;
    --warning-soft: #2A2112;
    --danger: #FF8B80;
    --danger-soft: #2D1614;
    --info: #8DB4FF;
    --info-soft: #14203A;

    --inverse-bg: #EDEDEF;
    --inverse-fg: #141518;
    --inverse-accent: #175A42;

    --avatar-1-bg: #1D2C44; --avatar-1-fg: #A9C7F2;
    --avatar-2-bg: #3A2516; --avatar-2-fg: #F2C3A0;
    --avatar-3-bg: #2A2342; --avatar-3-fg: #C9BCF5;

    --pill-bg: rgba(0, 0, 0, 0.18);

    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 32px rgba(0, 0, 0, 0.5);
  }
}

/* ---- Tailwind v4 bridge (ignored by browsers, read by @tailwindcss) ---- */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-2: var(--surface-2);
  --color-surface-3: var(--surface-3);
  --color-overlay: var(--overlay);
  --color-hairline: var(--border);
  --color-hairline-strong: var(--border-strong);
  --color-fg: var(--text);
  --color-fg-2: var(--text-2);
  --color-muted: var(--text-3);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-fg: var(--accent-fg);
  --color-accent-soft: var(--accent-soft);
  --color-accent-text: var(--accent-text);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-danger: var(--danger);
  --color-danger-soft: var(--danger-soft);
  --color-info: var(--info);
  --color-info-soft: var(--info-soft);
  --color-inverse: var(--inverse-bg);
  --color-inverse-fg: var(--inverse-fg);
  --font-sans: var(--curo-font);
  --font-mono: var(--curo-mono);
  --text-xs: 12px;  --text-xs--line-height: 16px;
  --text-sm: 13px;  --text-sm--line-height: 20px;
  --text-base: 14px; --text-base--line-height: 20px;
  --text-md: 16px;  --text-md--line-height: 24px;
  --text-lg: 20px;  --text-lg--line-height: 28px;
  --text-xl: 24px;  --text-xl--line-height: 32px;
  --text-2xl: 32px; --text-2xl--line-height: 40px;
  --spacing: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --shadow-pop: var(--shadow-pop);
  --ease-curo: cubic-bezier(0.2, 0.8, 0.2, 1);
}