/* Hallmark · custom theme · genre: editorial-technical · tone: warm machinery ("a lamp-lit switchboard")
 * vibe: "Prussian ink, cinnabar, bone, patch cables, soft panels"
 * paper oklch(18% 0.026 250) Prussian ink · accent oklch(66% 0.175 33) cinnabar · display Young Serif + body Archivo + mono Spline Sans Mono
 * axes: dark / classical-serif / warm
 *
 * Connet's design tokens. Every colour, font, size, space, radius, easing and duration in the
 * app comes from here: change the brand by changing this file.
 *
 * Dark is the default. Light follows the device (prefers-color-scheme: light),
 * unless the theme is chosen in Settings → Appearance (data-theme on <html>).
 */

/* Fonts: self-hosted (SIL Open Font License, see /fonts/*-OFL.txt), so no request
   ever goes to Google and the strict content-security policy stays intact. */
@font-face {
  font-family: "Young Serif";
  src: url("/fonts/young-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Variable";
  src: url("/fonts/archivo.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Variable";
  src: url("/fonts/archivo-italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono Variable";
  src: url("/fonts/spline-sans-mono.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces: Prussian ink. Panels float a step lighter on the ground. */
  --color-paper: oklch(18% 0.026 250);
  --color-paper-2: oklch(22.5% 0.03 250);
  --color-paper-3: oklch(27.5% 0.034 250);
  --color-rail: oklch(18% 0.026 250);
  --color-rail-active: oklch(27.5% 0.034 250);
  --color-rule: oklch(33.5% 0.034 250);
  --color-rule-strong: oklch(43% 0.034 250);

  /* Ink: warm bone, three steps. All pass 4.5:1 on every surface. */
  --color-ink: oklch(94.5% 0.016 85);
  --color-ink-2: oklch(83% 0.02 80);
  --color-ink-3: oklch(73% 0.022 75);

  /* The one accent: cinnabar. The one thing to do on a screen, the active item, the AI's ring in the mark. */
  --color-accent: oklch(66% 0.175 33);
  --color-accent-hover: oklch(71% 0.165 35);
  --color-accent-press: oklch(62% 0.17 33);
  --color-accent-ink: oklch(74% 0.14 36);
  --color-accent-soft: oklch(28% 0.06 30);
  --color-accent-soft-2: oklch(33% 0.075 30);
  --color-on-accent: oklch(18% 0.026 250);

  /* Bone: the person's ring in the mark, and the quiet second colour. */
  --color-bone: oklch(90% 0.03 82);
  --color-on-bone: oklch(18% 0.026 250);

  /* Channel jacks: each channel gets one, like a patch cable. Never green. */
  --color-line-1: oklch(90% 0.03 82);
  --color-line-2: oklch(72% 0.06 240);
  --color-line-3: oklch(77% 0.1 78);
  --color-line-4: oklch(66% 0.175 33);

  /* Signals. Danger leans pink so it never reads as the accent; it always comes with words. */
  --color-mention: oklch(33% 0.07 35);
  --color-mention-ink: oklch(92% 0.05 60);
  --color-danger: oklch(74% 0.16 10);
  --color-danger-hover: oklch(79% 0.14 10);
  --color-danger-soft: oklch(28% 0.07 10);
  --color-warning-soft: oklch(31% 0.05 80);
  --color-success: var(--color-ink);
  --color-success-soft: var(--color-paper-3);
  --color-live: oklch(76% 0.1 235);
  --color-away: oklch(77% 0.1 78);
  --color-focus: oklch(85% 0.1 215);
  --color-scrim: oklch(8% 0.02 250 / 0.6);
  --color-shadow: oklch(8% 0.02 250 / 0.5);
  --color-code: oklch(25% 0.032 250);

  /* People's avatars: muted hues, never the accent. */
  --color-avatar-1: oklch(52% 0.09 40);
  --color-avatar-2: oklch(50% 0.08 230);
  --color-avatar-3: oklch(50% 0.08 300);
  --color-avatar-4: oklch(52% 0.09 75);
  --color-avatar-5: oklch(48% 0.07 190);
  --color-avatar-6: oklch(50% 0.09 10);
  --color-avatar-7: oklch(46% 0.05 260);
  --color-avatar-8: oklch(50% 0.08 120);
  --color-on-avatar: oklch(99% 0 0);

  /* Type. A serif for headings, a grotesk for everything else, a mono for times and counts. */
  --font-display: "Young Serif", ui-serif, Georgia, serif;
  --font-body: "Archivo Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Spline Sans Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 0.96875rem; /* 15.5 */
  --text-md: 1.03125rem; /* 16.5 */
  --text-lg: 1.25rem; /* 20 */
  --text-xl: 1.4375rem; /* 23 */
  --text-2xl: 2rem; /* 32 */
  --text-3xl: 3.25rem; /* 52 */
  --text-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* 4-pt spacing. */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Soft panels: big radius for panels, smaller for things inside them. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --rule: 1px solid var(--color-rule);

  --shadow-pop: 0 1px 2px var(--color-shadow), 0 12px 32px -8px var(--color-shadow);
  --shadow-float: 0 1px 2px var(--color-shadow), 0 24px 64px -16px var(--color-shadow);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;

  --rail-width: 60px;
  --sidebar-width: 252px;
  --panel-width: 440px;
  --target: 44px; /* minimum touch target */
  --control-h: 40px;
}

/* Light: bone paper, ink text, a deeper cinnabar so text on it passes AA. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --color-paper: oklch(96.5% 0.012 85);
    --color-paper-2: oklch(99.2% 0.004 85);
    --color-paper-3: oklch(93% 0.015 85);
    --color-rail: oklch(96.5% 0.012 85);
    --color-rail-active: oklch(91% 0.018 80);
    --color-rule: oklch(88% 0.015 80);
    --color-rule-strong: oklch(76% 0.018 80);

    --color-ink: oklch(22% 0.03 250);
    --color-ink-2: oklch(37% 0.03 250);
    --color-ink-3: oklch(45% 0.028 250);

    --color-accent: oklch(53% 0.175 33);
    --color-accent-hover: oklch(48% 0.165 33);
    --color-accent-press: oklch(44% 0.155 33);
    --color-accent-ink: oklch(47% 0.16 33);
    --color-accent-soft: oklch(94% 0.03 35);
    --color-accent-soft-2: oklch(90% 0.045 35);
    --color-on-accent: oklch(99% 0.004 85);

    --color-bone: oklch(30% 0.03 250);
    --color-on-bone: oklch(99% 0.004 85);

    --color-line-1: oklch(40% 0.03 250);
    --color-line-2: oklch(52% 0.08 240);
    --color-line-3: oklch(60% 0.12 75);
    --color-line-4: oklch(53% 0.175 33);

    --color-mention: oklch(93% 0.05 60);
    --color-mention-ink: oklch(37% 0.08 45);
    --color-danger: oklch(49% 0.19 10);
    --color-danger-hover: oklch(44% 0.18 10);
    --color-danger-soft: oklch(95.5% 0.025 10);
    --color-warning-soft: oklch(95% 0.04 85);
    --color-live: oklch(52% 0.11 240);
    --color-away: oklch(62% 0.13 75);
    --color-focus: oklch(52% 0.15 245);
    --color-scrim: oklch(20% 0.03 250 / 0.45);
    --color-shadow: oklch(25% 0.03 250 / 0.14);
    --color-code: oklch(93.5% 0.012 85);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --color-paper: oklch(96.5% 0.012 85);
  --color-paper-2: oklch(99.2% 0.004 85);
  --color-paper-3: oklch(93% 0.015 85);
  --color-rail: oklch(96.5% 0.012 85);
  --color-rail-active: oklch(91% 0.018 80);
  --color-rule: oklch(88% 0.015 80);
  --color-rule-strong: oklch(76% 0.018 80);

  --color-ink: oklch(22% 0.03 250);
  --color-ink-2: oklch(37% 0.03 250);
  --color-ink-3: oklch(45% 0.028 250);

  --color-accent: oklch(53% 0.175 33);
  --color-accent-hover: oklch(48% 0.165 33);
  --color-accent-press: oklch(44% 0.155 33);
  --color-accent-ink: oklch(47% 0.16 33);
  --color-accent-soft: oklch(94% 0.03 35);
  --color-accent-soft-2: oklch(90% 0.045 35);
  --color-on-accent: oklch(99% 0.004 85);

  --color-bone: oklch(30% 0.03 250);
  --color-on-bone: oklch(99% 0.004 85);

  --color-line-1: oklch(40% 0.03 250);
  --color-line-2: oklch(52% 0.08 240);
  --color-line-3: oklch(60% 0.12 75);
  --color-line-4: oklch(53% 0.175 33);

  --color-mention: oklch(93% 0.05 60);
  --color-mention-ink: oklch(37% 0.08 45);
  --color-danger: oklch(49% 0.19 10);
  --color-danger-hover: oklch(44% 0.18 10);
  --color-danger-soft: oklch(95.5% 0.025 10);
  --color-warning-soft: oklch(95% 0.04 85);
  --color-live: oklch(52% 0.11 240);
  --color-away: oklch(62% 0.13 75);
  --color-focus: oklch(52% 0.15 245);
  --color-scrim: oklch(20% 0.03 250 / 0.45);
  --color-shadow: oklch(25% 0.03 250 / 0.14);
  --color-code: oklch(93.5% 0.012 85);
}
:root[data-theme="dark"] { color-scheme: dark; }