/* ============================================================
   WEBSURFER — Core Color & Type Tokens
   Coastal web-design agency · New Hampshire Seacoast
   Light theme · Deep Cerulean accent · "elevate" UI style
   ============================================================
   Type system (updated):
   • GRIFTER Bold — HERO HEADLINE ONLY. Commercial (Hanson Method
     Design); licensed file bundled at fonts/GRIFTER__Bold.otf,
     active via @font-face below. → var(--font-grotesque)
   • Instrument Serif — main editorial / display headings (section
     & premium titles). Google Fonts. → var(--font-display)
   • Fraunces — secondary serif headings & fallback display
     moments. Google Fonts. → var(--font-serif)
   • Inter — body copy, UI text, buttons, nav, forms (self-hosted
     woff2). → var(--font-body)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap");

/* ---- GRIFTER (display) — the brand's heading face (licensed) ---- */
@font-face {
  font-family: "Grifter";
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GRIFTER__Bold.otf") format("opentype");
}

/* ---- Inter (bundled, self-hosted) ---- */
@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}

:root {
  /* ========================================================
     NEUTRALS  (shade-0 = darkest → white)
     ======================================================== */
  --color-white: #ffffff;
  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter: #dadada;
  --color-neutral-light: #b6b6b6;
  --color-neutral: #868686;
  --color-neutral-dark: #555555;
  --color-neutral-darker: #252525;
  --color-neutral-darkest: #0d0d0d;

  /* Translucent neutrals (used for borders, secondary buttons, inputs) */
  --color-neutral-darkest-5: rgba(13, 13, 13, 0.05);
  --color-neutral-darkest-10: rgba(13, 13, 13, 0.10);
  --color-neutral-darkest-15: rgba(13, 13, 13, 0.15);
  --color-neutral-darkest-20: rgba(13, 13, 13, 0.20);
  --color-neutral-darkest-60: rgba(13, 13, 13, 0.60);
  --color-white-5: rgba(255, 255, 255, 0.05);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-20: rgba(255, 255, 255, 0.20);
  --color-white-60: rgba(255, 255, 255, 0.60);

  /* ========================================================
     DEEP CERULEAN  — secondary palette (coastal blue · reserved)
     ======================================================== */
  --color-deep-cerulean-lightest: #e6f2f7;
  --color-deep-cerulean-lighter: #cee5ef;
  --color-deep-cerulean-light: #53a5c7;
  --color-deep-cerulean: #0a7faf; /* secondary */
  --color-deep-cerulean-dark: #08658c;
  --color-deep-cerulean-darker: #043246;
  --color-deep-cerulean-darkest: #032634;

  /* ========================================================
     JEWEL  — primary brand accent (deep coastal green)
     ======================================================== */
  --color-jewel-lightest: #e6edea;
  --color-jewel-lighter: #cedcd6;
  --color-jewel-light: #568670;
  --color-jewel: #0e5334; /* primary */
  --color-jewel-dark: #0b4229; /* hover */
  --color-jewel-darker: #052114;
  --color-jewel-darkest: #04180f;

  /* ========================================================
     SEMANTIC ROLES  (default = Scheme 1, white background)
     ======================================================== */
  --bg: var(--color-white);
  --fg-strong: var(--color-neutral-darkest); /* headings, body */
  --fg: var(--color-neutral-darkest);
  --fg-muted: var(--color-neutral-dark);
  --surface: var(--color-neutral-lightest); /* card foreground fill */
  --accent: var(--color-jewel);
  --accent-hover: var(--color-jewel-dark);
  --border: var(--color-neutral-darkest-15);
  --border-strong: var(--color-neutral-darkest);
  --btn-text: var(--color-white);

  /* ========================================================
     TYPOGRAPHY
     ======================================================== */
  --font-grotesque: "Grifter", "Archivo", sans-serif; /* hero headline ONLY */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif; /* main editorial headings */
  --font-serif: "Fraunces", Georgia, serif; /* secondary serif headings / fallback display */
  --font-body: "Inter", sans-serif; /* body, UI, buttons, nav, forms */

  /* Instrument Serif ships a single 400 weight; Fraunces is variable.
     Grifter (hero) is bold. Weights below are general body weights. */
  --weight-display: 400;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* Desktop type scale (≥992px). Mobile sizes in @media below. */
  --text-h1: 3.5rem; /* 56px */
  --text-h2: 3rem; /* 48px */
  --text-h3: 2.5rem; /* 40px */
  --text-h4: 2rem; /* 32px */
  --text-h5: 1.5rem; /* 24px */
  --text-h6: 1.25rem; /* 20px */
  --text-large: 1.25rem; /* 20px */
  --text-medium: 1.125rem; /* 18px */
  --text-regular: 1rem; /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-tiny: 0.75rem; /* 12px */

  --leading-heading: 1.2;
  --leading-body: 1.5;
  --tracking-heading: -0.01em;

  /* ========================================================
     RADII  ("elevate" UI · square cards)
     ======================================================== */
  --radius-button: 0.375rem; /* 6px */
  --radius-badge: 0.375rem; /* 6px */
  --radius-input: 0.375rem; /* 6px */
  --radius-checkbox: 0.125rem; /* 2px */
  --radius-card: 0rem; /* square */
  --radius-image: 0rem; /* square */

  /* ========================================================
     ELEVATION  — the signature "elevate" inset-shadow stack
     ======================================================== */
  /* Primary button resting state */
  --shadow-elevate:
    inset 0 -2px 1px 0 var(--color-neutral-darkest-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-neutral-darkest-15),
    0 1px 2px 0 var(--color-neutral-darkest-5);
  /* Primary button hover (lifts up 2px) */
  --shadow-elevate-hover:
    inset 0 -2px 1px 0 var(--color-neutral-darkest-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-neutral-darkest-15),
    0 2px 4px 0 var(--color-neutral-darkest-5);
  /* Secondary / glass button */
  --shadow-secondary:
    0 1px 2px 0 var(--color-neutral-darkest-5),
    inset 0 -2px 1px 0 var(--color-neutral-darkest-5),
    inset 0 0 0 1px var(--color-neutral-darkest-5);

  /* ========================================================
     LAYOUT
     ======================================================== */
  --container-max: 80rem; /* 1280px */
  --section-pad-x: 5%;
  --section-pad-y: 7rem; /* lg vertical rhythm (112px) */
}

/* ---- Mobile type scale (<992px) ---- */
@media (max-width: 991px) {
  :root {
    --text-h1: 2.5rem; /* 40px */
    --text-h2: 2.25rem; /* 36px */
    --text-h3: 2rem; /* 32px */
    --text-h4: 1.5rem; /* 24px */
    --text-h5: 1.25rem; /* 20px */
    --text-h6: 1.125rem; /* 18px */
    --text-large: 1.125rem;
    --text-medium: 1rem;
    --text-regular: 0.875rem;
    --text-small: 0.75rem;
    --text-tiny: 0.625rem;
    --section-pad-y: 4rem;
  }
}

/* ============================================================
   COLOR SCHEMES — apply one class per section.
   All children inherit text / accent / border automatically.
   ============================================================ */
.scheme-1 { /* white */
  --bg: var(--color-white);
  --surface: var(--color-neutral-lightest);
  --fg: var(--color-neutral-darkest);
  --border: var(--color-neutral-darkest-15);
  --accent: var(--color-jewel);
  background-color: var(--bg);
  color: var(--fg);
}
.scheme-2 { /* light neutral */
  --bg: var(--color-neutral-lightest);
  --surface: var(--color-white);
  --fg: var(--color-neutral-darkest);
  --border: var(--color-neutral-darkest-15);
  --accent: var(--color-jewel);
  background-color: var(--bg);
  color: var(--fg);
}
.scheme-3 { /* jewel tint */
  --bg: var(--color-jewel-lightest);
  --surface: var(--color-jewel-lighter);
  --fg: var(--color-neutral-darkest);
  --border: var(--color-neutral-darkest-15);
  --accent: var(--color-jewel);
  background-color: var(--bg);
  color: var(--fg);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   Use these directly, or copy the patterns into components.
   ============================================================ */
.ws-body { font-family: var(--font-body); color: var(--fg); }

h1, h2, h3, .ws-display {
  font-family: var(--font-display); /* Instrument Serif */
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h4, h5, h6 {
  font-family: var(--font-serif); /* Fraunces */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Hero / grotesque display moment — Grifter (use sparingly) */
.ws-hero { font-family: var(--font-grotesque); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; }

.ws-h1 { font-size: var(--text-h1); font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
.ws-h2 { font-size: var(--text-h2); font-family: var(--font-display); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
.ws-h3 { font-size: var(--text-h3); font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.012em; }
.ws-h4 { font-size: var(--text-h4); font-family: var(--font-serif); font-weight: 600; line-height: 1.25; }
.ws-h5 { font-size: var(--text-h5); font-family: var(--font-serif); font-weight: 600; line-height: 1.3; }
.ws-h6 { font-size: var(--text-h6); font-family: var(--font-serif); font-weight: 600; line-height: 1.35; }

/* Eyebrow / kicker label above headings (semibold body font) */
.ws-eyebrow { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-medium); }

.ws-text-large { font-size: var(--text-large); line-height: var(--leading-body); }
.ws-text-medium { font-size: var(--text-medium); line-height: var(--leading-body); }
.ws-text-regular { font-size: var(--text-regular); line-height: var(--leading-body); }
.ws-text-small { font-size: var(--text-small); line-height: var(--leading-body); }
.ws-text-tiny { font-size: var(--text-tiny); line-height: var(--leading-body); }