/* ==========================================================================
   Covio JSR — design tokens.

   The only source of visual truth. Every colour, type size, space, radius and
   duration in this app comes from a custom property declared here. A view or a
   component stylesheet that writes a raw hex code, a font stack or a pixel
   value is a bug, not a shortcut.

   Covio's language: dark identity surfaces carrying teal signals, light work
   surfaces carrying ink. Teal is the signal colour and belongs on dark; on
   light it is always a deepened teal, never the bare signal colour.
   ========================================================================== */

/* --- Fonts. Self-hosted latin subsets; nothing is fetched from a third
       party, which is also what the CSP allows (font-src 'self'). ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
}

:root {
  /* --- Brand ------------------------------------------------------------ */
  --covio-dark: #070C16;        /* brand surfaces: auth panel, topbar */
  --covio-ink: #13203A;         /* text on light */
  --covio-paper: #E9EEF7;       /* text on dark */
  --covio-light: #F2F5FA;       /* work background */
  --covio-teal: #3FE0C5;        /* THE signal colour — dark surfaces only */
  --covio-teal-deep: #14B8A0;   /* teal on light: fills, rings, non-text marks */
  --covio-blue: #3E8BFF;        /* secondary accent */

  /* Teal on light where the colour has to carry meaning on its own — link
     text, focus rings, interactive labels. --covio-teal-deep is only 2.5:1
     against white, which fails AA for text (4.5:1) and the non-text minimum
     for a focus indicator (3:1). This is the same value Covio's own site uses
     for links, and it clears both at 4.97:1. */
  --covio-teal-link: #0A7E6F;

  /* --- Semantic --------------------------------------------------------- */
  --success: #14B8A0;
  --danger: #E5484D;
  --warning: #F5A524;
  --info: #3E8BFF;
  --muted-ink: rgba(19, 32, 58, .62);
  --line: rgba(19, 32, 58, .12);
  --surface: #FFFFFF;

  /* Darker variants of the semantic colours, for text and icons on light,
     where the pure hue does not clear AA. */
  --success-ink: #0E8A78;
  --danger-ink: #B3383C;
  --warning-ink: #9A6A10;
  --info-ink: #2B62B9;

  /* --- On dark ---------------------------------------------------------- */
  --paper-100: #E9EEF7;
  --paper-62: rgba(233, 238, 247, .62);
  --paper-38: rgba(233, 238, 247, .38);
  --line-dark: rgba(233, 238, 247, .09);
  --surface-dark: #0B1322;      /* one step up from --covio-dark, for insets */

  /* --- Status pills. Fixed pairs; never mix a fill with another ink. ----- */
  --pill-active-fill: rgba(20, 184, 160, .12);
  --pill-active-ink: #0E8A78;
  --pill-inactive-fill: rgba(229, 72, 77, .12);
  --pill-inactive-ink: #B3383C;
  --pill-pending-fill: rgba(245, 165, 36, .14);
  --pill-pending-ink: #9A6A10;
  --pill-neutral-fill: rgba(19, 32, 58, .08);
  --pill-neutral-ink: var(--muted-ink);
  --pill-info-fill: rgba(62, 139, 255, .12);
  --pill-info-ink: #2B62B9;

  /* --- Type ------------------------------------------------------------- */
  --ff-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --ff-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-page-title: 28px;
  --lh-page-title: 34px;
  --fs-section-title: 22px;
  --lh-section-title: 28px;
  --fs-body: 15px;
  --lh-body: 22px;
  --fs-secondary: 13px;
  --lh-secondary: 18px;
  --fs-caption: 12px;
  --lh-caption: 16px;
  --fs-mono: 12px;
  --lh-mono: 16px;
  --ls-mono: .18em;             /* eyebrows, table headers, codes, timestamps */

  /* --- Space. An 8-px rhythm, with 4 for the tight cases. ---------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Radius ----------------------------------------------------------- */
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 999px;

  /* --- Elevation. Borders over shadows on light; a shadow means "this
         floats above the page". ---------------------------------------- */
  --shadow-overlay: 0 12px 32px rgba(7, 12, 22, .16);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --motion-micro: 150ms;        /* hover, focus, colour */
  --motion-standard: 220ms;     /* in-page state change */
  --motion-overlay: 300ms;      /* drawer, modal, toast */

  /* --- Focus. Visible on everything interactive, no exceptions. --------- */
  --focus-ring: 2px solid var(--covio-teal-link);
  --focus-offset: 2px;
  --focus-ring-dark: 2px solid var(--covio-teal);

  /* --- Hit target ------------------------------------------------------- */
  --hit: 44px;
}

/* Motion is decoration. When the operator has asked the machine to stop
   moving, every animation and transition in the app stops — including the
   route schematic, which keeps its drawn line and loses only the travel. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}