/* ==========================================================================
   YASDER MARINE — Design tokens
   Single source of truth for colour, type, space, motion and elevation.
   Raw hex values must never appear outside this file.
   ========================================================================== */

:root {
  /* ---- Brand greens: sampled from the official logo plate ---------------- */
  --green-900: #021011; /* deepest surface — footer, hero scrim */
  --green-800: #04211f;
  --green-700: #002d2b; /* the logo plate colour — signature surface */
  --green-600: #094442;
  --green-500: #12605c; /* hover / hairline on dark */
  --green-400: #2c817b;

  /* ---- Gold: sampled from the logo mark. Used very sparingly ------------- */
  --gold-500: #c08f45;
  --gold-300: #d9b87a;

  /* ---- Product orange: sampled from the YASDER lashing webbing ----------- */
  --orange-700: #c22f00; /* text + solid buttons (5.67:1 on white) */
  --orange-500: #e03a00; /* graphic fills, rules, icons — never small text */
  --orange-400: #f0561f;

  /* ---- Neutrals --------------------------------------------------------- */
  --white: #ffffff;
  --paper: #faf9f7; /* warm off-white — the dominant page ground */
  --paper-2: #f2f0ec; /* alternating band */
  --line: #e2e0da; /* 1px hairline on light */
  --line-strong: #cfccc4;
  --ink: #14201f; /* body text — green-tinted near black */
  --ink-2: #4d5654; /* secondary text (7.2:1 on paper) */
  --ink-3: #666e6c; /* meta / captions on light (4.97:1 on paper, 4.60:1 on paper-2) */

  /* ---- On-dark neutrals ------------------------------------------------- */
  --on-dark: #f4f2ee;
  --on-dark-2: #b9c4c1; /* 8.9:1 on --green-700 */
  --on-dark-3: #8a9895;
  --line-dark: rgba(217, 231, 227, 0.16);

  /* ---- Semantic --------------------------------------------------------- */
  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--orange-700);
  --accent-graphic: var(--orange-500);
  --focus: var(--orange-500);
  --error: #a52208;
  --success: #1c6b46;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --step--2: 0.75rem;                                  /* 12 */
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);  /* body */
  --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);   /* lead */
  --step-2: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);  /* h3 */
  --step-3: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);   /* h2 */
  --step-4: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);       /* page h1 */
  --step-5: clamp(2.375rem, 1.5rem + 4.2vw, 4.75rem);  /* hero h1 */

  --lh-tight: 1.06;
  --lh-heading: 1.14;
  --lh-body: 1.68;

  --track-tight: -0.022em;
  --track-label: 0.16em;

  /* ---- Space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-y: clamp(4.5rem, 8.5vw, 9.5rem);
  --section-y-tight: clamp(3.25rem, 6vw, 6rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4.5vw, 4rem);
  --header-h: 74px;
  --radius: 2px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 180ms;
  --dur-2: 280ms;
  --dur-3: 420ms;
  --dur-4: 620ms;

  /* ---- Layers ----------------------------------------------------------- */
  --z-menu: 100;
  --z-header: 110;
  --z-skip: 120;
}

@media (min-width: 1024px) {
  :root { --header-h: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
}