/* =============================================================================
   Small Cove Media — Colors & Type
   Drop this file into any artifact as the single source of visual truth.
   =============================================================================
*/

/* ─── Fonts ─────────────────────────────────────────────────────────────── */
/* DM Sans — primary body + display (per the 2026 brand guide).
   Loaded from Google Fonts. A local copy also lives in /fonts/ for offline use.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* =============================================================================
   ROOT TOKENS
   ============================================================================= */
:root {
  /* ── Color: named palette ────────────────────────────────────────────── */
  --color-deep-ocean-blue: #09213D;
  --color-soft-white:      #F7F8FA;
  --color-signal-coral:    #F25C54;
  --color-coastal-teal:    #1CBBB4;
  --color-slate-grey:      #4E5D6C;

  /* True black/white are not in the palette — use these if you need a pure
     extreme, but prefer the named tokens. */
  --color-ink:             #000814;
  --color-paper:           #FFFFFF;

  /* Tints & shades derived from the primary. Use sparingly. */
  --color-deep-ocean-blue-90: #1a344e;   /* hover overlay on dark bg */
  --color-deep-ocean-blue-80: #2a4560;
  --color-deep-ocean-blue-10: rgba(9, 33, 61, 0.10);
  --color-deep-ocean-blue-08: rgba(9, 33, 61, 0.08);
  --color-slate-grey-20:     rgba(78, 93, 108, 0.20);
  --color-slate-grey-40:     rgba(78, 93, 108, 0.40);
  --color-soft-white-10:     rgba(247, 248, 250, 0.10);
  --color-soft-white-60:     rgba(247, 248, 250, 0.60);
  --color-signal-coral-hover: #d84a43;   /* coral, 8% darker */
  --color-signal-coral-08:   rgba(242, 92, 84, 0.08);
  --color-coastal-teal-12:   rgba(28, 187, 180, 0.12);

  /* ── Semantic roles ──────────────────────────────────────────────────── */
  --color-primary:         var(--color-deep-ocean-blue);  /* dominant */
  --color-base:            var(--color-soft-white);        /* neutral canvas */
  --color-accent:          var(--color-signal-coral);      /* CTAs — reserved */
  --color-micro-accent:    var(--color-coastal-teal);      /* success only */
  --color-neutral:         var(--color-slate-grey);        /* secondary text */

  /* Foreground / background layers. */
  --bg:                    var(--color-soft-white);
  --bg-inverse:            var(--color-deep-ocean-blue);
  --bg-card:               #FFFFFF;
  --bg-card-inverse:       #0d2a4a;
  --bg-subtle:             #F1F3F6;

  --fg:                    var(--color-deep-ocean-blue);   /* body on light */
  --fg-muted:              var(--color-slate-grey);        /* secondary copy */
  --fg-inverse:            var(--color-soft-white);        /* body on dark  */
  --fg-inverse-muted:      rgba(247, 248, 250, 0.72);

  --border:                rgba(78, 93, 108, 0.20);        /* default hairline */
  --border-strong:         rgba(78, 93, 108, 0.40);
  --border-inverse:        rgba(247, 248, 250, 0.14);

  --focus-ring:            var(--color-signal-coral);

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'DM Sans', 'Inter', 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:    'DM Sans', 'Inter', 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Horizon is only used on the logo mark. If you ever ship a web file,
     register it via @font-face and expose it as --font-logo. */
  --font-logo:    'Horizon', 'DM Sans', sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* Type scale — per the brand guide's explicit hierarchy.
     Sizes in px; use rems in app code if you prefer (16px = 1rem). */
  --fs-hero:    64px;   /* H1 / Hero — 48–72px, we anchor at 64 */
  --fs-h1:      56px;
  --fs-h2:      36px;   /* H2 / Section — 32–40px */
  --fs-h3:      22px;   /* H3 / Subsection — 20–24px */
  --fs-body:    17px;   /* Body — 16–18px */
  --fs-small:   15px;
  --fs-caption: 13px;   /* Caption — 13–14px */
  --fs-eyebrow: 12px;   /* small-caps eyebrow labels */
  --fs-cta:     16px;   /* CTA / Button */

  --lh-tight:   1.10;
  --lh-snug:    1.25;
  --lh-normal:  1.50;   /* body default */
  --lh-relaxed: 1.65;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-eyebrow:  0.14em;   /* all-caps eyebrow labels */
  --tracking-wordmark: 0.18em;

  /* ── Spacing — 8px grid ──────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;    /* inputs */
  --radius-md: 12px;    /* cards, buttons (default) */
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Elevation — subtle only ─────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(9, 33, 61, 0.04);
  --shadow-sm: 0 2px 8px rgba(9, 33, 61, 0.08);   /* canonical card shadow */
  --shadow-md: 0 6px 20px rgba(9, 33, 61, 0.10);
  --shadow-lg: 0 18px 48px rgba(9, 33, 61, 0.14);
  /* Sanctioned exception: soft coral glow for primary CTA elements
     (hero play button, hero CTA). Use sparingly, one or two per page max. */
  --shadow-cta-glow: 0 8px 24px rgba(242, 92, 84, 0.35);

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-marketing: 1200px;
  --container-reading:    720px;
  --nav-height:            68px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 0.6, 1);
  --duration-1: 120ms;
  --duration-2: 200ms;
  --duration-3: 280ms;
  --duration-4: 400ms;
}

/* =============================================================================
   BASE — resets + type defaults
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =============================================================================
   SEMANTIC TYPE
   Use these classes or the matching element tags directly.
   ============================================================================= */

h1, .h1, .type-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-snug);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-normal);
  color: var(--fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: 20px;
  line-height: 1.45;
  color: var(--fg);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: 1.45;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-3);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
  transition: color var(--duration-1) var(--ease-out),
              text-decoration-color var(--duration-1) var(--ease-out);
}
a:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* Dark surface variants — flip foregrounds when inside an inverse block. */
.on-dark, .surface-dark {
  background: var(--bg-inverse);
  color: var(--fg-inverse);
}
.on-dark h1, .on-dark h2, .on-dark h3,
.surface-dark h1, .surface-dark h2, .surface-dark h3 {
  color: var(--fg-inverse);
}
.on-dark p, .surface-dark p { color: var(--fg-inverse-muted); }
.on-dark a, .surface-dark a { color: var(--color-soft-white); }
.on-dark a:hover, .surface-dark a:hover { color: var(--color-accent); }

/* Focus — always visible. */
:where(a, button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.container         { max-width: var(--container-marketing); margin: 0 auto; padding: 0 var(--space-5); }
.container-reading { max-width: var(--container-reading);   margin: 0 auto; padding: 0 var(--space-5); }
.section           { padding: var(--space-9) 0; }
.section-tight     { padding: var(--space-7) 0; }

.stack > * + *     { margin-top: var(--space-4); }
.stack-sm > * + *  { margin-top: var(--space-2); }
.stack-lg > * + *  { margin-top: var(--space-6); }

.divider {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}