/*
  Design tokens from the Figma library "Boolean · Brand system".
  Names follow the WEB code syntax set on each variable (Figma "a/b" -> CSS "--a-b").
  Desktop = Figma mode "Web · Desktop" / "Desktop"; mobile (< 768px) = "Web · Mobile" / "Mobile".
  Keep this file in sync with repo/design-sistem.md in the "Job search" project.
*/
:root {
  /* Blueprint: colors */
  --color-bg: #1c1f22;
  --color-surface: #2a2f35;
  --color-text-primary: #f5f5f5;
  --color-text-muted: #adadad;
  --color-text-dim: #5e6266;
  --color-accent: #e58375;
  --color-stroke: #5e6266;
  --color-sand: #d9c8b8;

  /* Blueprint: spacing */
  --space-gap-xs: 12px;
  --space-gap-s: 16px;
  --space-gap-m: 24px;
  --space-gap-l: 40px;
  --space-gap-xl: 56px;
  --space-gap-xxl: 80px;

  /* Web layout (Desktop) */
  --layout-page-margin: 80px;
  --layout-gutter: 24px;
  --layout-section-gap: 160px;
  --layout-content-max: 1280px;
  --layout-nav-height: 72px;

  /* Type: sizes (Web · Desktop) */
  --font-size-display: 88px;
  --font-size-heading-h1: 56px;
  --font-size-body-large: 22px;
  --font-size-body-default: 18px;
  --font-size-body-small: 15px;
  --font-size-mono-label: 14px;
  --font-size-mono-caption: 13px;
  --font-size-hand-default: 22px;

  /* Type: families */
  --font-display: "League Spartan", system-ui, sans-serif;
  --font-body: "Jost", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-hand: "Architects Daughter", cursive;

  /* Background dot grid (component "Background/Dot grid · tile") */
  --dot-grid-size: 48px;
  --dot-grid-color: rgb(245 245 245 / 0.1);
}

@media (max-width: 767px) {
  :root {
    /* Web layout (Mobile) */
    --layout-page-margin: 20px;
    --layout-gutter: 16px;
    --layout-section-gap: 96px;
    --layout-nav-height: 60px;

    /* Type: sizes (Web · Mobile) */
    --font-size-display: 48px;
    --font-size-heading-h1: 36px;
    --font-size-body-large: 18px;
    --font-size-body-default: 16px;
    --font-size-body-small: 14px;
    --font-size-mono-label: 12px;
    --font-size-mono-caption: 12px;
    --font-size-hand-default: 18px;
  }
}