/* ============================================================
   HDShips — Design System Variables
   Brand tokens captured from the HDShips site (theme "tilt").
   Light brand: Baltic navy, Shell teal, Sea-foam mint.
   ============================================================ */

:root {

  /* === BRAND COLOURS === */
  --white:       #ffffff;
  --smoke:       #f7f9fa;
  --shell:       #076c88;   /* primary teal */
  --baltic:      #002f46;   /* deep navy — text + dark sections */
  --seafoam:     #8be6e0;   /* mint accent */
  --neon:        #8be6e0;

  /* Baltic navy tints */
  --baltic-80:   rgba(0, 47, 70, 0.80);
  --baltic-50:   rgba(0, 47, 70, 0.50);
  --baltic-30:   rgba(0, 47, 70, 0.30);
  --baltic-16:   rgba(0, 47, 70, 0.16);
  --baltic-8:    rgba(0, 47, 70, 0.08);
  --baltic-4:    rgba(0, 47, 70, 0.04);

  /* Shell teal tints */
  --shell-100:   #076c88;
  --shell-80:    #2c839b;
  --shell-50:    #509aad;
  --shell-40:    #75b1c0;
  --shell-30:    #9ac8d2;
  --shell-20:    #bedfe5;
  --shell-10:    #e3f6f7;

  /* Neutral scale */
  --n900: #0a1922;
  --n800: #14303d;
  --n700: #2a4652;
  --n600: #45606c;
  --n500: #647a85;
  --n400: #8a9aa3;
  --n300: #aebac1;
  --n200: #d0d8dd;
  --n100: #e9eef1;

  /* Semantic */
  --color-success: #1c9e6a;
  --color-warning: #d97706;
  --color-alert:   #dc2626;

  /* Surfaces */
  --surface:       #ffffff;
  --surface-soft:  #f7f9fa;
  --card-bg:       #ffffff;
  --glass:         rgba(7, 108, 136, 0.04);

  /* Gradients */
  --grad-soft:   radial-gradient(74.7% 66.39% at 50% 0%, #ddeef0 0%, rgba(221,238,240,0) 100%);
  --grad-button: radial-gradient(100.04% 100% at 50.39% 0%, rgba(139,230,224,0.40) 0%, rgba(139,230,224,0) 100%), #076c88;

  /* === TYPOGRAPHY === */
  --font-body: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hed:  'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --hed-weight:    700;
  --body-weight:   400;
  --body-leading:  1.7;

  /* === BORDERS === */
  --border-thin: rgba(0, 47, 70, 0.08);
  --border-mid:  rgba(0, 47, 70, 0.14);
  --border-hi:   rgba(0, 47, 70, 0.22);
  --border-teal: rgba(7, 108, 136, 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:    1240px;
  --container-narrow: 800px;
  --gutter:           clamp(1.25rem, 4vw, 3rem);

  /* === RADIUS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* === SHADOWS === */
  --shadow-sm:   0 1px 3px rgba(0,47,70,0.08);
  --shadow-md:   0 6px 24px rgba(0,47,70,0.10);
  --shadow-lg:   0 16px 48px rgba(0,47,70,0.14);
  --shadow-teal: 0 12px 32px rgba(7,108,136,0.18);

  /* === MOTION === */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    500ms;

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

/* Brand text-wrap spec */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p { text-wrap: pretty; }