/* ─────────────────────────────────────────────────────────────────────────
   CloutInn, design tokens

   Three colours: white, black, electric blue (#055DFF, taken from the logo).

   The page is light. White and near-white carry it; black is an accent used
   in blocks, cards and type where something must hit hard; sky blue is the
   energy and every action. Cards always sit on a tinted ground with a real
   border and shadow, so nothing is ever white-on-white and invisible.
   ───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   Coolvetica, self-hosted for the wordmark beside the logo.

   Not a Google font, so the files live in assets/fonts/. Drop in any of
   coolvetica.woff2 / .woff / .ttf and it is picked up; with none of them
   present the wordmark simply keeps the Space Grotesk it used before, which
   is why the fallback below matters.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Coolvetica";
  src: url("../assets/fonts/coolvetica.woff2") format("woff2"),
       url("../assets/fonts/coolvetica.woff") format("woff"),
       url("../assets/fonts/coolvetica.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ── Black ─────────────────────────────────────────────────────────── */
  --black: #05060a;
  --black-2: #0b0d14;
  --black-3: #12151f;
  --black-4: #1c2030;

  /* ── White / light ground ──────────────────────────────────────────── */
  --white: #ffffff;
  --off: #f4f6fb;
  --off-2: #e9edf7;

  /* ── Electric blue ─────────────────────────────────────────────────── */
  --blue: #055dff;
  --blue-deep: #0043cc;
  --blue-hot: #2e72ff;
  --blue-bright: #7fa8ff;
  --blue-wash: #e6edff;
  --blue-tint: #f4f7ff;
  --blue-glow: rgba(5, 93, 255, 0.55);

  /* ── Text ──────────────────────────────────────────────────────────── */
  --on-light: #05060a;
  --on-light-2: #5a6377;
  --on-dark: #ffffff;
  --on-dark-2: rgba(255, 255, 255, 0.66);
  --on-dark-3: rgba(255, 255, 255, 0.42);

  /* ── Lines ─────────────────────────────────────────────────────────── */
  --line-light: #dde3f0;
  --line-dark: rgba(255, 255, 255, 0.12);
  --line-dark-2: rgba(255, 255, 255, 0.2);

  /* ── Elevation ─────────────────────────────────────────────────────────
     Cards on white need a real edge or they vanish. These are deliberately
     stronger than a typical corporate shadow. */
  --sh-sm: 0 2px 6px rgba(5, 6, 10, 0.06), 0 8px 20px rgba(5, 6, 10, 0.06);
  --sh-md: 0 4px 12px rgba(5, 6, 10, 0.08), 0 18px 40px rgba(5, 6, 10, 0.1);
  --sh-lg: 0 10px 28px rgba(5, 6, 10, 0.12), 0 40px 80px rgba(5, 6, 10, 0.16);
  --sh-blue: 0 8px 24px rgba(5, 93, 255, 0.34);
  --sh-blue-lg: 0 16px 50px rgba(5, 93, 255, 0.48);

  /* ── Type ──────────────────────────────────────────────────────────────
     Space Grotesk has real character in its display sizes; Inter carries
     everything that has to be read quickly. */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-logo: "Coolvetica", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --t-mega: clamp(2.9rem, 1.5rem + 5.6vw, 6rem);
  --t-display: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
  --t-h1: clamp(2.1rem, 1.45rem + 2.7vw, 3.4rem);
  --t-h2: clamp(1.8rem, 1.3rem + 2.1vw, 2.8rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
  --t-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-tiny: 0.875rem;
  --t-micro: 0.8125rem;
  --t-label: 0.75rem;

  /* ── Rhythm ────────────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  --shell: 78rem;
  --narrow: 48rem;
  --gutter: clamp(1.15rem, 4vw, 2.25rem);
  --section-y: clamp(4rem, 7vw, 7rem);
  --header-h: 4.5rem;

  /* Corners are never uniform, see the shape utilities in styles.css. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --notch: 30px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --fast: 0.18s;
  --mid: 0.32s;
  --slow: 0.6s;
}