/* design-tokens.css — the swap layer.
   Claude Design's brand identity (logo, final palette) lands HERE without rebuilds.
   Direction (2026-09-01, v2): Kraken-system structure (design/references/kraken-DESIGN.md)
   adapted to Flagbearer's own colors: white/gray canvas, deep maroon accent kept. */

:root {
  color-scheme: light dark;

  /* Canvas and ink (Flagbearer's neutrals, kept) */
  --canvas: #fafafa;
  --canvas-soft: #f1f1f2;
  --ink: #131316;
  --body: #4b4b52;
  --muted: #77777e;
  --hairline: #e2e2e5;

  /* Accent: deep maroon, kept per Abbas; fills the Kraken Purple role */
  --accent: #7d2226;
  --accent-strong: #5d1719;
  --on-accent: #ffffff;
  --accent-wash: rgba(125, 34, 38, 0.10);

  --btn-bg: #7d2226;
  --btn-bg-hover: #5d1719;

  /* Semantic (Kraken system): success for live-status badges */
  --success-wash: rgba(20, 158, 97, 0.16);
  --success-wash-hover: rgba(20, 158, 97, 0.28);
  --success-text: #026b3f;
  --neutral-badge-wash: rgba(104, 107, 130, 0.12);
  --neutral-badge-text: #484b5e;

  /* Type: Kraken dual-role system via its documented fallback family */
  --font-display: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale (Kraken: 48 / 36 / 28 / 22 / 16 / 14) */
  --text-hero: clamp(2.25rem, 4.5vw, 3rem);
  --text-h2: clamp(1.75rem, 3vw, 2.25rem);
  --text-h3: 1.375rem;
  --text-body: 1rem;
  --text-small: 0.875rem;

  --track-display: -0.021em;   /* -1px at 48px */
  --leading-display: 1.17;
  --leading-body: 1.5;

  /* Rhythm */
  --space-section: clamp(4rem, 8vw, 6.5rem);
  --measure: 62ch;
  --page-max: 1100px;
  --page-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Shape (Kraken): 12px buttons, 16px cards, 6-8px badges */
  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-badge: 6px;
  --radius: 8px;

  /* Depth (Kraken): whisper-level */
  --shadow-subtle: rgba(0, 0, 0, 0.03) 0px 4px 24px;
  --shadow-micro: rgba(16, 24, 40, 0.04) 0px 1px 4px;
  --shadow-hover: rgba(0, 0, 0, 0.09) 0px 10px 32px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #161618;
    --canvas-soft: #1e1e21;
    --ink: #ececea;
    --body: #b4b4ba;
    --muted: #8b8b92;
    --hairline: #2c2c31;

    --accent: #d0777c;
    --accent-strong: #e0989c;
    --on-accent: #ffffff;
    --accent-wash: rgba(208, 119, 124, 0.12);

    --btn-bg: #8c2b30;
    --btn-bg-hover: #a23a40;

    --success-wash: rgba(20, 158, 97, 0.20);
    --success-wash-hover: rgba(20, 158, 97, 0.32);
    --success-text: #58c896;
    --neutral-badge-wash: rgba(148, 151, 169, 0.14);
    --neutral-badge-text: #a9acbd;

    --shadow-subtle: rgba(0, 0, 0, 0.35) 0px 4px 24px;
    --shadow-micro: rgba(0, 0, 0, 0.30) 0px 1px 4px;
    --shadow-hover: rgba(0, 0, 0, 0.55) 0px 10px 32px;
  }
}