/* Design tokens, taken from the crm-connector.com platform pages. This is the only file with raw colour values.
   app.js always sets data-theme on <html> (the stored choice, else the system preference), so dark needs one rule.
   .dark-surface gives any region the dark tokens in both themes, like the band on the sign in page. */

:root {
  color-scheme: light;

  /* Brand: a fill for buttons and bars, a text colour for links, icons and eyebrows. */
  --brand: #0227b6;
  --brand-hover: #3b82f6;
  --brand-text: #0227b6;
  --brand-text-hover: #3b82f6;
  --on-brand: #ffffff;
  --grad-end: #60a5fa;
  --tip: #0227b6;
  --text-grad: linear-gradient(90deg, #0227b6 0%, #1d4ed8 50%, #2563eb 100%);

  /* Ink, strongest first. ink-3 is body copy that steps back, ink-4 meta and labels, ink-5 placeholders only. */
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #475569;
  --ink-4: #64748b;
  --ink-5: #94a3b8;

  /* Surfaces. White cards float on a soft brand blue canvas, the blue of the mesh behind the sign in card. */
  --bg: #eef3fe;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #f1f5f9;
  --input: #ffffff;
  --chrome: #ffffff;
  --band: #0f172a;
  --band-ink: #cbd5e1;

  /* Paper stays white in both themes: system logos and the QR code only read on white. */
  --paper: #ffffff;
  --paper-line: #e2e8f0;
  --paper-ink: #0f172a;
  --card-rim: 0 0 0 transparent;

  /* Lines. canvas-line is a divider drawn on the blue canvas itself; line is for cards and the shell. */
  --canvas-line: rgb(2 39 182 / .1);
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --line-strong: #cbd5e1;

  /* Status: one colour each, plus the ink that sits on a filled version of it. */
  --ok: #0f766e;
  --on-ok: #ffffff;
  --warn: #b45309;
  --on-warn: #ffffff;
  --bad: #dc2626;
  --on-bad: #ffffff;

  /* Record types: one colour each, never used for a status. */
  --rt-contact: #7c3aed;
  --rt-opportunity: #a21caf;
  --rt-deal: #4f46e5;
  --rt-estimate: #155e75;
  --rt-job: #b4380a;
  --rt-appointment: #be185d;
  --rt-invoice: #3f6212;

  /* Chart series */
  --c2: #3b82f6;
  --c3: #14b8a6;
  --c4: #f59e0b;
  --c5: #94a3b8;

  /* The canvas of the recorded product demo, which is light in both themes. */
  --demo-bg: #f4f7fb;

  /* Shadow colours; the shadows themselves are composed below. */
  --shade-xs: rgb(15 23 42 / .05);
  --shade-hover: rgb(2 39 182 / .3);
  --shade-1: rgb(50 50 93 / .25);
  --shade-2: rgb(0 0 0 / .3);
  --shade-card: rgb(50 50 93 / .12);
  --scrim: rgb(15 23 42 / .45);

  /* The drifting brand gradient behind the platform heroes, used behind sign in and onboarding. */
  --mesh:
    radial-gradient(at 15% 35%, rgb(96 165 250 / .75) 0, transparent 45%),
    radial-gradient(at 85% 15%, rgb(2 39 182 / .55) 0, transparent 50%),
    radial-gradient(at 60% 85%, rgb(59 130 246 / .6) 0, transparent 50%),
    radial-gradient(at 5% 95%, rgb(199 210 254 / .9) 0, transparent 50%),
    #e0e7ff;
  --mesh-opacity: .7;
  /* The mesh fades out downwards instead of ending in an edge. */
  --mesh-fade: radial-gradient(ellipse 100% 80% at 50% 0%, #000 35%, transparent 100%);

  /* One even wash of the mesh blue at the top of the canvas, fading into the flat canvas below. */
  --glow: linear-gradient(180deg, rgb(161 189 244 / .55) 0, rgb(161 189 244 / 0) 460px);

  /* Theme specific images: two variants in the markup, each shown by one of these. */
  --only-light: inline;
  --only-dark: none;

  /* Radius */
  --r-xs: 4px;
  --r-s: 6px;
  --r-m: 8px;
  --r-l: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-full: 999px;

  /* Type */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-s: 13px;
  --fs-m: 14px;
  --fs-l: 15px;
  --fs-xl: 18px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --tr-tight: -.03em;
  --tr-snug: -.015em;
  --tr-caps: .06em;

  /* Controls and layout */
  --h-sm: 30px;
  --h-md: 36px;
  --h-lg: 44px;
  --connect-h: 36px;
  --rail: 240px;
  --rail-collapsed: 72px;
  --topbar: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Standalone screens (sign in, onboarding, error pages) grow with the screen, so a large monitor shows
     the same composition as a laptop instead of a small island. Set per screen size below. */
  --stage-zoom: 1;
}

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

  --brand: #3b82f6;
  --brand-hover: #60a5fa;
  --brand-text: #60a5fa;
  --brand-text-hover: #bfdbfe;
  --grad-end: #93c5fd;
  --tip: #a5b4fc;
  --text-grad: linear-gradient(90deg, #60a5fa 0%, #93c5fd 50%, #bfdbfe 100%);

  --ink: #f8fafc;
  --ink-2: #cbd5e1;
  --ink-3: #94a3b8;
  --ink-4: #7c8ba1;
  --ink-5: #475569;

  --bg: #020617;
  --panel: #0f172a;
  --panel-2: #151e31;
  --panel-3: #1e293b;
  --input: #141d30;
  --chrome: #020617;
  --paper-line: transparent;

  --canvas-line: rgb(255 255 255 / .1);
  --line: rgb(255 255 255 / .12);
  --line-soft: rgb(255 255 255 / .06);
  --line-strong: rgb(255 255 255 / .2);

  --ok: #2dd4bf;
  --on-ok: #042f2e;
  --warn: #fbbf24;
  --on-warn: #1c1305;
  --bad: #f87171;
  --on-bad: #2a0808;

  --rt-contact: #a78bfa;
  --rt-opportunity: #e879f9;
  --rt-deal: #a5b4fc;
  --rt-estimate: #67e8f9;
  --rt-job: #fb923c;
  --rt-appointment: #f472b6;
  --rt-invoice: #a3e635;

  --c2: #60a5fa;
  --c3: #2dd4bf;
  --c4: #fbbf24;
  --c5: #64748b;

  --shade-xs: rgb(0 0 0 / .4);
  --shade-hover: rgb(0 0 0 / .8);
  --shade-1: rgb(0 0 0 / .65);
  --shade-2: rgb(0 0 0 / .6);
  --shade-card: rgb(0 0 0 / .5);
  /* A black shadow vanishes on the near black canvas, so a card lifts with a faint top highlight instead. */
  --card-rim: inset 0 1px 0 rgb(255 255 255 / .06);
  --scrim: rgb(2 6 23 / .72);

  --mesh-opacity: .35;
  --glow:
    radial-gradient(1100px 620px at 0% 0%, rgb(30 27 75 / .6), transparent 62%),
    radial-gradient(1000px 580px at 100% 0%, rgb(8 47 73 / .55), transparent 60%),
    radial-gradient(1200px 700px at 60% 110%, rgb(23 37 84 / .35), transparent 65%);
  --only-light: none;
  --only-dark: inline;
}

/* Derived tokens. Declared on every element that sets its own palette, so they follow that palette. */
:root, .dark-surface {
  --brand-soft: color-mix(in srgb, var(--brand-text) 9%, transparent);
  --brand-line: color-mix(in srgb, var(--brand-text) 32%, transparent);
  --brand-ring: color-mix(in srgb, var(--brand) 18%, transparent);
  --brand-grad: linear-gradient(90deg, var(--brand) 0%, var(--grad-end) 100%);
  --info: var(--brand-text);
  --on-info: var(--on-brand);

  --ok-soft: color-mix(in srgb, var(--ok) 10%, transparent);
  --ok-line: color-mix(in srgb, var(--ok) 32%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 10%, transparent);
  --warn-line: color-mix(in srgb, var(--warn) 36%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad) 8%, transparent);
  --bad-line: color-mix(in srgb, var(--bad) 30%, transparent);
  --bad-hover: color-mix(in srgb, var(--bad) 82%, #000);
  --info-soft: var(--brand-soft);
  --info-line: var(--brand-line);

  --c1: var(--brand);
  --grid: var(--line-soft);

  /* Elevation. Cards lean on their border; floating surfaces get the deep platform shadow. */
  --sh-xs: 0 1px 2px var(--shade-xs);
  --sh-card: var(--card-rim), 0 1px 2px var(--shade-xs), 0 24px 48px -30px var(--shade-card);
  --sh-hover: 0 12px 30px -20px var(--shade-hover);
  --sh-pop: 0 24px 48px -20px var(--shade-1), 0 10px 20px -12px var(--shade-2);
  --sh-float: 0 50px 100px -20px var(--shade-1), 0 30px 60px -30px var(--shade-2);
  --focus-ring: 0 0 0 3px var(--brand-ring);
}

/* A step up only when there is room in both directions, so nothing is pushed off the bottom of a wide, short screen. */
@media (min-width: 1700px) and (min-height: 820px) { :root { --stage-zoom: 1.1; } }
@media (min-width: 1900px) and (min-height: 900px) { :root { --stage-zoom: 1.2; } }
@media (min-width: 2100px) and (min-height: 980px) { :root { --stage-zoom: 1.3; } }
@media (min-width: 2400px) and (min-height: 1080px) { :root { --stage-zoom: 1.45; } }
@media (min-width: 2800px) and (min-height: 1250px) { :root { --stage-zoom: 1.65; } }
@media (min-width: 3400px) and (min-height: 1500px) { :root { --stage-zoom: 2; } }