/* ==========================================================================
   NODEWORK design tokens – the ONLY place for colours, type, spacing & motion.
   Themes: light (default) · dark · contrast. The active theme is set as
   html[data-theme] by assets/js/theme-init.js (system preference or choice).
   ========================================================================== */

:root {
  /* Brand (NODEWORK corporate colours) */
  --brand-sand: #c5a992;
  --brand-sand-dark: #b09478;
  --brand-sand-light: #e5d5c4;
  --brand-ink: #2c2b29;

  /* Surfaces & text (light) */
  --c-bg: #fafaf9;
  --c-bg-alt: #f5f4f2;
  --c-surface: #ffffff;
  --c-surface-2: #f7f3ef;
  --c-ink: var(--brand-ink);
  --c-text: var(--brand-ink);
  --c-muted: #5a5753;
  --c-border: #e8e6e3;
  --c-border-strong: #d6d0c9;

  /* Accent: --c-accent for text/lines (darkened sand, WCAG AA on light),
     --c-accent-fill for areas (corporate sand with dark text) */
  --c-accent: #86664b;
  --c-accent-strong: #6e523b;
  --c-accent-fill: var(--brand-sand);
  --c-accent-fill-hover: var(--brand-sand-dark);
  --c-on-accent: var(--brand-ink);
  --c-accent-soft: #f1e8df;
  --c-sand: var(--brand-sand);
  --c-sand-soft: #f7f3ef;
  --c-logo: var(--brand-sand);
  --c-logo-word: var(--brand-sand);
  --c-logo-nav: var(--brand-ink);

  /* Dark band (footer, menu, featured cards) */
  --c-band: var(--brand-ink);
  --c-on-band: #fafaf9;
  --c-on-band-muted: #cfc9c2;

  /* Feedback */
  --c-success: #1f7a4d;
  --c-success-soft: #e3f3ea;
  --c-danger: #b42318;
  --c-danger-soft: #fdeceb;
  --c-focus: #005fcc;

  /* Typography */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);
  --fs-hero: clamp(2.7rem, 1.6rem + 4.8vw, 5.6rem);
  --lh-tight: 1.05;
  --lh-head: 1.15;
  --lh-body: 1.65;
  --tracking-tight: -0.035em;
  --tracking-wide: 0.14em;

  /* Spacing (8px rhythm) */
  --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: 4.5rem;
  --space-section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* Layout */
  --container: 1240px;
  --container-narrow: 820px;
  --header-h: 4.25rem;
  --tabbar-h: 4.25rem;

  /* Shape */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 1.5rem;
  --radius-pill: 999px;
  --bw: 1px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(44 43 41 / 0.06);
  --shadow: 0 10px 30px -12px rgb(44 43 41 / 0.16);
  --shadow-lg: 0 30px 60px -24px rgb(44 43 41 / 0.26);
  --glass: rgb(255 255 255 / 0.78);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 600ms;

  /* Layers */
  --z-header: 50;
  --z-tabbar: 60;
  --z-popover: 80;
}

/* Dark ------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --c-bg: #232322;
  --c-bg-alt: #1a1a1a;
  --c-surface: #2f2f2f;
  --c-surface-2: #353432;
  --c-ink: #ffffff;
  --c-text: #f2f1ef;
  --c-muted: #afafaf;
  --c-border: #3d3c3a;
  --c-border-strong: #57544f;

  --c-accent: var(--brand-sand);
  --c-accent-strong: var(--brand-sand-light);
  --c-accent-fill: var(--brand-sand);
  --c-accent-fill-hover: var(--brand-sand-light);
  --c-on-accent: var(--brand-ink);
  --c-accent-soft: #3b342d;
  --c-sand: var(--brand-sand);
  --c-sand-soft: #2c2926;
  --c-logo: var(--brand-sand);
  --c-logo-word: var(--brand-sand);
  --c-logo-nav: var(--brand-sand);

  --c-band: #1a1a1a;
  --c-on-band: #fafaf9;
  --c-on-band-muted: #afafaf;

  --c-success: #5cc98f;
  --c-success-soft: #14301f;
  --c-danger: #ff8a80;
  --c-danger-soft: #3b1614;
  --c-focus: #7ab7ff;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-lg: 0 30px 70px -24px rgb(0 0 0 / 0.75);
  --glass: rgb(47 47 47 / 0.78);
}

/* High contrast (WCAG AAA oriented, no decoration) ---------------------- */
:root[data-theme="contrast"] {
  --c-bg: #000000;
  --c-bg-alt: #000000;
  --c-surface: #000000;
  --c-surface-2: #000000;
  --c-ink: #ffffff;
  --c-text: #ffffff;
  --c-muted: #ffffff;
  --c-border: #ffffff;
  --c-border-strong: #ffffff;

  --c-accent: #ffe600;
  --c-accent-strong: #ffe600;
  --c-accent-fill: #ffe600;
  --c-accent-fill-hover: #ffffff;
  --c-on-accent: #000000;
  --c-accent-soft: #000000;
  --c-sand: #ffffff;
  --c-sand-soft: #000000;
  --c-logo: #ffe600;
  --c-logo-word: #ffe600;
  --c-logo-nav: #ffe600;

  --c-band: #000000;
  --c-on-band: #ffffff;
  --c-on-band-muted: #ffffff;

  --c-success: #7dff9c;
  --c-success-soft: #000000;
  --c-danger: #ff9e9e;
  --c-danger-soft: #000000;
  --c-focus: #00ffff;

  --bw: 2px;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --glass: #000000;
}