/* ============================================================
   LobbyOS — Design Tokens
   A fresh, Apple-grade system: neutral foundation, one confident
   accent, technical precision. Built for serious operator software.
   Type: Geist + Geist Mono. Form: squircles, hairlines, air.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");

:root {
  /* ----------------------------------------------------------
     COLOR — Apple-neutral grounds + cool gray scale.
     The system is near-monochrome; the accent does the talking.
     ---------------------------------------------------------- */

  /* Grounds */
  --paper:      #FFFFFF;   /* pure white — cards, hero */
  --ground:     #F5F5F7;   /* Apple signature off-white section ground */
  --ground-2:   #FAFAFA;   /* faint warm-cool ground */
  --ink-ground: #0A0A0B;   /* near-black for dark sections */
  --ink-ground-2:#141417;  /* raised dark surface */

  /* Ink / text */
  --ink:        #1D1D1F;   /* primary text (Apple near-black) */
  --ink-2:      #44464B;   /* secondary text */
  --ink-3:      #6E7078;   /* tertiary / captions */
  --ink-4:      #98999F;   /* quaternary / disabled */
  --on-dark:    #F5F5F7;   /* primary text on dark ground */
  --on-dark-2:  #A1A1AA;   /* secondary text on dark ground */
  --on-dark-3:  #6B6B73;   /* tertiary on dark */

  /* Cool gray scale (UI surfaces, chrome) */
  --gray-50:  #FAFAFB;
  --gray-100: #F1F1F3;
  --gray-150: #E8E8EB;
  --gray-200: #DEDEE2;
  --gray-300: #C9C9CF;
  --gray-400: #A6A6AE;
  --gray-500: #76767E;
  --gray-600: #54545B;
  --gray-700: #3A3A40;
  --gray-800: #25252A;
  --gray-900: #161619;

  /* ---- ACCENT (overridable by Tweaks) ----
     Default: Iris — the live app's indigo. Confident, technical. Not green (anti-Elise). */
  --accent:        #5B53E0;
  --accent-press:  #463fc4;
  --accent-soft:   #ECEBFB;   /* tint wash on light */
  --accent-on:     #FFFFFF;   /* text on accent */
  --accent-glow:   rgba(91, 83, 224, 0.30);

  /* Semantic status (used sparingly in product UI mocks) */
  --ok:    #1A7F4B;
  --ok-bg: #E6F4EC;
  --warn:  #B7791F;
  --warn-bg:#FBF1DD;
  --alert: #C0362C;
  --alert-bg:#FBE9E7;

  /* Hairlines */
  --rule:       rgba(0, 0, 0, 0.09);
  --rule-soft:  rgba(0, 0, 0, 0.055);
  --rule-strong:rgba(0, 0, 0, 0.15);
  --rule-dark:  rgba(255, 255, 255, 0.10);
  --rule-dark-soft: rgba(255, 255, 255, 0.06);

  /* ----------------------------------------------------------
     TYPOGRAPHY — Geist for everything, Geist Mono for data/labels.
     Apple-style: tight tracking on big type, generous line-height on body.
     ---------------------------------------------------------- */
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display / headline scale (Apple marketing rhythm) */
  --t-mega:     clamp(48px, 8.5vw, 112px);  /* hero statement */
  --t-display:  clamp(40px, 5.6vw, 80px);   /* section hero */
  --t-h1:       clamp(34px, 4.2vw, 56px);
  --t-h2:       clamp(28px, 3vw, 40px);
  --t-h3:       clamp(22px, 2vw, 27px);
  --t-h4:       20px;
  --t-lede:     clamp(19px, 1.8vw, 24px);   /* sub-headline */
  --t-body-lg:  18px;
  --t-body:     16px;
  --t-body-sm:  14px;
  --t-meta:     13px;
  --t-label:    12px;   /* mono labels */
  --t-micro:    11px;

  /* Tracking — big type tightens, mono labels open up */
  --ls-mega:    -0.035em;
  --ls-display: -0.028em;
  --ls-h:       -0.02em;
  --ls-body:    -0.01em;
  --ls-label:   0.10em;   /* uppercase mono */
  --ls-label-wide: 0.16em;

  /* Weights */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ----------------------------------------------------------
     SPACING — 4px base grid.
     ---------------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;
  --s-24: 96px; --s-32: 128px; --s-40: 160px;

  --pad-x: clamp(20px, 5vw, 64px);
  --max-w: 1240px;
  --max-w-wide: 1440px;
  --max-w-prose: 680px;
  --section-y: clamp(80px, 11vw, 160px);
  --section-y-sm: clamp(56px, 7vw, 96px);

  /* ----------------------------------------------------------
     RADIUS — Apple squircle world. Generous, soft, present.
     The deliberate anti-Vasari (which is square).
     ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --r-icon: 22%;   /* squircle-ish app icon rounding */

  /* ----------------------------------------------------------
     ELEVATION — soft, low, Apple. Layered ambient + key.
     ---------------------------------------------------------- */
  --sh-xs:  0 1px 2px rgba(16, 18, 28, 0.06);
  --sh-sm:  0 1px 3px rgba(16, 18, 28, 0.06), 0 4px 12px -4px rgba(16, 18, 28, 0.08);
  --sh-md:  0 2px 6px rgba(16, 18, 28, 0.06), 0 12px 28px -8px rgba(16, 18, 28, 0.12);
  --sh-lg:  0 4px 10px rgba(16, 18, 28, 0.07), 0 24px 56px -16px rgba(16, 18, 28, 0.18);
  --sh-xl:  0 8px 20px rgba(16, 18, 28, 0.08), 0 40px 96px -24px rgba(16, 18, 28, 0.24);
  --sh-accent: 0 8px 30px -6px var(--accent-glow);

  /* ----------------------------------------------------------
     MOTION — quick, precise, no bounce.
     ---------------------------------------------------------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 140ms;
  --dur:      220ms;
  --dur-med:  360ms;
  --dur-slow: 600ms;

  /* Layers */
  --z-header: 80;
  --z-drawer: 90;
  --z-modal: 100;
}

/* ============================================================
   BASELINE — opt-in element styles
   ============================================================ */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-h);
  line-height: 1.05;
  color: var(--ink);
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

/* Mono label / eyebrow */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.mono { font-family: var(--mono); }

::selection { background: var(--accent); color: var(--accent-on); }