/* Breckly design tokens. Brand primitives first, then the two themes. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-600.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-800.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/martian-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Registered so a product switch can ease the accent instead of snapping. */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #0A5CFF; }
@property --btn { syntax: "<color>"; inherits: true; initial-value: #0A5CFF; }

:root {
  /* Brand primitives, sampled from logo.png and tuned for contrast. */
  --encre: #061641;      /* wordmark ink */
  --abysse: #00235E;     /* first pillar */
  --bleu: #0A5CFF;       /* second pillar, primary action */
  --cyan: #0BD9F8;       /* third pillar glow */
  --brique: #E8173A;     /* the red block on the k: attention only */

  /* Ardoise: cool neutrals tinted toward the ink hue. */
  --ardoise-0: #FFFFFF;
  --ardoise-25: #F8FAFD;
  --ardoise-50: #F3F6FB;
  --ardoise-100: #E8EDF5;
  --ardoise-200: #D5DCE8;
  --ardoise-300: #B6C0D3;
  --ardoise-400: #8D98B1;
  --ardoise-500: #636E8A;
  --ardoise-600: #4A5571;
  --ardoise-700: #343E5A;
  --ardoise-800: #1F2844;
  --ardoise-900: #0F1630;
  --ardoise-950: #070D1F;

  /* Current app (set by the app switcher). */
  --p-accent: #0A5CFF;
  --p-accent-dk: #4F8DFF;
  --p-deep: #00235E;
  --p-mid: #0A5CFF;
  --p-glow: #0BD9F8;

  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-xs: 5px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 17px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rail-w: 224px;
  --top-h: 52px;

  color-scheme: light;
}

[data-theme="light"] {
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --surface-2: #F7F9FD;
  --sunken: #EDF1F7;
  --line: #E2E7F0;
  --line-strong: #CDD5E3;
  --ink: #0B1633;
  --ink-2: #46526E;
  --ink-3: #5F6A86;
  --wm-ink: var(--encre);

  --rail-bg: var(--encre);
  --rail-ink: #B4BFDB;
  --rail-hover: rgba(255, 255, 255, 0.06);
  --rail-active: rgba(255, 255, 255, 0.1);
  --rail-line: rgba(255, 255, 255, 0.09);

  --accent: var(--p-accent);
  --btn: var(--p-accent);
  --accent-soft: color-mix(in oklab, var(--p-accent) 10%, var(--surface));
  --accent-line: color-mix(in oklab, var(--p-accent) 35%, var(--surface));

  --ok: #0F7F57;        --ok-mark: #16A36F;
  --wait: #9A5B00;      --wait-mark: #F2A516;
  --crit: #C8102E;      --crit-mark: var(--brique);

  --series: #0A5CFF;
  --grid: #E6EAF2;

  --shadow-1: 0 1px 2px rgba(11, 22, 51, 0.05), 0 4px 14px -6px rgba(11, 22, 51, 0.08);
  --shadow-pop: 0 22px 50px -14px rgba(6, 22, 65, 0.3), 0 2px 6px rgba(6, 22, 65, 0.08);
  --arch-a: 0.13;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070D1F;
  --surface: #0D152D;
  --surface-2: #111B37;
  --sunken: #0A1127;
  --line: #1C2643;
  --line-strong: #2B3659;
  --ink: #E9EEF9;
  --ink-2: #AEB8D1;
  --ink-3: #8C98B5;
  --wm-ink: #FFFFFF;

  --rail-bg: #061641;
  --rail-ink: #A9B4D2;
  --rail-hover: rgba(255, 255, 255, 0.05);
  --rail-active: rgba(255, 255, 255, 0.09);
  --rail-line: rgba(255, 255, 255, 0.07);

  --accent: var(--p-accent-dk);
  --btn: var(--p-accent);
  --accent-soft: color-mix(in oklab, var(--p-accent-dk) 14%, var(--surface));
  --accent-line: color-mix(in oklab, var(--p-accent-dk) 40%, var(--surface));

  --ok: #3DD598;        --ok-mark: #2FC285;
  --wait: #FFC14D;      --wait-mark: #F5B020;
  --crit: #FF6B7F;      --crit-mark: #FF3B55;

  --series: #4F8DFF;
  --grid: #1A2441;

  --shadow-1: none;
  --shadow-pop: 0 26px 60px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line-strong);
  --arch-a: 0.2;
}