/* Naos design tokens: the single source of colour, type, spacing, radii and shadows.
   Only custom properties, light theme only (no dark mode). Warm paper, ink, one
   signal orange and an olive, with hairlines instead of shadows. Role tokens
   point at the brand tokens, so every hex value appears once. */

:root {
  /* Brand */
  --naos-paper: #f3f3ee;
  --naos-paper-2: #ebebe3;
  --naos-white: #fbfbf8;
  --naos-ink: #302b28;
  --naos-ink-2: #69695d;
  --naos-line: #cecebf;
  --naos-orange: #f43e01;
  --naos-orange-cta: #c23101;
  --naos-orange-deep: #a32a01;
  --naos-orange-soft: #ffd1a3;
  --naos-olive: #475c05;
  --naos-terminal: #26292e;
  --naos-on-color: #ffffff;
  --naos-red: #a8182c;
  --naos-red-light: #f08a80;
  --naos-olive-light: #a9bf63;
  --naos-stone: #b9b9aa;

  /* Roles */
  --color-bg: var(--naos-paper);
  --color-surface: var(--naos-white);
  --color-surface-strong: var(--naos-paper-2);
  --color-border: var(--naos-line);
  --color-text: var(--naos-ink);
  --color-text-muted: var(--naos-ink-2);
  --color-primary: var(--naos-orange-cta);
  --color-primary-hover: var(--naos-orange-deep);
  --color-on-primary: var(--naos-on-color);
  --color-accent: var(--naos-orange);
  --color-accent-text: var(--naos-orange-cta);
  --color-accent-soft: var(--naos-orange-soft);
  --color-focus: var(--naos-orange);
  --color-success: var(--naos-olive);
  --color-on-success: var(--naos-paper);
  --color-danger: var(--naos-red);
  --color-code-bg: var(--naos-paper-2);
  --color-logo: var(--naos-ink);
  --color-logo-mark: var(--naos-orange);
  --color-bar: var(--naos-orange);
  --color-bar-muted: var(--naos-stone);
  --color-inverse-bg: var(--naos-ink);
  --color-inverse-text: var(--naos-paper);
  --color-header-bg: rgba(243, 243, 238, 0.9);
  --color-clear: transparent;

  /* Closing block of the landing: white on the CTA orange (AA). */
  --color-final-bg: var(--naos-orange-cta);
  --color-on-final: var(--naos-on-color);
  --color-final-art: var(--naos-orange-deep);

  /* Terminal windows */
  --color-term-bg: var(--naos-terminal);
  --color-term-text: #ecebe4;
  --color-term-muted: #9a9b92;
  --color-term-add: #10e68d;
  --color-term-del: #ff8a6b;
  --color-term-ask: #fe9e20;
  --color-term-you: #5fc0ff;

  /* Typography */
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --font-size-2xs: 0.68rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.86rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.6rem;
  --font-size-2xl: clamp(2rem, 4vw, 2.8rem);
  --font-size-3xl: clamp(2rem, 4.4vw, 3.6rem);
  --font-size-display: clamp(2.6rem, 5vw, 4.4rem);
  --font-size-price: 3rem;
  --font-size-final: clamp(2.8rem, 8vw, 7rem);
  --font-size-giant: clamp(3rem, 11.5vw, 10.5rem);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --line-height-display: 1;
  --line-height-tight: 1.1;
  --line-height-body: 1.55;
  --tracking-display: -0.045em;
  --tracking-title: -0.03em;
  --tracking-label: 0.12em;

  /* Spacing (4 px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-section: clamp(4.5rem, 10vw, 8rem);
  --gutter: 16px;

  /* Layout */
  --content-max: 80rem;
  --text-max: 42rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Shadows (only the product window and a lifted card) */
  --shadow-window: 0 30px 60px -30px rgba(48, 43, 40, 0.35);
  --shadow-lift: 0 20px 40px -24px rgba(48, 43, 40, 0.4);
}

/* Dark set of the naos code terminal UI (clients/naos-code/scripts/palette.mjs
   reads it for terminals with a dark background). The web never uses this class:
   the site stays light only. Every role reads AA (4.5:1) on --naos-terminal
   except the brand orange (3.85:1), which only marks the title and the prompt. */
.naos-terminal-dark {
  --color-primary: var(--naos-orange);
  --color-accent-text: var(--naos-orange-soft);
  --color-text: var(--naos-paper);
  --color-text-muted: var(--naos-stone);
  --color-success: var(--naos-olive-light);
  --color-danger: var(--naos-red-light);
}