/*
  Design tokens: the ONE place for every colour, font, size, spacing, radius and shadow.
  The Quotefi brand kit is docs/brand/brand-kit.md. Nothing else in the app hard-codes a colour
  or font. Tailwind utilities read these through app/globals.css (@theme inline), e.g. bg-surface,
  text-ink-2, border-line. Emails can't read CSS, so scripts/design-tokens.mjs copies these values
  into lib/design/tokens.gen.ts (the build fails if the copy is out of date).

  Customer theme: a customer's logo and colour sit on top (lib/design/theme.ts). The app sets the
  --tenant-* variables on <html> for that workspace; when they are not set, Quotefi's values below
  apply. Only the four brand tokens can change. Status, neutrals, type and spacing never do.
*/

:root {
  /* Brand: Quotefi Ink does the work (buttons, selected nav). A customer theme may replace these four. */
  --brand: var(--tenant-brand, #161b26);              /* primary buttons, selected nav */
  --brand-hover: var(--tenant-brand-hover, #2a3142);
  --brand-ink: var(--tenant-brand-ink, #ffffff);      /* text on brand */
  --brand-soft: var(--tenant-brand-soft, #eef0f4);    /* selected rows and nav items */

  /* Accent: Quotefi Violet marks Quotefi itself (logo dot, links, "why Quotefi did this" notes).
     Never a status. Never changed by a customer theme. */
  --accent: #6e44d8;
  --accent-deep: #5730b8;      /* hover, violet text on light */
  --accent-soft: #f1ecfc;      /* Quotefi's notes */
  --mark-ink: #161b26;         /* the q and the wordmark letters */
  --mark-dot: #6e44d8;         /* the full stop and the dot on the i */
  --mark-tile: #161b26;        /* app icon tile */
  --mark-tile-ink: #ffffff;
  --mark-tile-dot: #9a78f2;
  --logo-plate: transparent;   /* behind a customer's logo; a light plate in dark mode keeps dark logos readable */

  /* Neutrals (cool grey) */
  --canvas: #f4f5f7;           /* app background */
  --surface: #ffffff;          /* panels, cards, tables */
  --surface-2: #f9fafb;        /* table header, inset areas */
  --surface-3: #eef0f3;        /* hover, tracks */
  --line: #e2e5ea;             /* hairlines */
  --line-strong: #cbd0d8;      /* inputs, emphasised dividers */
  --ink: #141a22;              /* primary text */
  --ink-2: #4b5563;            /* secondary text */
  --ink-3: #646d7c;            /* muted text, captions (4.8:1 on canvas, 5.2:1 on surface) */
  --focus: #2563eb;

  /* Status: fixed meaning on every screen. Always shown with an icon or label too. */
  --st-active: #2f5bd3;        /* moving, in our hands */
  --st-active-soft: #e9eefc;
  --st-waiting: #9f5c06;       /* waiting on client or approval */
  --st-waiting-soft: #fdf3e2;
  --st-stuck: #c2341f;         /* stuck, overdue, urgent */
  --st-stuck-soft: #fdecea;
  --st-done: #1d7a46;          /* won, done, delivered */
  --st-done-soft: #e6f4ec;
  --st-closed: #5f6b7a;        /* closed without a win */
  --st-closed-soft: #eef0f3;

  /* Channels */
  --ch-email: #4b5563;
  --ch-whatsapp: #1d7a46;

  /* Brain graph: one colour per kind of note, always shown with a shape and a label too */
  --node-skill: #2f5bd3;       /* a skill: one AI job */
  --node-knowledge: #7a5af0;   /* universal know-how */
  --node-layer: #b45309;       /* this business's own layer */
  --node-design: #0e7490;      /* design rules: how screens, emails and documents look */
  --edge: #c3c9d2;

  /* Type */
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Sora", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;   /* page titles, big numbers */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;      /* references, timers, amounts */
  --font-email: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13: tables, most UI */
  --text-base: 0.875rem;  /* 14 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.25rem;     /* 20 */
  --text-xl: 1.625rem;    /* 26 */
  --text-hero: 3rem;      /* 48: one hero number per view */

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --gutter: 1rem;          /* page side gutter on phones */
  --gutter-lg: 1.75rem;    /* page side gutter on laptops and up */
  --sidebar: 15rem;

  /* Shape and depth */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-1: 0 1px 0 rgba(20, 26, 34, 0.04), 0 1px 2px rgba(20, 26, 34, 0.06);
  --shadow-pop: 0 8px 24px rgba(20, 26, 34, 0.14), 0 2px 6px rgba(20, 26, 34, 0.08);

  /* Brand surfaces (design pass, 12 Nov 2026). Sidebar and phone header are Quotefi Ink in both modes. */
  --nav-bg: #161b26;
  --nav-surface: #1f2533;
  --nav-surface-2: #1b2130;
  --nav-surface-3: #282f40;
  --nav-line: #2a3142;
  --nav-line-strong: #3b445a;
  --nav-ink: #f3f4f8;
  --nav-ink-2: #c3c8d3;
  --nav-ink-3: #959dad;        /* 5.9:1 on the sidebar */
  --nav-active: #2e2752;       /* selected menu item: Ink with a violet cast */
  --nav-marker: #9a78f2;       /* the violet bar beside the selected item */
  --nav-cta: var(--tenant-brand, #6e44d8);   /* New inquiry: Quotefi Violet, or the customer's colour */
  --page-wash: linear-gradient(180deg, #ece6fb 0, #f4f5f7 300px);   /* soft violet at the top of each page */

  /* Stages of an inquiry: one violet scale, light to deep. Never a status colour, so status keeps its meaning. */
  --stage-1: #c5b5f4;
  --stage-2: #a78ef0;
  --stage-3: #8a69e6;
  --stage-4: #6e44d8;
  --stage-5: #4a2c9e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: var(--tenant-brand-dark, #e4e1f7);
    --brand-hover: var(--tenant-brand-dark-hover, #ffffff);
    --brand-ink: var(--tenant-brand-dark-ink, #10151b);
    --brand-soft: var(--tenant-brand-dark-soft, #2a313c);
    --accent: #bba5f5;
    --accent-deep: #d3c6fa;
    --accent-soft: #2c2643;
    --mark-ink: #ffffff;
    --mark-dot: #9a78f2;
    --mark-tile: #2a313c;
    --logo-plate: #eef0f3;
    --canvas: #161b22;
    --surface: #1d232c;
    --surface-2: #222933;
    --surface-3: #2a313c;
    --line: #323a46;
    --line-strong: #444d5a;
    --ink: #e7ebf0;
    --ink-2: #aab3bf;
    --ink-3: #8a94a1;
    --focus: #6b9bff;
    --st-active: #7ea0ff;
    --st-active-soft: #1c2742;
    --st-waiting: #e0a547;
    --st-waiting-soft: #33281a;
    --st-stuck: #f07b68;
    --st-stuck-soft: #3a1f1c;
    --st-done: #5cc489;
    --st-done-soft: #17301f;
    --st-closed: #9aa5b3;
    --st-closed-soft: #2a313c;
    --ch-email: #aab3bf;
    --ch-whatsapp: #5cc489;
    --node-skill: #7ea0ff;
    --node-knowledge: #b19cff;
    --node-layer: #e0a547;
    --node-design: #5ec4dc;
    --edge: #3a434f;
    --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.02);
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
    --nav-bg: #0f1318;
    --nav-surface: #1a1f27;
    --nav-surface-2: #161b22;
    --nav-surface-3: #252c36;
    --nav-line: #252b35;
    --nav-line-strong: #363e4b;
    --nav-active: #2a2446;
    --page-wash: linear-gradient(180deg, #211d33 0, #161b22 300px);
    --stage-1: #6f5fa8;
    --stage-2: #8873cf;
    --stage-3: #a08cec;
    --stage-4: #b9a6f5;
    --stage-5: #d3c6fa;
  }
}

/* Same dark values when a page forces dark mode. Keep in step with the block above. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: var(--tenant-brand-dark, #e4e1f7);
  --brand-hover: var(--tenant-brand-dark-hover, #ffffff);
  --brand-ink: var(--tenant-brand-dark-ink, #10151b);
  --brand-soft: var(--tenant-brand-dark-soft, #2a313c);
  --accent: #bba5f5;
  --accent-deep: #d3c6fa;
  --accent-soft: #2c2643;
  --mark-ink: #ffffff;
  --mark-dot: #9a78f2;
  --mark-tile: #2a313c;
  --logo-plate: #eef0f3;
  --canvas: #161b22;
  --surface: #1d232c;
  --surface-2: #222933;
  --surface-3: #2a313c;
  --line: #323a46;
  --line-strong: #444d5a;
  --ink: #e7ebf0;
  --ink-2: #aab3bf;
  --ink-3: #8a94a1;
  --focus: #6b9bff;
  --st-active: #7ea0ff;
  --st-active-soft: #1c2742;
  --st-waiting: #e0a547;
  --st-waiting-soft: #33281a;
  --st-stuck: #f07b68;
  --st-stuck-soft: #3a1f1c;
  --st-done: #5cc489;
  --st-done-soft: #17301f;
  --st-closed: #9aa5b3;
  --st-closed-soft: #2a313c;
  --ch-email: #aab3bf;
  --ch-whatsapp: #5cc489;
  --node-skill: #7ea0ff;
  --node-knowledge: #b19cff;
  --node-layer: #e0a547;
  --node-design: #5ec4dc;
  --edge: #3a434f;
  --shadow-1: 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.5);
  --nav-bg: #0f1318;
  --nav-surface: #1a1f27;
  --nav-surface-2: #161b22;
  --nav-surface-3: #252c36;
  --nav-line: #252b35;
  --nav-line-strong: #363e4b;
  --nav-active: #2a2446;
  --page-wash: linear-gradient(180deg, #211d33 0, #161b22 300px);
  --stage-1: #6f5fa8;
  --stage-2: #8873cf;
  --stage-3: #a08cec;
  --stage-4: #b9a6f5;
  --stage-5: #d3c6fa;
}

/* The sidebar and phone header: everything inside reads the dark Ink palette, whatever the page's mode.
   Components keep using the normal tokens (bg-surface, text-ink-2, bg-brand), which this scope redefines. */
.qf-nav {
  color-scheme: dark;
  --surface: var(--nav-surface);
  --surface-2: var(--nav-surface-2);
  --surface-3: var(--nav-surface-3);
  --line: var(--nav-line);
  --line-strong: var(--nav-line-strong);
  --ink: var(--nav-ink);
  --ink-2: var(--nav-ink-2);
  --ink-3: var(--nav-ink-3);
  --brand: var(--nav-cta);
  --brand-hover: color-mix(in oklab, var(--nav-cta) 84%, #ffffff);
  --brand-ink: #ffffff;
  --brand-soft: var(--nav-active);
  --mark-ink: #ffffff;
  --mark-dot: #9a78f2;
  --mark-tile: #2a3142;
  --logo-plate: #eef0f3;
  --focus: #b9a6f5;
  background: var(--nav-bg);
  color: var(--nav-ink);
}