/* =============================================================
   Coastal Cleaners — Colors & Type
   Adapted from a Stripi-inspired editorial-clean foundation,
   re-skinned with the brand's lighthouse Coastal Blue & Sun Yellow.
   ============================================================= */

/* Premium pairing:
   - Instrument Serif: editorial display, used in italic for emphasis words in H1/H2 only
   - DM Sans: clean modern UI/body/headings — tabular figures supported
   Both Google Fonts, free for commercial use.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --coastal-blue:        #0a96fa;   /* lighthouse blue, primary */
  --coastal-blue-deep:   #0072c6;   /* pressed / link emphasis */
  --coastal-blue-press:  #00538f;   /* deepest press */
  --coastal-blue-soft:   #5cb8fc;   /* hover / chart highlight */
  --coastal-blue-tint:   #d6ecfd;   /* soft pill bg */
  --coastal-blue-wash:   #f0f8fe;   /* subtlest tint, big sections */

  --sun:                 #faf078;   /* sun yellow accent (logo) */
  --sun-deep:            #f1d83a;   /* sun darker / chart */
  --sun-wash:            #fff8d6;   /* warm cream interlude */

  --sand:                #f5e9d4;   /* warm cream feature band */
  --seafoam:             #aee6df;   /* tertiary accent dot */
  --ruby:                #ea2261;   /* alert / sale dot, NEVER a button */

  /* ---------- INK (deep navy, never black) ---------- */
  --ink:                 #0d253d;   /* default body */
  --ink-secondary:       #273951;
  --ink-mute:            #64748d;
  --ink-mute-2:          #8896ab;
  --ink-disabled:        #b6bfcc;
  --on-primary:          #ffffff;
  --on-dark:             #ffffff;

  /* ---------- DEEP NAVY (featured surfaces) ---------- */
  --brand-dark-900:      #0e2742;   /* featured pricing tier, dark band */
  --brand-dark-800:      #173656;

  /* ---------- SURFACE ---------- */
  --canvas:              #ffffff;
  --canvas-soft:         #f6f9fc;
  --canvas-cream:        var(--sand);
  --hairline:            #e3e8ee;
  --hairline-input:      #c1d6ea;

  /* ---------- SHADOWS ---------- */
  --shadow-1: 0 1px 3px rgba(13,37,61,0.08);
  --shadow-2: 0 8px 24px rgba(13,37,61,0.10), 0 2px 6px rgba(13,37,61,0.05);
  --shadow-3: 0 24px 64px rgba(13,37,61,0.14), 0 4px 12px rgba(13,37,61,0.06);
  --shadow-blue-glow: 0 12px 32px rgba(10,150,250,0.25);

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ---------- SPACING (8px base) ---------- */
  --space-xxs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-huge: 64px;
  --space-mega: 96px;

  /* ---------- TYPE FAMILIES ----------
     Premium pairing — chosen for a luxury coastal home-service brand:
     • Editorial italic serif for emphasis words in display sizes
     • Modern geometric sans for everything else
  */
  --font-serif:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'DM Sans', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);   /* base display uses sans */
  --font-body:    var(--font-sans);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPE SIZES (token-shaped) ---------- */
  --t-display-xxl-size: 64px;
  --t-display-xl-size:  48px;
  --t-display-lg-size:  36px;
  --t-display-md-size:  28px;
  --t-heading-lg-size:  22px;
  --t-heading-md-size:  20px;
  --t-heading-sm-size:  18px;
  --t-body-lg-size:     17px;
  --t-body-md-size:     15px;
  --t-body-sm-size:     14px;
  --t-caption-size:     13px;
  --t-micro-size:       11px;
  --t-micro-cap-size:   10px;

  /* ---------- GRADIENT MESH ----------
     Brand-specific atmospheric backdrop: a coastal sunrise. Sand cream
     blending to sun yellow, sky lavender, coastal blue. Apply as a
     background image (large, blurred) — NOT a flat CSS gradient on
     marketing heroes. CSS approximation provided as a fallback. */
  --mesh-sunrise:
    radial-gradient(60% 80% at 90% 20%, rgba(250,240,120,.95) 0%, rgba(250,240,120,0) 60%),
    radial-gradient(70% 100% at 70% 0%, rgba(255,178,120,.55) 0%, rgba(255,178,120,0) 55%),
    radial-gradient(80% 90% at 30% 10%, rgba(10,150,250,.55) 0%, rgba(10,150,250,0) 60%),
    radial-gradient(90% 80% at 10% 40%, rgba(174,230,223,.60) 0%, rgba(174,230,223,0) 55%),
    linear-gradient(180deg, #fff8e3 0%, #ffffff 70%);

  --mesh-dusk:
    radial-gradient(70% 90% at 80% 10%, rgba(250,240,120,.65) 0%, rgba(250,240,120,0) 55%),
    radial-gradient(90% 100% at 110% 40%, rgba(10,150,250,.65) 0%, rgba(10,150,250,0) 60%),
    radial-gradient(80% 90% at 0% 20%, rgba(92,184,252,.6) 0%, rgba(92,184,252,0) 55%),
    linear-gradient(180deg, #e6f3ff 0%, #ffffff 80%);
}

/* =============================================================
   GLOBAL TYPE
   ============================================================= */
html, body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Serif italic accent — use in H1/H2 only, for emphasis words */
.t-serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

* { box-sizing: border-box; }

/* =============================================================
   SEMANTIC TYPE CLASSES
   Use these directly, or read the sizes off the CSS vars.
   ============================================================= */

.t-display-xxl {
  font-family: var(--font-display);
  font-size: var(--t-display-xxl-size);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -1.8px;
}
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl-size);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -1.2px;
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--t-display-lg-size);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.8px;
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--t-display-md-size);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.4px;
}
.t-heading-lg {
  font-family: var(--font-display);
  font-size: var(--t-heading-lg-size);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.22px;
}
.t-heading-md {
  font-family: var(--font-display);
  font-size: var(--t-heading-md-size);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.2px;
}
.t-heading-sm {
  font-family: var(--font-display);
  font-size: var(--t-heading-sm-size);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.1px;
}
.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--t-body-lg-size);
  font-weight: 400;
  line-height: 1.55;
}
.t-body-md {
  font-family: var(--font-body);
  font-size: var(--t-body-md-size);
  font-weight: 400;
  line-height: 1.5;
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm-size);
  font-weight: 400;
  line-height: 1.45;
}
.t-body-tabular {
  font-family: var(--font-body);
  font-size: var(--t-body-sm-size);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.2px;
  font-feature-settings: "tnum", "ss01";
  font-variant-numeric: tabular-nums;
}
.t-button {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.1px;
}
.t-button-sm {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
}
.t-micro {
  font-family: var(--font-body);
  font-size: var(--t-micro-size);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-mute);
}
.t-micro-cap {
  font-family: var(--font-display);
  font-size: var(--t-micro-cap-size);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* =============================================================
   ELEMENT DEFAULTS — let raw h1/h2/p/etc inherit the system
   ============================================================= */
h1 { font: 300 var(--t-display-xxl-size)/1.03 var(--font-display); letter-spacing: -1.8px; margin: 0; }
h2 { font: 300 var(--t-display-xl-size)/1.08 var(--font-display);  letter-spacing: -1.2px; margin: 0; }
h3 { font: 300 var(--t-display-lg-size)/1.12 var(--font-display);  letter-spacing: -0.8px; margin: 0; }
h4 { font: 400 var(--t-heading-lg-size)/1.25 var(--font-display);  letter-spacing: -0.22px; margin: 0; }
h5 { font: 500 var(--t-heading-md-size)/1.35 var(--font-display);  letter-spacing: -0.2px; margin: 0; }
h6 { font: 500 var(--t-heading-sm-size)/1.4 var(--font-display);   margin: 0; }
p  { font: 400 var(--t-body-md-size)/1.55 var(--font-body); margin: 0; color: var(--ink); }
small { font-size: var(--t-caption-size); color: var(--ink-mute); }
a { color: var(--coastal-blue-deep); text-decoration: none; }
a:hover { color: var(--coastal-blue); }