/*
 * COAST LASER CUT & DESIGN — Design System
 * All CSS custom properties (tokens) live here.
 * Never hardcode a colour or font — always reference a token.
 * ─────────────────────────────────────────────────────────────
 */

/* ═══ TOKENS ══════════════════════════════════════════════════ */
:root {

  /* ── Colour Palette ──────────────────────────────────────── */

  /* Navy / Dark */
  --cl-navy:          #162830;
  --cl-navy-mid:      #1F3D4A;
  --cl-navy-soft:     #2C5364;

  /* Teal (primary brand) */
  --cl-teal:          #1A9E78;
  --cl-teal-mid:      #28BF92;
  --cl-teal-light:    #D6F0E7;
  --cl-teal-pale:     #EEF9F4;

  /* Sand (secondary brand) */
  --cl-sand:          #F5EDD8;
  --cl-sand-mid:      #E8D9B4;
  --cl-sand-dark:     #C4A05A;
  --cl-sand-deep:     #8C6B2F;

  /* Coral (accent / CTA urgency) */
  --cl-coral:         #D4573A;
  --cl-coral-mid:     #E8896E;
  --cl-coral-light:   #FBF0EC;

  /* Neutrals */
  --cl-white:         #FDFAF4;
  --cl-off-white:     #F8F3E8;
  --cl-grey-50:       #F4F0E8;
  --cl-grey-100:      #E8E2D4;
  --cl-grey-200:      #D4CAB8;
  --cl-grey-400:      #9E9484;
  --cl-grey-600:      #6B5F50;
  --cl-grey-800:      #3D3328;

  /* Text */
  --cl-text:          #162830;
  --cl-text-mid:      #3D5A5E;
  --cl-text-muted:    #6B8589;
  --cl-text-faint:    #9EB2B6;

  /* Borders */
  --cl-border:        rgba(196,160,90,0.20);
  --cl-border-mid:    rgba(196,160,90,0.35);
  --cl-border-dark:   rgba(22,40,48,0.15);

  /* ── Typography ──────────────────────────────────────────── */
  --cl-font-display:  'Cormorant Garamond', Georgia, serif;
  --cl-font-body:     'Outfit', system-ui, -apple-system, sans-serif;
  --cl-font-mono:     'JetBrains Mono', 'Fira Code', monospace;

  /* Scale */
  --cl-text-xs:       0.68rem;   /* 10.9px */
  --cl-text-sm:       0.78rem;   /* 12.5px */
  --cl-text-base:     1rem;      /* 16px   */
  --cl-text-lg:       1.125rem;  /* 18px   */
  --cl-text-xl:       1.25rem;   /* 20px   */
  --cl-text-2xl:      1.5rem;    /* 24px   */
  --cl-text-3xl:      2rem;      /* 32px   */
  --cl-text-4xl:      2.75rem;   /* 44px   */
  --cl-text-5xl:      3.5rem;    /* 56px   */

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

  /* ── Layout ──────────────────────────────────────────────── */
  --cl-container:     1240px;
  --cl-container-sm:  860px;
  --cl-section-y:     6rem;

  /* ── Radii ───────────────────────────────────────────────── */
  --cl-radius-xs:     4px;
  --cl-radius-sm:     8px;
  --cl-radius:        14px;
  --cl-radius-lg:     20px;
  --cl-radius-pill:   9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --cl-shadow-xs:     0 1px 4px rgba(22,40,48,0.06);
  --cl-shadow-sm:     0 2px 12px rgba(22,40,48,0.08);
  --cl-shadow-md:     0 6px 28px rgba(22,40,48,0.12);
  --cl-shadow-lg:     0 16px 48px rgba(22,40,48,0.18);
  --cl-shadow-xl:     0 28px 70px rgba(22,40,48,0.22);

  /* ── Transitions ─────────────────────────────────────────── */
  --cl-ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cl-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --cl-transition:    0.22s var(--cl-ease);
  --cl-transition-slow: 0.45s var(--cl-ease);

  /* ── Z-index stack ───────────────────────────────────────── */
  --cl-z-below:       -1;
  --cl-z-base:        1;
  --cl-z-raised:      10;
  --cl-z-dropdown:    100;
  --cl-z-sticky:      200;
  --cl-z-overlay:     300;
  --cl-z-modal:       400;
  --cl-z-toast:       500;
}


/* ═══ RESET / BASE ═══════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--cl-text);
  background: var(--cl-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--cl-font-body); cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: var(--cl-font-body); }
ul, ol { list-style: none; }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══ TYPOGRAPHY ══════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cl-font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--cl-navy);
}

h1 { font-size: clamp(2.5rem, 5vw, var(--cl-text-5xl)); }
h2 { font-size: clamp(2rem, 3.5vw, var(--cl-text-4xl)); }
h3 { font-size: clamp(1.4rem, 2.5vw, var(--cl-text-3xl)); }
h4 { font-family: var(--cl-font-body); font-size: var(--cl-text-xl); font-weight: 600; }
h5 { font-family: var(--cl-font-body); font-size: var(--cl-text-lg); font-weight: 600; }
h6 { font-family: var(--cl-font-body); font-size: var(--cl-text-base); font-weight: 600; }

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

a:not([class]) {
  color: var(--cl-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--cl-transition);
}
a:not([class]):hover { color: var(--cl-teal-mid); }

/* Display heading style */
.display-heading {
  font-family: var(--cl-font-display);
  font-style: italic;
  color: var(--cl-teal);
}

/* Section eyebrow label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--cl-teal);
  margin-bottom: 0.875rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
}

/* ═══ LAYOUT UTILITIES ════════════════════════════════════════ */

.container {
  max-width: var(--cl-container);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.container--sm { max-width: var(--cl-container-sm); }

.section {
  padding: var(--cl-section-y) 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-space-6); }

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }

/* ═══ BUTTON SYSTEM ══════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--cl-radius-pill);
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background var(--cl-transition),
    color var(--cl-transition),
    border-color var(--cl-transition),
    transform 0.15s var(--cl-ease),
    box-shadow var(--cl-transition);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary */
.btn-primary, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button {
  background: var(--cl-teal) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(26,158,120,0.30) !important;
}
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: var(--cl-teal-mid) !important;
  box-shadow: 0 8px 24px rgba(26,158,120,0.40) !important;
}

/* Secondary / Outline */
.btn-outline {
  background: transparent;
  color: var(--cl-navy);
  border: 1.5px solid var(--cl-border-mid);
}
.btn-outline:hover {
  border-color: var(--cl-teal);
  color: var(--cl-teal);
}

/* Ghost (on dark backgrounds) */
.btn-ghost {
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.28);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Navy solid */
.btn-navy {
  background: var(--cl-navy);
  color: #fff;
}
.btn-navy:hover { background: var(--cl-navy-mid); }

/* Danger */
.btn-danger { background: var(--cl-coral); color: #fff; }
.btn-danger:hover { background: #b9401f; }

/* Size variants */
.btn-sm { padding: 0.55rem 1.25rem; font-size: var(--cl-text-xs); }
.btn-lg { padding: 1.1rem 2.5rem; font-size: var(--cl-text-base); }
.btn-full { width: 100%; }
.btn-icon-only { width: 42px; height: 42px; padding: 0; border-radius: var(--cl-radius-sm); }

/* ═══ FORM ELEMENTS ══════════════════════════════════════════ */

.form-field { margin-bottom: var(--cl-space-5); }

.form-label {
  display: block;
  font-size: var(--cl-text-sm);
  font-weight: 600;
  color: var(--cl-navy);
  margin-bottom: var(--cl-space-2);
}
.form-label .required { color: var(--cl-coral); margin-left: 2px; }

.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--cl-white);
  border: 1.5px solid var(--cl-border-mid);
  border-radius: var(--cl-radius-sm);
  font-family: var(--cl-font-body);
  font-size: var(--cl-text-sm);
  color: var(--cl-text);
  line-height: 1.5;
  transition: border-color var(--cl-transition), box-shadow var(--cl-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.form-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--cl-teal);
  box-shadow: 0 0 0 3px rgba(26,158,120,0.14);
}

textarea { resize: vertical; min-height: 100px; }

.form-input::placeholder { color: var(--cl-text-faint); }

/* ═══ BADGES & TAGS ══════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--cl-radius-pill);
  font-size: var(--cl-text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
}

.badge-teal    { background: var(--cl-teal);  color: #fff; }
.badge-coral   { background: var(--cl-coral); color: #fff; }
.badge-navy    { background: var(--cl-navy);  color: #fff; }
.badge-sand    { background: var(--cl-sand-dark); color: #fff; }
.badge-outline { background: transparent; border: 1px solid var(--cl-teal); color: var(--cl-teal); }

/* ═══ DIVIDERS & WAVE ════════════════════════════════════════ */

.wave-divider { line-height: 0; display: block; }
.wave-divider svg { display: block; width: 100%; }

hr.cl-divider {
  border: none;
  border-top: 1px solid var(--cl-border);
  margin: var(--cl-space-8) 0;
}

/* ═══ SKIP LINK (ACCESSIBILITY) ══════════════════════════════ */

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--cl-teal);
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: var(--cl-text-sm);
  font-weight: 600;
  z-index: 9999;
  border-radius: 0 0 var(--cl-radius-sm) 0;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ═══ FOCUS STYLES (ACCESSIBILITY) ══════════════════════════ */

:focus-visible {
  outline: 2px solid var(--cl-teal);
  outline-offset: 3px;
  border-radius: 3px;
}