/* ============================================================
   Kelp / Stader design tokens for the support desk.

   Sourced from the kelp-design system (kelpdao.xyz brand plus the "Creatives '26" Figma
   file) and the Stader fork in that system's themes.css. Values are copied, not invented:
   if a colour here disagrees with the brand, the brand wins and this file is wrong.

   Two things are deliberately NOT copied from the social-creative side of the system:
     - the display type scale (140px posters) which is sized for 1920px canvases;
     - the coral #CA4227, which the guidelines reserve for the logo mark. It appears here
       exactly once, inside the mark, and never as a UI accent.
   ============================================================ */

/* ---- fonts ------------------------------------------------------------- */

@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Kelp brand core (kelp-design tokens/colors.css) ---- */
  --kelp-coral: #ca4227;
  --kelp-ink: #075a5a;
  --kelp-green: #10806a;
  --kelp-mint: #28b58e;

  --tint-aqua: #c4e2e6;
  --tint-seafoam: #8bcabc;
  --tint-mint-soft: #a5d7cb;

  --surface-fog: #e3e9ed;
  --surface-band: #dee8f1;
  --surface-paper: #f7f7f7;
  --neutral-steel: #8a98a4;

  /* ---- Stader brand core (kelp-design tokens/themes.css) ---- */
  --stader-green: #056134;
  --stader-green-bright: #07c166;
  --stader-green-dark: #035b30;
  --stader-panel: #103925;
  --stader-mint: #87dfb4;
  --stader-mint-pale: #adfbd5;

  /* ---- type ---- */
  --font-display: 'Clash Display', -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* ---- radii (kelp-design tokens/effects.css, scaled for UI not for posters) ---- */
  --radius-card: 20px;
  --radius-capsule: 999px;
  --radius-chip: 12px;
  --radius-input: 16px;

  /* ---- shadows: aqua tinted, NEVER grey. This is a named brand rule. ---- */
  --shadow-card: 8px 8px 28px 0 rgba(196, 226, 230, 0.7);
  --shadow-sm: 4px 4px 14px 0 rgba(196, 226, 230, 0.55);
  --shadow-lift: 0 2px 10px 0 rgba(7, 90, 90, 0.08);

  /* ---- spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- shell widths. One number drives masthead AND stage, which is what stops the
         header and the conversation sitting on two different centre lines. ---- */
  --shell: 860px;
  --shell-queue: 1180px;

  /* ---- semantic, Kelp default ---- */
  --bg: #eef3f5;
  --bg-grain: rgba(196, 226, 230, 0.55);
  --surface: #ffffff;
  --surface-2: var(--surface-paper);
  --surface-sunken: var(--surface-fog);
  --line: rgba(7, 90, 90, 0.14);
  --line-strong: rgba(7, 90, 90, 0.3);
  --text: var(--kelp-ink);
  --text-soft: rgba(7, 90, 90, 0.72);
  --text-muted: var(--neutral-steel);
  --accent: var(--kelp-green);
  --accent-strong: var(--kelp-ink);
  --accent-contrast: #ffffff;
  --agent-rail: var(--kelp-mint);
  --focus: var(--kelp-green);
  --mark: var(--kelp-coral);
}

/* ---- Stader fork. Same structure, brand's own palette. ---- */
[data-brand='stader'] {
  --bg: #f2f7f3;
  --bg-grain: rgba(135, 223, 180, 0.45);
  --surface: #ffffff;
  --surface-2: #f4faf6;
  --surface-sunken: #e8f4ec;
  --line: rgba(5, 97, 52, 0.16);
  --line-strong: rgba(5, 97, 52, 0.32);
  --text: var(--stader-green);
  --text-soft: rgba(5, 97, 52, 0.74);
  --text-muted: #6f8c7c;
  --accent: var(--stader-green-bright);
  --accent-strong: var(--stader-green);
  --accent-contrast: #ffffff;
  --agent-rail: var(--stader-green-bright);
  --focus: var(--stader-green-bright);
  --mark: var(--stader-green-bright);
  --font-display: 'Gilroy', 'Clash Display', -apple-system, sans-serif;
  --shadow-card: 8px 8px 28px 0 rgba(135, 223, 180, 0.55);
  --shadow-sm: 4px 4px 14px 0 rgba(135, 223, 180, 0.45);
  --shadow-lift: 0 2px 10px 0 rgba(5, 97, 52, 0.08);
}

/* ---- dark, both brands. The renders in the brand world are light, so dark here is a
       deep version of the brand's own ink rather than a neutral grey. ---- */
:root[data-theme='dark'] {
  --bg: #04211f;
  --bg-grain: rgba(16, 128, 106, 0.28);
  --surface: #0a2e2c;
  --surface-2: #0d3634;
  --surface-sunken: #072523;
  --line: rgba(165, 215, 203, 0.16);
  --line-strong: rgba(165, 215, 203, 0.32);
  --text: #e8f4f1;
  --text-soft: rgba(232, 244, 241, 0.78);
  --text-muted: #7fa39c;
  --accent: var(--kelp-mint);
  --accent-strong: var(--tint-mint-soft);
  --accent-contrast: #04211f;
  --agent-rail: var(--kelp-mint);
  --focus: var(--kelp-mint);
}

:root[data-theme='dark'][data-brand='stader'] {
  --bg: #03231a;
  --bg-grain: rgba(7, 193, 102, 0.24);
  --surface: var(--stader-panel);
  --surface-2: #14432c;
  --surface-sunken: #0a2c1d;
  --line: rgba(135, 223, 180, 0.18);
  --line-strong: rgba(135, 223, 180, 0.34);
  --text: #eafaf1;
  --text-soft: rgba(234, 250, 241, 0.78);
  --text-muted: #79a68d;
  --accent: var(--stader-green-bright);
  --accent-strong: var(--stader-mint);
  --accent-contrast: #03231a;
  --agent-rail: var(--stader-green-bright);
  --focus: var(--stader-mint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #04211f;
    --bg-grain: rgba(16, 128, 106, 0.28);
    --surface: #0a2e2c;
    --surface-2: #0d3634;
    --surface-sunken: #072523;
    --line: rgba(165, 215, 203, 0.16);
    --line-strong: rgba(165, 215, 203, 0.32);
    --text: #e8f4f1;
    --text-soft: rgba(232, 244, 241, 0.78);
    --text-muted: #7fa39c;
    --accent: var(--kelp-mint);
    --accent-strong: var(--tint-mint-soft);
    --accent-contrast: #04211f;
    --agent-rail: var(--kelp-mint);
    --focus: var(--kelp-mint);
  }
  :root:not([data-theme='light'])[data-brand='stader'] {
    --bg: #03231a;
    --surface: var(--stader-panel);
    --surface-2: #14432c;
    --surface-sunken: #0a2c1d;
    --accent: var(--stader-green-bright);
    --accent-strong: var(--stader-mint);
    --accent-contrast: #03231a;
    --agent-rail: var(--stader-green-bright);
    --focus: var(--stader-mint);
  }
}