/*
 * 1Job design tokens. Source of truth; see docs/design/DESIGN.md.
 * Import by relative path (e.g. `@import '../../../packages/shared/design/tokens.css'`) or copy
 * it verbatim (apps/site and the overlay copy). Colours are the existing product palette
 * (apps/web, apps/extension, apps/admin), unchanged.
 * Theme: follows the OS; <html data-theme="light|dark"> forces one.
 * The dark block appears twice on purpose (media query + attribute). Keep both in sync.
 */

:root {
  color-scheme: light dark;

  /* brand (indigo) */
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --brand-ink: #3730a3; /* text on --brand-soft */
  --brand-soft: #eef0ff;
  --brand-ring: rgba(79, 70, 229, 0.28);
  --on-brand: #ffffff;
  --focus: #4f46e5;

  /* neutrals */
  --bg: #f6f6fa;
  --surface: #ffffff;
  --surface-2: #f2f2f8;
  --surface-3: #e7e7f0;
  --border: #e4e4ee;
  --border-strong: #c9c9d8;
  --control-border: #8a8aa0; /* 3:1 against the surface */
  --text: #15151f;
  --text-2: #444458;
  --muted: #5e5e76;
  --scrim: rgba(15, 15, 30, 0.45);
  --glass: rgba(255, 255, 255, 0.78); /* floating nav, with backdrop-filter */

  /* semantic */
  --success: #15803d;
  --success-soft: #e5f6ec;
  --success-ink: #0f5a2b;
  --warn-soft: #fff3bf;
  --warn-border: #e8b400;
  --warn-ink: #4d3800;
  --danger: #b91c1c;
  --danger-soft: #fdeaea;
  --danger-ink: #8f1414;
  --info: #1d4ed8;
  --info-soft: #e6eeff;
  --info-ink: #1a3ea3;

  /* application statuses: soft pill background, text, dot */
  --st-applied-bg: #e6eeff;
  --st-applied-fg: #1a3ea3;
  --st-applied-dot: #3b63e0;
  --st-in_review-bg: #efe8ff;
  --st-in_review-fg: #5b21b6;
  --st-in_review-dot: #8b5cf6;
  --st-interviewing-bg: #dcf3f8;
  --st-interviewing-fg: #0b5163;
  --st-interviewing-dot: #0891b2;
  --st-offer-bg: #dff6e7;
  --st-offer-fg: #14532d;
  --st-offer-dot: #16a34a;
  --st-accepted-bg: #c6f0d6;
  --st-accepted-fg: #0b4a25;
  --st-accepted-dot: #15803d;
  --st-rejected-bg: #fde5e5;
  --st-rejected-fg: #8c1515;
  --st-rejected-dot: #dc2626;
  --st-ghosted-bg: #ececf2;
  --st-ghosted-fg: #4a4a5e;
  --st-ghosted-dot: #8b8ba2;
  --st-withdrawn-bg: #fdeadb;
  --st-withdrawn-fg: #85380a;
  --st-withdrawn-dot: #ea7c1a;

  /* elevation: 1 resting, 2 floating, 3 overlay */
  --shadow-1: 0 1px 2px rgba(20, 20, 40, 0.04), 0 2px 8px rgba(20, 20, 40, 0.04);
  --shadow-2: 0 2px 4px rgba(20, 20, 40, 0.04), 0 12px 32px -8px rgba(20, 20, 40, 0.12);
  --shadow-3: 0 4px 8px rgba(20, 20, 40, 0.05), 0 28px 64px -16px rgba(20, 20, 40, 0.22);
  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(79, 70, 229, 0.1), transparent 70%);

  /* legacy aliases, so existing rules keep working */
  --accent: var(--brand);
  --accent-text: var(--on-brand);
  --accent-soft: var(--brand-soft);
  --ok: var(--success);
  --warn-bg: var(--warn-soft);
  --warn-text: var(--warn-ink);
  --warn-bar: var(--warn-border);
  --warn-badge-bg: #ffd43b;
  --warn-badge-text: #2e2100;
  --chart: var(--brand);
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow: var(--shadow-3);

  /* spacing: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(64px, 10vw, 128px); /* marketing section rhythm */
  --gutter: clamp(16px, 4vw, 32px);

  /* layout */
  --w-prose: 44rem;
  --w-content: 72rem;
  --w-app: 80rem;
  --nav-h: 56px;

  /* radii */
  --radius-sm: 8px; /* inputs, buttons, chips */
  --radius: 12px; /* list rows, small cards, popovers */
  --radius-lg: 20px; /* cards, tiles, drawer */
  --radius-xl: 28px; /* hero frame, bento cells on marketing */
  --radius-pill: 999px;

  /* type */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px; /* app body */
  --fs-md: 16px; /* marketing body */
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 32px;
  --fs-3xl: clamp(32px, 4.5vw, 44px); /* section heading */
  --fs-display: clamp(40px, 6.5vw, 68px); /* hero only */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --tracking-tight: -0.025em; /* --fs-2xl and up */
  --tracking-caps: 0.08em; /* eyebrow labels */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* motion */
  --dur-1: 120ms; /* hover, press */
  --dur-2: 200ms; /* popover, card lift */
  --dur-3: 320ms; /* drawer, section reveal */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t: var(--dur-1) var(--ease);
  --lift: translateY(-2px);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);
  --z-nav: 50;
  --z-drawer: 100;
  --z-toast: 200;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #818cf8;
    --brand-hover: #98a1fa;
    --brand-ink: #c7cdff;
    --brand-soft: #252850;
    --brand-ring: rgba(129, 140, 248, 0.38);
    --on-brand: #0d0f26;
    --focus: #a5b0ff;

    --bg: #0e0f14;
    --surface: #16171e;
    --surface-2: #1d1f28;
    --surface-3: #282a36;
    --border: #2a2c39;
    --border-strong: #3d4050;
    --control-border: #7a7d96;
    --text: #ececf4;
    --text-2: #c4c6d6;
    --muted: #9ea0b6;
    --scrim: rgba(0, 0, 0, 0.6);
    --glass: rgba(22, 23, 30, 0.78);

    --success: #4ade80;
    --success-soft: #13301f;
    --success-ink: #a6ecbf;
    --warn-soft: #352b06;
    --warn-border: #b38600;
    --warn-ink: #ffe28a;
    --danger: #ff8a8a;
    --danger-soft: #3d1a1a;
    --danger-ink: #ffc2c2;
    --info: #8fb0ff;
    --info-soft: #1b2748;
    --info-ink: #b4c6ff;

    --st-applied-bg: #1f2b54;
    --st-applied-fg: #b4c6ff;
    --st-applied-dot: #6f93ff;
    --st-in_review-bg: #30254f;
    --st-in_review-fg: #d4c2ff;
    --st-in_review-dot: #a78bfa;
    --st-interviewing-bg: #12363f;
    --st-interviewing-fg: #9be3f2;
    --st-interviewing-dot: #22b8d4;
    --st-offer-bg: #143823;
    --st-offer-fg: #a6ecbf;
    --st-offer-dot: #4ade80;
    --st-accepted-bg: #0f4a2a;
    --st-accepted-fg: #bbf7d0;
    --st-accepted-dot: #34d399;
    --st-rejected-bg: #4a1b1b;
    --st-rejected-fg: #ffc2c2;
    --st-rejected-dot: #f87171;
    --st-ghosted-bg: #2b2d38;
    --st-ghosted-fg: #c3c5d4;
    --st-ghosted-dot: #8b8da3;
    --st-withdrawn-bg: #4a2a12;
    --st-withdrawn-fg: #ffd2a6;
    --st-withdrawn-dot: #fb923c;

    /* dark: shadows barely read, so elevation also steps the surface colour */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.35), 0 28px 64px -16px rgba(0, 0, 0, 0.7);
    --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(129, 140, 248, 0.14), transparent 70%);
  }
}

:root[data-theme='dark'] {
  --brand: #818cf8;
  --brand-hover: #98a1fa;
  --brand-ink: #c7cdff;
  --brand-soft: #252850;
  --brand-ring: rgba(129, 140, 248, 0.38);
  --on-brand: #0d0f26;
  --focus: #a5b0ff;

  --bg: #0e0f14;
  --surface: #16171e;
  --surface-2: #1d1f28;
  --surface-3: #282a36;
  --border: #2a2c39;
  --border-strong: #3d4050;
  --control-border: #7a7d96;
  --text: #ececf4;
  --text-2: #c4c6d6;
  --muted: #9ea0b6;
  --scrim: rgba(0, 0, 0, 0.6);
  --glass: rgba(22, 23, 30, 0.78);

  --success: #4ade80;
  --success-soft: #13301f;
  --success-ink: #a6ecbf;
  --warn-soft: #352b06;
  --warn-border: #b38600;
  --warn-ink: #ffe28a;
  --danger: #ff8a8a;
  --danger-soft: #3d1a1a;
  --danger-ink: #ffc2c2;
  --info: #8fb0ff;
  --info-soft: #1b2748;
  --info-ink: #b4c6ff;

  --st-applied-bg: #1f2b54;
  --st-applied-fg: #b4c6ff;
  --st-applied-dot: #6f93ff;
  --st-in_review-bg: #30254f;
  --st-in_review-fg: #d4c2ff;
  --st-in_review-dot: #a78bfa;
  --st-interviewing-bg: #12363f;
  --st-interviewing-fg: #9be3f2;
  --st-interviewing-dot: #22b8d4;
  --st-offer-bg: #143823;
  --st-offer-fg: #a6ecbf;
  --st-offer-dot: #4ade80;
  --st-accepted-bg: #0f4a2a;
  --st-accepted-fg: #bbf7d0;
  --st-accepted-dot: #34d399;
  --st-rejected-bg: #4a1b1b;
  --st-rejected-fg: #ffc2c2;
  --st-rejected-dot: #f87171;
  --st-ghosted-bg: #2b2d38;
  --st-ghosted-fg: #c3c5d4;
  --st-ghosted-dot: #8b8da3;
  --st-withdrawn-bg: #4a2a12;
  --st-withdrawn-fg: #ffd2a6;
  --st-withdrawn-dot: #fb923c;

  /* dark: shadows barely read, so elevation also steps the surface colour */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, 0.35), 0 28px 64px -16px rgba(0, 0, 0, 0.7);
  --hero-glow: radial-gradient(60% 50% at 50% 0%, rgba(129, 140, 248, 0.14), transparent 70%);
}

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