/* COLORS — sampled from the All Things Scuba eagle-ray logo.
   Base ramp goes abyss-navy -> ocean -> teal -> aqua -> bright cyan. */
:root {
  /* ---- Brand ramp (deep to bright) ---- */
  --c-abyss:      #0A1330; /* darkest navy, deep-water backdrops */
  --c-navy:       #1A2456; /* wordmark indigo-navy — primary brand */
  --c-navy-700:   #16305F;
  --c-ocean:      #17457A; /* mid ocean blue */
  --c-teal:       #147E93; /* ray body teal */
  --c-aqua:       #17B3B8; /* secondary aqua */
  --c-cyan:       #23D3D3; /* bright cyan highlight / accent */
  --c-foam:       #D9F3F3; /* pale cyan tint */
  --c-foam-50:    #EEFAFA;

  /* ---- Warm neutral (retail sand accent) ---- */
  --c-sand:       #EDE4D2;
  --c-sand-50:    #F6F1E7;

  /* ---- Neutral ramp ---- */
  --c-ink:        #0E1526;
  --c-slate-800:  #23304A;
  --c-slate-700:  #3A4762;
  --c-slate-500:  #64708A;
  --c-slate-400:  #8994A9;
  --c-slate-300:  #C3CAD6;
  --c-slate-200:  #DEE4EC;
  --c-mist:       #E9EDF3;
  --c-surface:    #F5F8FB;
  --c-white:      #FFFFFF;

  /* ---- Semantic status ---- */
  --c-success:    #2E9E6B; /* kelp green */
  --c-warning:    #E0873A; /* reef amber */
  --c-danger:     #D8503F; /* coral red */
  --c-info:       var(--c-teal);

  /* ================= SEMANTIC ALIASES ================= */
  --brand-primary:      var(--c-navy);
  --brand-primary-ink:  var(--c-white);
  --brand-secondary:    var(--c-teal);
  --brand-accent:       var(--c-cyan);

  --text-strong:   var(--c-ink);
  --text-body:     var(--c-slate-700);
  --text-muted:    var(--c-slate-500);
  --text-on-dark:  var(--c-foam-50);
  --text-on-dark-muted: #A9C4CC;
  --text-link:     var(--c-teal);
  --text-link-hover: var(--c-ocean);

  --surface-page:   var(--c-white);
  --surface-subtle: var(--c-surface);
  --surface-card:   var(--c-white);
  --surface-sand:   var(--c-sand-50);
  --surface-foam:   var(--c-foam-50);
  --surface-dark:   var(--c-navy);
  --surface-abyss:  var(--c-abyss);

  --border-subtle:  var(--c-slate-200);
  --border-default: var(--c-slate-300);
  --border-strong:  var(--c-slate-500);
  --border-on-dark: rgba(217,243,243,0.18);

  /* Signature ocean gradient (ray body) */
  --grad-ocean:  linear-gradient(120deg, var(--c-navy) 0%, var(--c-teal) 55%, var(--c-cyan) 100%);
  --grad-deep:   linear-gradient(160deg, var(--c-abyss) 0%, var(--c-navy) 60%, var(--c-ocean) 100%);
  --grad-foam:   linear-gradient(180deg, var(--c-foam-50) 0%, var(--c-white) 100%);
}
/* TYPOGRAPHY — Spectral (display serif) + Mulish (UI/body sans). */
:root {
  --font-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --font-body:    "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale (1.25 major-third-ish, tuned) */
  --fs-display:  clamp(2.75rem, 5vw, 4.25rem); /* @kind font */
  --fs-h1:       2.75rem;     /* @kind font */
  --fs-h2:       2.125rem;    /* @kind font */
  --fs-h3:       1.5rem;      /* @kind font */
  --fs-h4:       1.25rem;     /* @kind font */
  --fs-lead:     1.1875rem;   /* @kind font */
  --fs-body:     1rem;        /* @kind font */
  --fs-sm:       0.875rem;    /* @kind font */
  --fs-xs:       0.75rem;     /* @kind font */
  --fs-eyebrow:  0.8125rem;   /* @kind font */

  --lh-tight:   1.08;   /* @kind other */
  --lh-snug:    1.25;   /* @kind other */
  --lh-normal:  1.55;   /* @kind other */
  --lh-relaxed: 1.7;    /* @kind other */

  --fw-light:  300;  /* @kind other */
  --fw-normal: 400;  /* @kind other */
  --fw-medium: 500;  /* @kind other */
  --fw-semi:   600;  /* @kind other */
  --fw-bold:   700;  /* @kind other */
  --fw-black:  800;  /* @kind other */

  /* Eyebrow / kicker — the wide-tracked label seen in the wordmark */
  --tracking-eyebrow: 0.18em;   /* @kind other */
  --tracking-wide:    0.04em;   /* @kind other */
  --tracking-tight:  -0.015em;  /* @kind other */
}
/* SPACING & RADII — 4px base grid. */
:root {
  --sp-0:  0;         /* @kind spacing */
  --sp-1:  0.25rem;  /* 4  */
  --sp-2:  0.5rem;   /* 8  */
  --sp-3:  0.75rem;  /* 12 */
  --sp-4:  1rem;     /* 16 */
  --sp-5:  1.5rem;   /* 24 */
  --sp-6:  2rem;     /* 32 */
  --sp-7:  2.5rem;   /* 40 */
  --sp-8:  3rem;     /* 48 */
  --sp-9:  4rem;     /* 64 */
  --sp-10: 5rem;     /* 80 */
  --sp-12: 7rem;     /* 112 */

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --container:      1200px;
  --container-wide: 1360px;
  --gutter:         clamp(1.25rem, 4vw, 3rem); /* @kind spacing */
}
/* SHADOWS, BORDERS, MOTION — soft cool-tinted ocean shadows. */
:root {
  --shadow-xs:  0 1px 2px rgba(10,19,48,0.06);
  --shadow-sm:  0 2px 6px rgba(10,19,48,0.08);
  --shadow-md:  0 8px 20px -6px rgba(10,19,48,0.14);
  --shadow-lg:  0 18px 40px -12px rgba(10,19,48,0.20);
  --shadow-xl:  0 30px 70px -20px rgba(10,19,48,0.28);
  --shadow-cyan: 0 12px 32px -10px rgba(35,211,211,0.45); /* accent glow */

  --border-hair: 1px solid var(--border-subtle);
  --border-1:    1px solid var(--border-default);

  /* Motion — calm, water-like ease. No bounce. */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  --dur-fast:  0.15s; /* @kind other */
  --dur-base:  0.25s; /* @kind other */
  --dur-slow:  0.45s; /* @kind other */

  --focus-ring: 0 0 0 3px rgba(35,211,211,0.5);
}