/* Doppla design tokens — mirrors brand-tokens.json. */

:root {
  --doppla-red: #C15E3D;          /* input  — the rear block  */
  --doppla-blue: #1D6E8F;         /* output — the front block */

  --doppla-ink: #15151A;
  --doppla-slate: #6B7280;
  --doppla-paper: #FFFFFF;
  --doppla-cream: #F7F3EC;
  --doppla-hairline: #DADAD5;

  --doppla-font-sans: 'Poppins', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --doppla-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --doppla-weight-light: 300;
  --doppla-weight-regular: 400;
  --doppla-weight-medium: 500;

  --doppla-text-display: 48px;
  --doppla-text-h1: 36px;
  --doppla-text-h2: 28px;
  --doppla-text-h3: 20px;
  --doppla-text-body: 16px;
  --doppla-text-small: 14px;
  --doppla-text-caption: 12px;
  --doppla-leading-tight: 1.2;
  --doppla-leading-body: 1.6;

  --doppla-space-1: 4px;
  --doppla-space-2: 8px;
  --doppla-space-3: 12px;
  --doppla-space-4: 16px;
  --doppla-space-6: 24px;
  --doppla-space-8: 32px;
  --doppla-space-12: 48px;
  --doppla-space-16: 64px;
  --doppla-space-24: 96px;
  --doppla-content-max: 1200px;

  --doppla-radius-card: 8px;
  --doppla-radius-control: 6px;
  --doppla-radius-pill: 9999px;

  --doppla-shadow-floating: 0 4px 16px rgba(21, 21, 26, 0.10);

  --doppla-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --doppla-duration-fast: 120ms;
  --doppla-duration-default: 200ms;
  --doppla-duration-slow: 320ms;

  /* Charts: series in order (never cycled), a sequential ramp, a diverging
     pair, and reserved status colours. Set charts on Paper. An -inlay fills
     the cut-out of that status icon: Ink in light mode, none in dark. */
  --doppla-chart-1: #1D6E8F;
  --doppla-chart-2: #BD871C;
  --doppla-chart-3: #4F54A0;
  --doppla-chart-4: #569459;
  --doppla-chart-5: #823B7D;
  --doppla-chart-6: #06999A;
  --doppla-seq-1: #DBEFF9;
  --doppla-seq-2: #B1D4E6;
  --doppla-seq-3: #83B6D0;
  --doppla-seq-4: #4D93B3;
  --doppla-seq-5: #1D6E8F;
  --doppla-seq-6: #0A5470;
  --doppla-seq-7: #053E53;
  --doppla-div-1: #70306C;
  --doppla-div-2: #9C6496;
  --doppla-div-3: #C8A4C3;
  --doppla-div-4: #E7E4DF;
  --doppla-div-5: #D7B98B;
  --doppla-div-6: #C18E35;
  --doppla-div-7: #976213;
  --doppla-status-good: #2A904B;
  --doppla-status-warning: #E6B731;
  --doppla-status-serious: #ED9831;
  --doppla-status-critical: #A8002C;
  --doppla-status-warning-inlay: #15151A;
  --doppla-status-serious-inlay: #15151A;
}

/* Dark surfaces. Both brand colours are used unchanged. */
:root[data-theme='dark'],
.doppla-dark {
  --doppla-paper: #17171A;
  --doppla-panel: #1D1D21;
  --doppla-ink: #F4F3F0;
  --doppla-slate: #8A8A8F;
  --doppla-hairline: rgba(255, 255, 255, 0.10);

  /* Charts on the dark base: the sequential ramp flips, so more is brighter. */
  --doppla-chart-1: #1D6E8F;
  --doppla-chart-2: #BD871C;
  --doppla-chart-3: #686FBD;
  --doppla-chart-4: #68A76A;
  --doppla-chart-5: #984F92;
  --doppla-chart-6: #2AA9A9;
  --doppla-seq-1: #16323E;
  --doppla-seq-2: #1A485C;
  --doppla-seq-3: #1F637F;
  --doppla-seq-4: #2B7EA1;
  --doppla-seq-5: #529CBF;
  --doppla-seq-6: #82BAD5;
  --doppla-seq-7: #B4D7E9;
  --doppla-div-1: #A15E9C;
  --doppla-div-2: #774272;
  --doppla-div-3: #4F314C;
  --doppla-div-4: #282623;
  --doppla-div-5: #543E1A;
  --doppla-div-6: #886116;
  --doppla-div-7: #BA882E;
  --doppla-status-good: #45B164;
  --doppla-status-warning: #ECBD3A;
  --doppla-status-serious: #F3A44A;
  --doppla-status-critical: #F97F95;
  --doppla-status-warning-inlay: transparent;
  --doppla-status-serious-inlay: transparent;
}