/*
 * Design tokens. The first :root block is copied verbatim from the Steamops landing page,
 * ../steamops_site/styles.css, on 2026-10-14 (CLAUDE.md, Design). Do not edit it here; a test
 * compares it with the site when the site is checked out next to this repository.
 *
 * Everything after it is Palafin's own: --app- tokens and the self-hosted fonts. No colour,
 * radius or font value is written anywhere but this file (src/web/styles/design.test.ts).
 */

:root {
  --accent: #7BD0FD;            /* brand cyan (per brand book) */
  --accent-2: #7e96b0;           /* steel blue (logo / mountain) */
  --accent-3: #b8c8d6;           /* haze */
  --accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
  --bg-dark: #0e1a2a;            /* deep night-mountain */
  --bg-darker: #07101c;
  --bg-light: #f4f6fa;           /* mountain sky */
  --bg-light-2: #e7ecf3;
  --ink: #0e1a2a;
  --ink-2: #1c2a3d;
  --ink-mute: #5a6b80;
  --line: rgba(14, 26, 42, 0.1);
  --line-dark: rgba(184, 200, 214, 0.14);

  /* Brand identity (from official brand book) */
  --brand-navy: #15243F;
  --brand-cyan: #7BD0FD;
  --brand-orange: #DE4E13;
  --brand-ink: #1F2022;
  --white-soft: rgba(244, 246, 250, 0.9);
  --white-mute: rgba(184, 200, 214, 0.6);
  --radius: 18px;
  --radius-sm: 10px;
  --max: 1240px;
  --pad: clamp(20px, 4vw, 56px);

  /* Mountain palette (light scene) */
  --mtn-sky-top: #f4f6fa;
  --mtn-sky-bot: #e6ecf3;
  --mtn-0: #c8d4e1;
  --mtn-1: #a7b9cd;
  --mtn-2: #7e96b0;
  --mtn-3: #5b7794;
  --mtn-4: #3d5876;
  --mtn-cloud: rgba(255,255,255,0.7);
}

/* Palafin app tokens ---------------------------------------------------------------------- */

:root {
  /* Type. IBM Plex Sans with the site's stylistic sets; Roboto only inside the Google button,
     as Google's sign-in button guidelines ask. */
  --app-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui,
    sans-serif;
  --app-font-google: 'Roboto', arial, sans-serif;
  --app-font-features: 'ss01', 'ss03';
  --app-text-label: 10.5px;
  --app-text-kicker: 11px;
  --app-text-sm: 13px;
  --app-text-table: 13.5px;
  --app-text-md: 14px;
  --app-text-base: 14.5px;
  --app-text-lg: 16px;
  --app-text-stat: 24px;
  --app-text-title: 28px;
  --app-text-title-sm: 22px;
  --app-weight-regular: 400;
  --app-weight-medium: 500;
  --app-weight-semibold: 600;

  /* Surfaces and text */
  --app-surface: #ffffff;
  --app-on-ink: #ffffff;
  --app-ink-hover: var(--ink-2);
  --app-ghost-hover: rgba(10, 10, 10, 0.05);
  --app-topbar-fill: color-mix(in srgb, var(--bg-light) 85%, transparent);
  --app-shadow-button: 0 6px 22px -8px rgba(10, 10, 10, 0.5);
  --app-shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.55);
  /* The sign-in screen: the site's dark sections, with its soft cyan glow at the top. */
  --app-signin-glow: radial-gradient(
    ellipse at 20% 0%,
    color-mix(in srgb, var(--accent) 16%, transparent),
    transparent 55%
  );
  --app-row-hover: var(--bg-light);
  --app-header-fill: var(--bg-light);

  /* Orange as text or as a fill under white text. The brand orange is 4.0:1 on white, below
     WCAG AA for small text, so text and danger fills use this darker shade (5.0:1 on white). */
  --app-orange-text: #c4440f;
  --app-danger: #c4440f;
  --app-danger-hover: #a8390c;

  /* Status fills and borders. Text on them is always ink; cyan is never text. */
  --app-status-ok-fill: color-mix(in oklch, var(--brand-cyan) 30%, #ffffff);
  --app-status-ok-border: var(--brand-cyan);
  --app-status-neutral-fill: var(--bg-light-2);
  --app-status-neutral-border: var(--line);
  --app-status-warn-fill: #fdecd9;
  --app-status-warn-border: #f0b48f;
  --app-status-danger-fill: #fbe3d9;
  --app-status-danger-border: var(--brand-orange);
  /* Ink on the danger fill: the orange text was 4.1:1 there, below AA (WEB-1). The word, the
     glyph and the orange border carry the meaning. */
  --app-status-danger-text: var(--ink);

  /* Focus: an ink outline (visible on every surface) with a cyan halo. */
  --app-focus-ring: 0 0 0 4px color-mix(in oklch, var(--brand-cyan) 60%, transparent);
  --app-focus-outline: var(--ink);
  --app-focus-outline-on-dark: var(--brand-cyan);

  /* Shapes and density */
  --app-radius-pill: 999px;
  --app-row-height: 40px;
  --app-content-max: 1440px;
  --app-pad: clamp(16px, 3vw, 32px);

  /* Google's sign-in button, light theme (developers.google.com/identity/branding-guidelines). */
  --app-google-fill: #ffffff;
  --app-google-stroke: #747775;
  --app-google-text: #1f1f1f;
  --app-google-hover: #f2f2f2;
}

/* Self-hosted fonts, Latin subset (from @fontsource/ibm-plex-sans and @fontsource/roboto). The
   urls name files under /static; the server swaps in their hashed names. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/static/ibm-plex-sans-latin-400-normal.3b646991d300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/ibm-plex-sans-latin-500-normal.0717336fb31f.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/static/ibm-plex-sans-latin-600-normal.8960851d691c.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/static/roboto-latin-500-normal.5bcc3aa180e7.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}