/* =========================================================
   GISAN SHIPYARD — Design Tokens
   Source: Stitch approved active screens (read-only inspection)
   DO NOT derive from legacy "Maritime Industrial Engineering"
   design-system asset — use these active-screen values only.
   ========================================================= */

:root {
  /* ── BRAND COLORS ─────────────────────────────────────── */
  --color-primary:               #000622;   /* Deep Navy — headings, dark sections */
  --color-primary-container:     #001a57;   /* Deeper navy for gradients */
  --color-on-primary:            #ffffff;
  --color-on-primary-fixed-variant: #304380; /* Primary button hover */

  --color-secondary:             #006688;   /* Teal Blue — CTA buttons, links */
  --color-secondary-container:   #5dcafd;   /* Bright accent — mobile sections */
  --color-on-secondary:          #ffffff;
  --color-on-secondary-container: #005370;  /* Secondary hover */

  --color-charcoal:              #121417;   /* Near-black — dark sections, footer */
  --color-off-white:             #F8F9FA;   /* Light text on dark, footer text */
  --color-steel-grey:            #8187B9;   /* Borders (use at 30% opacity) */

  /* ── SURFACE SYSTEM (light) ─────────────────────────── */
  --color-surface:               #f9f9ff;   /* Main background — very faint blue-white */
  --color-background:            #f9f9ff;
  --color-surface-lowest:        #ffffff;
  --color-surface-low:           #f2f3fc;   /* Alternating section bg */
  --color-surface-container:     #ecedf6;
  --color-surface-high:          #e6e8f0;
  --color-surface-highest:       #e1e2ea;
  --color-surface-dim:           #d8dae2;

  /* ── TEXT COLORS ────────────────────────────────────── */
  --color-on-surface:            #191c22;   /* Primary text on light */
  --color-on-surface-variant:    #454650;   /* Secondary/muted text on light */
  --color-outline:               #757681;   /* Muted text on dark, borders */
  --color-outline-variant:       #c5c6d1;   /* Ghost button borders */
  --color-inverse-primary:       #b5c4ff;   /* Muted text on dark hero sections */
  --color-inverse-surface:       #2d3037;

  /* ── INTERACTIVE ────────────────────────────────────── */
  --color-error:                 #ba1a1a;

  /* ── SPACING ────────────────────────────────────────── */
  --space-unit:           4px;
  --space-gutter:         24px;    /* Grid column gap */
  --space-margin-mobile:  20px;
  --space-margin-tablet:  40px;
  --space-margin-desktop: 80px;
  --space-section-v:      96px;    /* py-24 = 6rem = 96px */
  --space-section-v-mob:  64px;    /* py-16 mobile */

  /* ── BORDER RADIUS (Stitch override — near-square) ──── */
  --radius:         2px;    /* DEFAULT — very subtle */
  --radius-lg:      4px;
  --radius-xl:      8px;
  --radius-full:    12px;   /* Note: not pill-shaped in Stitch config */

  /* ── TYPOGRAPHY — Hanken Grotesk ─────────────────────── */
  --font-primary:   'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Display XL: 72px / 1.1lh / -0.02em / W800 */
  --text-display-xl-size:     72px;
  --text-display-xl-lh:       1.1;
  --text-display-xl-ls:       -0.02em;
  --text-display-xl-weight:   800;

  /* Headline LG: 48px / 1.2lh / -0.01em / W700 */
  --text-headline-lg-size:    48px;
  --text-headline-lg-lh:      1.2;
  --text-headline-lg-ls:      -0.01em;
  --text-headline-lg-weight:  700;

  /* Headline LG Mobile: 32px / 1.2lh / W700 */
  --text-headline-lg-mob-size:   32px;
  --text-headline-lg-mob-lh:     1.2;
  --text-headline-lg-mob-weight: 700;

  /* Headline MD: 24px / 1.3lh / W600 */
  --text-headline-md-size:    24px;
  --text-headline-md-lh:      1.3;
  --text-headline-md-weight:  600;

  /* Body LG: 18px / 1.6lh / W400 */
  --text-body-lg-size:        18px;
  --text-body-lg-lh:          1.6;

  /* Body MD: 16px / 1.5lh / W400 */
  --text-body-md-size:        16px;
  --text-body-md-lh:          1.5;

  /* Label Caps: 12px / 1.0lh / 0.1em ls / W700 — always uppercase */
  --text-label-caps-size:     12px;
  --text-label-caps-lh:       1.0;
  --text-label-caps-ls:       0.1em;
  --text-label-caps-weight:   700;

  /* Spec Data (Mono): 14px / 1.4lh / 0.02em ls / W500 */
  --text-spec-data-size:      14px;
  --text-spec-data-lh:        1.4;
  --text-spec-data-ls:        0.02em;
  --text-spec-data-weight:    500;

  /* ── TRANSITIONS ────────────────────────────────────── */
  --transition-base:  color 0.2s ease, background-color 0.2s ease,
                      border-color 0.2s ease, box-shadow 0.2s ease;
  --transition-img:   transform 0.7s ease;
}