/* ============================================================
   TILT.AI — Design System Variables
   Typography & color matched exactly to HDShips Portal
   ============================================================ */

:root {

  /* === BRAND COLORS (portal-exact) === */
  --dark-blue:    #031626;
  --baltic-sea:   #002F46;
  --shell-coral:  #066D89;
  --aqua:         #07D9D9;
  --aqua-dim:     rgba(7, 217, 217, 0.10);
  --aqua-glow:    rgba(7, 217, 217, 0.06);
  --aqua-border:  rgba(7, 217, 217, 0.28);
  --seafoam:      #61FFF7;

  /* Neutral scale (portal-exact) */
  --n900: #0A0F14;
  --n800: #131C24;
  --n700: #2A3440;
  --n600: #3D4F5E;
  --n500: #5A6A78;
  --n400: #7A8D9B;
  --n300: #94A3B3;
  --n200: #B8C4CF;
  --n100: #D4DCE4;
  --white: #FFFFFF;

  /* Status / semantic colors */
  --color-success: #1eff8e;   /* UI green — active/positive data states */
  --color-warning: #fb923c;   /* Warning orange (exception paths, hard failures) */
  --color-amber:   #fbbf24;   /* System-update amber (informational alerts, temporary conditions) */
  --color-alert:   #dc2626;   /* Danger red (do-not-connect, do-not-book) */

  /* Glass card bg (portal-exact) */
  --card-glass: rgba(3, 22, 38, 0.55);
  --card-bg:    #131C24;

  /* === TYPOGRAPHY (portal-exact) === */

  /* Apotek Condensed for headings, Inter for body + mono */
  --font-hed:  'apotek-cond', sans-serif; /* headings — 900 weight, uppercase */
  --font-body: 'Inter', sans-serif;       /* body — 400/600 weight */
  --font-mono: 'Inter', sans-serif;       /* data, labels */

  /* Heading style rules */
  --hed-weight:    800;
  --hed-transform: uppercase;
  --hed-tracking:  0.06em;
  --hed-leading:   1.0;

  /* Body style rules */
  --body-weight:   400;
  --body-leading:  1.75;
  --body-tracking: 0.01em;

  /* === BORDERS === */
  --border-thin: rgba(255, 255, 255, 0.06);
  --border-mid:  rgba(255, 255, 255, 0.10);
  --border-hi:   rgba(255, 255, 255, 0.18);
  --border-aqua: rgba(7, 217, 217, 0.28);

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === LAYOUT === */
  --container-max:    1320px;
  --container-narrow: 840px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* === RADIUS (portal-matched: 14-16px cards) === */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm:   0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.8);
  --shadow-aqua: 0 12px 32px rgba(7,217,217,0.12), 0 4px 12px rgba(0,0,0,0.3);

  /* === TRANSITIONS === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* portal spring */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-expo:   cubic-bezier(0.87, 0, 0.13, 1);    /* motion standard */
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    500ms;
  --dur-slower:  850ms;
  --t-motion:    410ms;   /* single-phase transition */
  --t-phase:     200ms;   /* per morph step */

  /* === Z-INDEX === */
  --z-bg:      -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-nav:      300;
}

/* ── Text-wrap (brand spec) ─────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ── Mobile menu fix ───────────────────────────────────────────
   The open hamburger menu used backdrop-filter over a translucent
   bg, which renders as a milky white wash on mobile Safari and
   obscures the (muted grey) links. Force a solid opaque dark panel
   with white text. !important beats the per-page inline styles. */
@media (max-width: 860px) {
  .nav-links.mobile-open {
    background: #031626 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid rgba(7, 217, 217, 0.22) !important;
  }
  .nav-links.mobile-open a { color: #ffffff !important; }
}

/* ── Mobile menu offset + hero legibility ──────────────────────
   1. Base .nav-links is centred with translateX(-50%); the open
      state set left:0 but never reset the transform, sliding the
      panel off-screen. Reset it.
   2. The hero tagline sits over a moving white light-beam graphic;
      add a dark text halo so white text stays readable over it. */
@media (max-width: 860px) {
  .nav-links.mobile-open {
    transform: none !important;
    left: 0 !important; right: 0 !important; width: auto !important;
  }
  .hero-content {
    text-shadow: 0 2px 16px rgba(3, 22, 38, 0.95), 0 1px 4px rgba(3, 22, 38, 0.9);
  }
  .hero-content .hero-sub, .hero-sub { color: #ffffff !important; }
}