@import "./palette.css";

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Space Grotesk", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  /* Keep these identity anchors unchanged. */
  --color-scout-blue: #21497b;
  --color-thinker-orange: #eb7114;
  --color-builder-green: #47a036;
  --color-auditor-red: #971607;
  --color-core-graphite: #443a3b;
  --color-black: #000000;
  --color-white: #ffffff;

  /* Restrained shades derived from the identity colors. */
  --color-scout-blue-soft: #eaf0f6;
  --color-scout-blue-border: #bdcddd;
  --color-scout-blue-strong: #17375f;
  --color-thinker-orange-soft: #fff1df;
  --color-thinker-orange-border: #f2d3ad;
  --color-thinker-orange-strong: #70420f;
  --color-thinker-orange-light: #efb47c;
  --color-builder-green-soft: #edf5ea;
  --color-builder-green-border: #bfd9b8;
  --color-builder-green-strong: #287523;
  --color-auditor-red-soft: #f8eae8;
  --color-auditor-red-border: #dfbcb6;
  --color-auditor-red-strong: #7b1105;

  /* Semantic aliases keep interface states tied to the identity palette. */
  --color-info: var(--color-scout-blue-strong);
  --color-info-accent: var(--color-scout-blue);
  --color-info-background: var(--color-scout-blue-soft);
  --color-info-border: var(--color-scout-blue-border);
  --color-success: var(--color-builder-green-strong);
  --color-success-accent: var(--color-builder-green);
  --color-success-background: var(--color-builder-green-soft);
  --color-success-border: var(--color-builder-green-border);
  --color-warning: var(--color-thinker-orange-strong);
  --color-warning-accent: var(--color-thinker-orange);
  --color-warning-background: var(--color-thinker-orange-soft);
  --color-warning-border: var(--color-thinker-orange-border);
  --color-error: var(--color-auditor-red-strong);
  --color-error-accent: var(--color-auditor-red);
  --color-error-background: var(--color-auditor-red-soft);
  --color-error-border: var(--color-auditor-red-border);

  --color-canvas: #f7f6f4;
  --color-surface: #ffffff;
  --color-surface-inverse: #292526;
  --color-surface-muted: #f1efed;
  --color-surface-hover: #f2edeb;
  --color-text: #292526;
  --color-text-muted: #70696a;
  --color-text-inverse: #f7f4f1;
  --color-text-on-dark-muted: #e3dcda;
  --color-border: #e1dedd;
  --color-border-strong: #bfb7b5;
  --color-focus: var(--color-scout-blue);
  --color-link: var(--color-scout-blue);
  --color-link-hover: var(--color-scout-blue-strong);
  --color-heading: var(--color-core-graphite);

  --font-size-small: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: 1.0625rem;
  --font-size-heading-small: 1.125rem;
  --font-size-heading: 1.5rem;
  --font-size-title: 2.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 48px rgb(41 37 38 / 7%);
}