/* ============================================
   nwdesigns — Design Tokens
   Refined Italian Minimalism, JULY 2026
   Source of truth: design-prompts/nwdesigns/DESIGN.md
   (Figma 4JcyA3DLRqFfLETKk1dmB2)
   ============================================ */

:root {
  /* ---- Brand palette ---- */
  --nw-primary: #d61313; /* Brand Red — THE accent */
  --nw-schwarz: #1e1e1e; /* Schwarz Black — dark surfaces, headline ink */
  --nw-eggshell: #fdfdf6; /* Egg Shell — default page background */
  --nw-white: #ffffff;

  /* ---- Neutral ramp (9 steps) ----
     100-400 backgrounds · 500-700 borders · 800-900 body text */
  --nw-neutral-100: #f7f7f7;
  --nw-neutral-200: #f0f0f0;
  --nw-neutral-300: #e8e8e8;
  --nw-neutral-400: #e1e1e1;
  --nw-neutral-500: #d9d9d9;
  --nw-neutral-600: #aeaeae;
  --nw-neutral-700: #828282;
  --nw-neutral-800: #575757;
  --nw-neutral-900: #2b2b2b;

  /* ---- UI grays (published paint styles) ---- */
  --nw-ui-black: #000000; /* UI chrome + card chip ONLY — never body copy */
  --nw-gray10: #f4f4f4; /* hover background */
  --nw-gray10-hover: #e8e8e8; /* pressed background */
  --nw-gray20: #e0e0e0; /* borders, dividers */

  /* ---- LOGO PALETTE — NOT UI COLORS ----
     Reserved exclusively for logo/wordmark artwork. Never use these for
     text, borders, backgrounds or buttons. The UI accent is --nw-primary
     (#D61313); the logo red (#E21518) must never stand in for it. */
  --logo-petrol: #053238; /* W emblem + wordmark ink on light */
  --logo-red: #e21518; /* red stroke in the W emblem */
  --logo-wordmark-dark: #f2f2f2; /* wordmark on dark backgrounds */
  --pinworth-ink: #023238; /* Pinworth corporate lockup only */
  --pinworth-red: #af1918; /* Pinworth corporate lockup only */

  /* ---- Semantic aliases (what page CSS should reference) ---- */
  --nw-background: var(--nw-eggshell);
  --nw-background-alt: var(--nw-neutral-100);
  --nw-surface-dark: var(--nw-schwarz);
  --nw-foreground: var(--nw-neutral-900);
  --nw-foreground-secondary: var(--nw-neutral-800);
  /* Secondary text. Context-dependent for WCAG AA on small text: the spec's
     #828282 only reaches 3.76:1 on Egg Shell, so light surfaces step down to
     neutral-800 (7.07:1). Dark surfaces must go the OTHER way — neutral-800 on
     Schwarz is 2.31:1 — so they step up to neutral-600 (7.51:1). */
  --nw-muted: var(--nw-neutral-800);
  --nw-border: var(--nw-gray20);
  --nw-accent: var(--nw-primary);
  --nw-accent-hover: #a50f0f; /* UNRATIFIED — hover fill unpublished in Figma */

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  /* The main site's house easing, ported 2026-07-31. Slightly less abrupt than
     --ease-standard, which is why it carries the longer entrance moves (reveals,
     showcase) while --ease-standard keeps the short state changes it already owns. */
  --ease-house: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease-standard);
  --transition-normal: 300ms var(--ease-standard);
  --transition-slow: 500ms var(--ease-standard);

  /* ---- Typography — the only tracked text in the system ---- */
  --ls-card-service: 3.5px;

  /* ---- Z-Index Scale ---- */
  --z-cursor-ring: 9999;
  --z-cursor-dot: 10000;
  --z-navbar: 50;
  --z-floating-cta: 50;
  --z-cookie-bar: 60;
}

/* Dark surfaces invert the muted step — see --nw-muted above. */
[data-cursor-light] {
  --nw-muted: var(--nw-neutral-600);
}

/* ---- Base Styles ---- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--nw-background);
  color: var(--nw-foreground);
}

/* ---- Selection Color ---- */
::selection {
  background: var(--nw-primary);
  color: var(--nw-white);
}

::-moz-selection {
  background: var(--nw-primary);
  color: var(--nw-white);
}

/* ---- Focus Visible ---- */
:focus-visible {
  outline: 2px solid var(--nw-primary);
  outline-offset: 2px;
}

/* Remove focus outline when using mouse */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---- Print Styles ---- */
@media print {
  nav,
  .floating-cta {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}