/*
  Pocketwire design tokens
  ------------------------------------------------------------------
  One source of truth for colour, type, space, radius, elevation and
  motion. Used by the marketing site (site.css) and by the
  server-rendered dashboard / auth pages (app.css).

  Theme rules
  - Dark is the default.
  - Light applies when the visitor's OS prefers light, unless the page
    is forced dark with <html data-theme="dark">.
  - <html data-theme="light"> or data-theme="dark" always wins.
  Every colour lives here as a custom property; components never
  hard-code colours.
*/

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Brand */
  --pw-spark: #45f0a8;          /* the live "spark" - mint signal green */
  --pw-spark-deep: #10b981;     /* spark on light backgrounds */
  --pw-cyan: #38d9f5;           /* gradient partner */
  --pw-ink: #07090b;
  --pw-paper: #f1f3f5;

  /* Surfaces */
  --bg: #07090b;
  --bg-2: #0a0d10;
  --bg-app: #07090b;            /* dashboard and sign-in pages, behind cards */
  --surface-1: #0e1215;
  --surface-2: #13181c;
  --surface-3: #192026;
  --overlay: rgba(7, 9, 11, 0.72);
  --scrim: rgba(0, 0, 0, 0.55);

  /* Lines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);

  /* Text */
  --text-1: #edf0f3;
  --text-2: #a7b0ba;
  --text-3: #7d8691;
  --text-inverse: #07090b;

  /* Accent */
  --accent: #45f0a8;
  --accent-hover: #6cf5bd;
  --accent-text: #45f0a8;
  --accent-ink: #04130c;
  --accent-soft: rgba(69, 240, 168, 0.11);
  --accent-line: rgba(69, 240, 168, 0.32);
  --accent-glow: rgba(69, 240, 168, 0.34);
  --gradient-spark: linear-gradient(100deg, #8affd1 0%, #45f0a8 45%, #38d9f5 100%);
  --gradient-title: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #b8c1cb 100%);

  /* Agent (the AI side in illustrations) */
  --agent-1: #8b7bff;
  --agent-2: #4f8dff;

  /* Status */
  --ok: #45f0a8;
  --ok-soft: rgba(69, 240, 168, 0.12);
  --ok-line: rgba(69, 240, 168, 0.30);
  --warn: #ffb547;
  --warn-soft: rgba(255, 181, 71, 0.12);
  --warn-line: rgba(255, 181, 71, 0.30);
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, 0.12);
  --danger-line: rgba(255, 107, 107, 0.32);
  --info: #6cb6ff;
  --info-soft: rgba(108, 182, 255, 0.12);
  --info-line: rgba(108, 182, 255, 0.30);
  --neutral: #a7b0ba;
  --neutral-soft: rgba(167, 176, 186, 0.12);
  --neutral-line: rgba(167, 176, 186, 0.26);

  /* Controls */
  --btn-primary-bg: #45f0a8;
  --btn-primary-bg-hover: #6cf5bd;
  --btn-primary-fg: #04130c;
  --btn-primary-shadow: 0 0 0 1px rgba(69, 240, 168, 0.5), 0 10px 30px -10px rgba(69, 240, 168, 0.55);
  --btn-secondary-bg: rgba(255, 255, 255, 0.04);
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.08);
  --input-bg: #0a0d10;
  --input-line: #5f6873;        /* 3.3:1 on surface-1: field edges meet non-text contrast */
  --input-line-hover: #7d8691;
  --code-bg: #0a0d10;
  --selection: rgba(69, 240, 168, 0.28);
  --focus: #45f0a8;
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -10px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 2px 6px rgba(0, 0, 0, 0.35), 0 32px 80px -20px rgba(0, 0, 0, 0.85);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Glows used by hero / section backdrops */
  --glow-spark: rgba(69, 240, 168, 0.16);
  --glow-cyan: rgba(56, 217, 245, 0.10);
  --glow-agent: rgba(123, 108, 255, 0.12);
  --grid-line: rgba(255, 255, 255, 0.045);

  /* Type */
  --font-sans: "Inter", "InterVariable", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "InterDisplay", "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", "Cascadia Code", "Cascadia Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.0625rem;   /* 17px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: clamp(1.625rem, 1.2rem + 1.6vw, 2.125rem);
  --fs-3xl: clamp(2rem, 1.25rem + 3vw, 3.25rem);
  --fs-display: clamp(2.6rem, 1.15rem + 6.2vw, 6rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.62;

  --tracking-display: -0.042em;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.015em;
  --tracking-caps: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 650;

  /* Space (4px base) */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --section-y: clamp(72px, 6vw + 40px, 136px);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 600ms;
  --dur-5: 900ms;

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 64px;
}

/* Light theme: OS preference (unless forced dark) ... */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff;
    --bg-2: #f6f8f8;
    --bg-app: #f6f8f8;
    --surface-1: #ffffff;
    --surface-2: #f4f6f7;
    --surface-3: #eaeef0;
    --overlay: rgba(255, 255, 255, 0.76);
    --scrim: rgba(10, 13, 16, 0.32);
    --line-1: rgba(10, 13, 16, 0.07);
    --line-2: rgba(10, 13, 16, 0.11);
    --line-3: rgba(10, 13, 16, 0.18);
    --text-1: #0a0d10;
    --text-2: #4a545e;
    --text-3: #5f6873;
    --text-inverse: #ffffff;
    --accent: #10b981;
    --accent-hover: #0ea371;
    --accent-text: #087a52;
    --accent-ink: #04130c;
    --accent-soft: rgba(16, 185, 129, 0.10);
    --accent-line: rgba(16, 185, 129, 0.34);
    --accent-glow: rgba(16, 185, 129, 0.28);
    --gradient-spark: linear-gradient(100deg, #059669 0%, #0a9d74 45%, #0b84a8 100%);
    --gradient-title: linear-gradient(180deg, #0a0d10 0%, #0a0d10 45%, #3a434c 100%);
    --agent-1: #6d5cf6;
    --agent-2: #3b78f0;
    --ok: #087a52;
    --ok-soft: rgba(16, 185, 129, 0.11);
    --ok-line: rgba(16, 185, 129, 0.32);
    --warn: #b45309;
    --warn-soft: rgba(245, 158, 11, 0.12);
    --warn-line: rgba(217, 119, 6, 0.32);
    --danger: #c62828;
    --danger-soft: rgba(220, 38, 38, 0.09);
    --danger-line: rgba(220, 38, 38, 0.30);
    --info: #1b63c6;
    --info-soft: rgba(37, 99, 235, 0.09);
    --info-line: rgba(37, 99, 235, 0.28);
    --neutral: #4a545e;
    --neutral-soft: rgba(74, 84, 94, 0.09);
    --neutral-line: rgba(74, 84, 94, 0.22);
    --btn-primary-bg: #0a0d10;
    --btn-primary-bg-hover: #23292f;
    --btn-primary-fg: #ffffff;
    --btn-primary-shadow: 0 0 0 1px rgba(10, 13, 16, 0.9), 0 10px 24px -10px rgba(10, 13, 16, 0.45);
    --btn-secondary-bg: #ffffff;
    --btn-secondary-bg-hover: #f4f6f7;
    --input-bg: #ffffff;
    --input-line: #848d96;
    --input-line-hover: #5f6873;
    --code-bg: #f6f8f8;
    --selection: rgba(16, 185, 129, 0.22);
    --focus: #0a9d74;
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 32px -12px rgba(16, 24, 40, 0.16);
    --shadow-3: 0 2px 6px rgba(16, 24, 40, 0.05), 0 30px 80px -24px rgba(16, 24, 40, 0.28);
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --glow-spark: rgba(16, 185, 129, 0.12);
    --glow-cyan: rgba(14, 165, 233, 0.08);
    --glow-agent: rgba(109, 92, 246, 0.08);
    --grid-line: rgba(10, 13, 16, 0.05);
  }
}

/* ... or forced light. Keep in sync with the block above. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f6f8f8;
  --bg-app: #f6f8f8;
  --surface-1: #ffffff;
  --surface-2: #f4f6f7;
  --surface-3: #eaeef0;
  --overlay: rgba(255, 255, 255, 0.76);
  --scrim: rgba(10, 13, 16, 0.32);
  --line-1: rgba(10, 13, 16, 0.07);
  --line-2: rgba(10, 13, 16, 0.11);
  --line-3: rgba(10, 13, 16, 0.18);
  --text-1: #0a0d10;
  --text-2: #4a545e;
  --text-3: #5f6873;
  --text-inverse: #ffffff;
  --accent: #10b981;
  --accent-hover: #0ea371;
  --accent-text: #087a52;
  --accent-ink: #04130c;
  --accent-soft: rgba(16, 185, 129, 0.10);
  --accent-line: rgba(16, 185, 129, 0.34);
  --accent-glow: rgba(16, 185, 129, 0.28);
  --gradient-spark: linear-gradient(100deg, #059669 0%, #0a9d74 45%, #0b84a8 100%);
  --gradient-title: linear-gradient(180deg, #0a0d10 0%, #0a0d10 45%, #3a434c 100%);
  --agent-1: #6d5cf6;
  --agent-2: #3b78f0;
  --ok: #087a52;
  --ok-soft: rgba(16, 185, 129, 0.11);
  --ok-line: rgba(16, 185, 129, 0.32);
  --warn: #b45309;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --warn-line: rgba(217, 119, 6, 0.32);
  --danger: #c62828;
  --danger-soft: rgba(220, 38, 38, 0.09);
  --danger-line: rgba(220, 38, 38, 0.30);
  --info: #1b63c6;
  --info-soft: rgba(37, 99, 235, 0.09);
  --info-line: rgba(37, 99, 235, 0.28);
  --neutral: #4a545e;
  --neutral-soft: rgba(74, 84, 94, 0.09);
  --neutral-line: rgba(74, 84, 94, 0.22);
  --btn-primary-bg: #0a0d10;
  --btn-primary-bg-hover: #23292f;
  --btn-primary-fg: #ffffff;
  --btn-primary-shadow: 0 0 0 1px rgba(10, 13, 16, 0.9), 0 10px 24px -10px rgba(10, 13, 16, 0.45);
  --btn-secondary-bg: #ffffff;
  --btn-secondary-bg-hover: #f4f6f7;
  --input-bg: #ffffff;
  --input-line: #848d96;
  --input-line-hover: #5f6873;
  --code-bg: #f6f8f8;
  --selection: rgba(16, 185, 129, 0.22);
  --focus: #0a9d74;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 32px -12px rgba(16, 24, 40, 0.16);
  --shadow-3: 0 2px 6px rgba(16, 24, 40, 0.05), 0 30px 80px -24px rgba(16, 24, 40, 0.28);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glow-spark: rgba(16, 185, 129, 0.12);
  --glow-cyan: rgba(14, 165, 233, 0.08);
  --glow-agent: rgba(109, 92, 246, 0.08);
  --grid-line: rgba(10, 13, 16, 0.05);
}

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