/*
 * site.css — site-level design tokens and typefaces.
 *
 * Primitives (--color-*) come from signalflag-tokens.css, generated from the
 * Figma design system and linked before this file. Everything here is a
 * semantic alias the site owns, so a palette change is one edit; components
 * (src/components, src/pages) carry their own scoped styles and reference
 * these tokens rather than hex values. The base reset and the rich-text
 * (.sf-prose) styles live in src/layouts/SiteLayout.astro.
 *
 * --sf-color-bg is set directly: the Figma marketing frames use #0b0b1e, while
 * the generated --marketing-site-background token still says #0a0b16.
 */
:root {
  /* Surfaces and text */
  --sf-color-bg: #0b0b1e;
  --sf-color-text: var(--color-neutral-white, #ffffff);
  --sf-color-text-inverse: var(--color-neutral-black, #17171c);
  --sf-color-surface-raised: color-mix(in srgb, var(--sf-color-bg) 90%, var(--sf-color-brand));

  /* Accent: brand yellow */
  --sf-color-accent: var(--color-brand-yellow-500, #fbbc28);

  /* Brand: blue */
  --sf-color-brand: var(--color-brand-blue-500, #7ca0fb);
  --sf-color-brand-700: var(--color-brand-blue-700, #517dea);
  --sf-color-brand-900: var(--color-brand-blue-900, #2659d9);

  /* Text ramp (design-system content/* roles) */
  --sf-color-text-secondary: var(--color-gray-200, #dfdfe4);
  --sf-color-text-tertiary: var(--color-gray-300, #c7c7d1);
  --sf-color-text-quaternary: var(--color-gray-400, #8d8d96);

  /* Borders and panels */
  --sf-color-border: var(--color-gray-500, #474754);
  --sf-color-border-soft: var(--color-gray-700, #32323d);
  --sf-color-panel: #09091c;
  --sf-color-panel-border: #525297;
  --sf-color-panel-prompt: #232342;
  --sf-color-surface-hover: #12122b;
  --sf-shadow-panel: 0 14px 31px rgba(0, 0, 0, 0.08), 0 57px 57px rgba(0, 0, 0, 0.07), 0 128px 77px rgba(0, 0, 0, 0.04);

  /* Device frames and product cards (Figma "Device frame", "product clips") */
  --sf-color-device: var(--color-neutral-black, #17171c);
  --sf-color-device-border: var(--color-gray-500, #474754);

  /* Coverage heatmap ramp (design-system blue/*), Scenario Creation Service */
  --sf-color-heat-low: var(--color-blue-100, #9eb9ff);
  --sf-color-heat-mid: var(--color-blue-500, #7097fa);
  --sf-color-heat-high: var(--color-blue-900, #3a5cb1);
  --sf-color-heat-empty: var(--color-gray-700, #32323d);

  /* Status */
  --sf-color-danger: var(--color-brand-red-500, #d04848);
  --sf-color-status-pass: #7097fa;
  --sf-color-status-warn: #ffac70;
  --sf-color-status-block: #ef6666;

  /* Type */
  --sf-font-body: Sora, sans-serif;
  --sf-font-brand: 'Circular XX', Sora, system-ui, sans-serif;
  --sf-font-button: Outfit, Sora, system-ui, sans-serif;
  --sf-font-mono: 'Gridnik', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --sf-container: 1400px;
  --sf-gutter: clamp(20px, 3.7vw, 56px);
}

/*
 * Brand faces. Circular XX is the body face, Sora (faces in /fonts/sora/) the
 * display face, Outfit 600 the nav Login button, and Foundry Gridnik the label
 * and terminal face. Named 'Gridnik' rather than 'Foundry Gridnik' to match
 * the token below.
 */
/* Named 'Gridnik', not 'Foundry Gridnik': the export declares that family
 * against a /fonts/ path that no longer exists, and any element still resolving
 * to it would 404. */
@font-face {
  font-family: 'Gridnik';
  src: url(/fonts/signalflag/FoundryGridnik-Medium.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Circular XX';
  src: url(/fonts/signalflag/CircularXXWeb-Book.woff2) format('woff2'),
    url(/fonts/signalflag/CircularXXWeb-Book.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/signalflag/Outfit-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/signalflag/Outfit-600-latin.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;
}