/**
 * ============================================================
 * tokens.css — BRAND DESIGN TOKENS
 * ============================================================
 *
 * Change your brand colors HERE and they update everywhere.
 * These CSS variables are used across all other CSS files.
 *
 * ============================================================
 */

:root {

  /* ── Brand Colors ──────────────────────────────────────────
     Primary palette — the heart of the Surfaced brand
  ────────────────────────────────────────────────────────── */
  --purple:      #8b5cf6;           /* primary accent — buttons, highlights */
  --purple-lt:   #a78bfa;           /* lighter purple — hover states, text */
  --cyan:        #06b6d4;           /* secondary accent — labels, eyebrows */
  --green:       #10b981;           /* success, service accents */
  --amber:       #f59e0b;           /* warning, service accents */

  /* ── Background Colors ─────────────────────────────────────
     Dark backgrounds that give the site its premium feel
  ────────────────────────────────────────────────────────── */
  --black:       #050507;           /* page background — deepest dark */
  --dark:        #0a0a0f;           /* slightly lighter dark */
  --dark2:       #0d0d14;           /* used in laptop section gradient */
  --teal:        rgba(0,61,53,.55); /* hero teal glow (top-right corner) */

  /* ── Text Colors ───────────────────────────────────────────
     Use these for consistency instead of hardcoding rgba values
  ────────────────────────────────────────────────────────── */
  --white:       #ffffff;
  --text-muted:  rgba(255,255,255,.42);   /* body text */
  --text-dim:    rgba(255,255,255,.28);   /* captions, labels */
  --text-faint:  rgba(255,255,255,.1);    /* borders, dividers */

  /* ── Border Colors ─────────────────────────────────────────*/
  --border:      rgba(255,255,255,.055);
  --border-hover:rgba(139,92,246,.3);

  /* ── Spacing ───────────────────────────────────────────────
     Consistent section padding throughout the site
  ────────────────────────────────────────────────────────── */
  --section-pad-x: 10vw;   /* horizontal padding on all sections */
  --section-pad-y: 140px;  /* vertical padding on all sections */

  /* ── Typography ────────────────────────────────────────────
     Font families used across the site
  ────────────────────────────────────────────────────────── */
  --font-heading: 'Syne', sans-serif;     /* all headings, titles, bold text */
  --font-body:    'DM Sans', sans-serif;  /* all body text, UI copy */

  /* ── Border Radius ─────────────────────────────────────────*/
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 100px;

  /* ── Transitions ───────────────────────────────────────────
     Reusable easing curves — use these for consistency
  ────────────────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(.23, 1, .32, 1);  /* Apple-style smooth */
  --ease-out:    cubic-bezier(.4, 0, .2, 1);     /* material ease-out */
}