/* RepSidecar design tokens. Source of truth: brand/BRAND.md. Last checked 2026-11-06.
   Use semantic tokens (--rs-bg, --rs-text, --rs-accent) in pages and apps.
   Primitive tokens (--rs-c-*) are the raw palette; do not use them directly in components.
   Theme: light by default, dark under prefers-color-scheme, and both can be forced with data-theme.
   The floating call window and the coaching card always use the dark window tokens (--rs-win-*). */

:root {
  /* Primitives */
  --rs-c-bezel: #0B0E11;
  --rs-c-panel: #12171C;
  --rs-c-line-dark: #2B353F;
  --rs-c-text-dark: #E6EBEF;
  --rs-c-muted-dark: #9AA7B2;
  --rs-c-signal: #4FE0C2;
  --rs-c-amber: #F2B84B;
  --rs-c-mist: #F4F6F8;
  --rs-c-white: #FFFFFF;
  --rs-c-slate: #4A5762;
  --rs-c-signal-deep: #0A6B5B;
  --rs-c-amber-deep: #8A5A00;
  --rs-c-line-light: #C9D1D8;

  /* Semantic colour, light theme (default) */
  --rs-bg: var(--rs-c-mist);
  --rs-surface: var(--rs-c-white);
  --rs-line: var(--rs-c-line-light);       /* decorative only, 1.4:1, never carries meaning */
  --rs-text: var(--rs-c-bezel);            /* 17.86 on bg, 19.35 on surface */
  --rs-muted: var(--rs-c-slate);           /* 6.85 on bg, 7.42 on surface */
  --rs-accent: var(--rs-c-signal-deep);    /* 5.93 on bg, 6.43 on surface */
  --rs-on-accent: var(--rs-c-white);       /* 6.43 on accent */
  --rs-accent-tint: #E2EDEB;               /* key-phrase highlight; text on it 16.17 */
  --rs-caution: var(--rs-c-amber-deep);    /* 5.47 on bg, 5.93 on surface */
  --rs-on-caution: var(--rs-c-white);      /* 5.93 on caution */
  --rs-caution-tint: #F1EBE0;              /* caution text on it 5.00 */
  --rs-focus: var(--rs-c-signal-deep);

  /* Window tokens: fixed dark, same in every theme */
  --rs-win-bg: rgba(11, 14, 17, 0.92);     /* Bezel at 92% */
  --rs-win-surface: var(--rs-c-panel);
  --rs-win-line: var(--rs-c-line-dark);
  --rs-win-text: var(--rs-c-text-dark);    /* 15.02 on panel */
  --rs-win-muted: var(--rs-c-muted-dark);  /* 7.33 on panel */
  --rs-win-signal: var(--rs-c-signal);     /* 10.96 on panel */
  --rs-win-amber: var(--rs-c-amber);       /* 10.07 on panel */
  --rs-win-signal-tint: #1D3B3A;           /* text on it 10.06 */

  /* Type */
  --rs-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rs-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --rs-text-label: 0.6875rem;      /* 11px, mono, uppercase, +0.08em */
  --rs-text-caption: 0.75rem;      /* 12px */
  --rs-text-card: 0.9375rem;       /* 15px, in-call card body */
  --rs-text-body: 1.0625rem;       /* 17px */
  --rs-text-lead: 1.25rem;         /* 20px */
  --rs-text-h3: 1.375rem;          /* 22px */
  --rs-text-h2: 2rem;              /* 32px */
  --rs-text-h1: clamp(2.25rem, 5.5vw + 0.5rem, 3.5rem); /* 36px to 56px */
  --rs-leading-card: 1.4;          /* 21px on 15px */
  --rs-leading-body: 1.6;          /* 27px on 17px */
  --rs-leading-h1: 1.07;
  --rs-leading-h2: 1.19;
  --rs-tracking-h1: -0.02em;
  --rs-tracking-label: 0.08em;
  --rs-weight-regular: 400;
  --rs-weight-medium: 500;
  --rs-weight-semibold: 600;

  /* Spacing, 4px base */
  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-space-4: 16px;
  --rs-space-5: 24px;
  --rs-space-6: 32px;
  --rs-space-7: 48px;
  --rs-space-8: 64px;
  --rs-space-9: 96px;

  /* Radius */
  --rs-radius-xs: 4px;     /* chips, key caps */
  --rs-radius-sm: 6px;     /* buttons, inputs */
  --rs-radius-md: 10px;    /* coaching card, panels */
  --rs-radius-lg: 14px;    /* app icon tile (22% of 64) */
  --rs-radius-pill: 999px;

  /* Shadow: one lift for floating surfaces, no glow, no blur-glass */
  --rs-shadow-card: 0 8px 24px rgba(11, 14, 17, 0.12), 0 1px 2px rgba(11, 14, 17, 0.08);
  --rs-shadow-window: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Card geometry and motion */
  --rs-card-width: 340px;
  --rs-card-pad: 16px;
  --rs-card-rail: 3px;
  --rs-card-fade: 120ms;
  --rs-card-life: 20s;     /* meter line empties, then the card leaves */
  --rs-card-gap-min: 15s;  /* minimum time between cards */
  --rs-target-min: 32px;   /* minimum click target in the window; 44px on the site and touch */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rs-bg: var(--rs-c-bezel);
    --rs-surface: var(--rs-c-panel);
    --rs-line: var(--rs-c-line-dark);      /* decorative only, 1.55 on bg */
    --rs-text: var(--rs-c-text-dark);      /* 16.12 on bg, 15.02 on surface */
    --rs-muted: var(--rs-c-muted-dark);    /* 7.87 on bg, 7.33 on surface */
    --rs-accent: var(--rs-c-signal);       /* 11.77 on bg, 10.96 on surface */
    --rs-on-accent: var(--rs-c-bezel);     /* 11.77 on accent */
    --rs-accent-tint: #1D3B3A;
    --rs-caution: var(--rs-c-amber);       /* 10.81 on bg, 10.07 on surface */
    --rs-on-caution: var(--rs-c-bezel);    /* 10.81 on caution */
    --rs-caution-tint: #363124;
    --rs-focus: var(--rs-c-signal);
    --rs-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --rs-bg: var(--rs-c-bezel);
  --rs-surface: var(--rs-c-panel);
  --rs-line: var(--rs-c-line-dark);
  --rs-text: var(--rs-c-text-dark);
  --rs-muted: var(--rs-c-muted-dark);
  --rs-accent: var(--rs-c-signal);
  --rs-on-accent: var(--rs-c-bezel);
  --rs-accent-tint: #1D3B3A;
  --rs-caution: var(--rs-c-amber);
  --rs-on-caution: var(--rs-c-bezel);
  --rs-caution-tint: #363124;
  --rs-focus: var(--rs-c-signal);
  --rs-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root { --rs-card-fade: 0ms; }
}