/* ============================================================
   GoGuru Design System — Colors & Type
   Aesthetic: Linear.app × Framer.com
   Minimal, dark-first, generous whitespace, sparing gradient.
   ============================================================ */

/* --- Fonts (self-hosted, OFL — see fonts/README.md) --- */
@font-face {
  font-family: 'Geist';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Geist-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GeistMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('fonts/GeistMono-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Architects Daughter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/ArchitectsDaughter-Regular.ttf') format('truetype');
}

:root {
  /* ─── Brand gradient (use SPARINGLY: logo + key accents only) ─── */
  --gg-grad-blue:        #6BB8F5;
  --gg-grad-indigo:      #5B6FE8;
  --gg-grad-purple:      #B44FE8;
  --gg-gradient:         linear-gradient(120deg, #6BB8F5 0%, #5B6FE8 50%, #B44FE8 100%);
  --gg-gradient-soft:    linear-gradient(120deg, rgba(107,184,245,0.18) 0%, rgba(91,111,232,0.18) 50%, rgba(180,79,232,0.18) 100%);

  /* ─── Accent / CTA ─── */
  --gg-accent:           #9B30FF;   /* electric purple — buttons, key highlights */
  --gg-accent-hover:     #8A1FF0;
  --gg-accent-press:     #7A12E0;
  --gg-accent-soft:      rgba(155, 48, 255, 0.12);

  /* ─── Light accent (subtle highlights, focus rings) ─── */
  --gg-cyan:             #A8E0F5;

  /* ─── Surfaces — DARK (default) ─── */
  --gg-bg:               #0A0A0A;   /* page background */
  --gg-bg-elev-1:        #111113;   /* card */
  --gg-bg-elev-2:        #17171A;   /* nested card / popover */
  --gg-bg-elev-3:        #1E1E22;   /* dialog / menu */
  --gg-bg-navy:          #07091A;   /* alt deep-navy background */

  /* ─── Foreground — DARK ─── */
  --gg-fg:               #FAFAFA;   /* primary text */
  --gg-fg-2:             rgba(250, 250, 250, 0.72);  /* secondary */
  --gg-fg-3:             rgba(250, 250, 250, 0.48);  /* tertiary / meta */
  --gg-fg-4:             rgba(250, 250, 250, 0.28);  /* disabled */

  /* ─── Borders — DARK ─── */
  --gg-border:           rgba(255, 255, 255, 0.08);
  --gg-border-strong:    rgba(255, 255, 255, 0.14);
  --gg-border-focus:     rgba(155, 48, 255, 0.55);

  /* ─── Semantic ─── */
  --gg-success:          #34D399;
  --gg-warning:          #FBBF24;
  --gg-danger:           #F87171;
  --gg-info:             #60A5FA;

  /* ─── Shadows (used minimally; rely on borders) ─── */
  --gg-shadow-sm:        0 1px 2px rgba(0,0,0,0.4);
  --gg-shadow-md:        0 6px 24px rgba(0,0,0,0.45);
  --gg-shadow-lg:        0 24px 64px -12px rgba(0,0,0,0.6);
  --gg-glow-accent:      0 0 0 1px rgba(155,48,255,0.4), 0 8px 32px -8px rgba(155,48,255,0.5);

  /* ─── Radii ─── */
  --gg-radius-xs:        4px;
  --gg-radius-sm:        6px;
  --gg-radius-md:        10px;
  --gg-radius-lg:        14px;
  --gg-radius-xl:        20px;
  --gg-radius-pill:      999px;

  /* ─── Spacing scale (4px base) ─── */
  --gg-space-1:          4px;
  --gg-space-2:          8px;
  --gg-space-3:          12px;
  --gg-space-4:          16px;
  --gg-space-5:          24px;
  --gg-space-6:          32px;
  --gg-space-7:          48px;
  --gg-space-8:          64px;
  --gg-space-9:          96px;
  --gg-space-10:         128px;

  /* ─── Type families ─── */
  --gg-font-sans:        'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gg-font-display:     'Geist', system-ui, -apple-system, sans-serif;
  --gg-font-mono:        'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --gg-font-accent:      'Architects Daughter', 'Caveat', cursive;  /* handwritten — accents only */

  /* ─── Type scale (display-first) ─── */
  --gg-text-xs:          12px;
  --gg-text-sm:          13px;
  --gg-text-base:        15px;
  --gg-text-md:          17px;
  --gg-text-lg:          21px;
  --gg-text-xl:          28px;
  --gg-text-2xl:         40px;
  --gg-text-3xl:         56px;
  --gg-text-4xl:         80px;
  --gg-text-5xl:         120px;

  /* ─── Line heights ─── */
  --gg-leading-tight:    1.08;
  --gg-leading-snug:     1.25;
  --gg-leading-normal:   1.5;
  --gg-leading-relaxed:  1.65;

  /* ─── Letter spacing ─── */
  --gg-tracking-tight:   -0.04em;
  --gg-tracking-snug:    -0.02em;
  --gg-tracking-normal:  0em;
  --gg-tracking-wide:    0.08em;

  /* ─── Motion ─── */
  --gg-ease:             cubic-bezier(0.22, 1, 0.36, 1);
  --gg-ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --gg-duration-fast:    120ms;
  --gg-duration-base:    200ms;
  --gg-duration-slow:    400ms;
}

/* ============================================================
   LIGHT MODE — opt-in via [data-theme="light"] on <html> or any
   parent. White-first surface, near-black foreground, gradient
   still used as the only chromatic accent.

   Use light mode for: marketing pages, docs, dashboards where
   the audience expects defaults. Dark stays the product-default
   for the studio / app shell.
   ============================================================ */
[data-theme="light"] {
  /* Surfaces */
  --gg-bg:               #FFFFFF;
  --gg-bg-elev-1:        #FAFAFA;   /* card */
  --gg-bg-elev-2:        #F4F4F5;   /* nested card / popover */
  --gg-bg-elev-3:        #ECECEE;   /* dialog / menu */
  --gg-bg-navy:          #F4F6FF;   /* very pale tinted alt */

  /* Foreground — near-black, used as alpha for hierarchy */
  --gg-fg:               #0A0A0A;
  --gg-fg-2:             rgba(10, 10, 10, 0.66);
  --gg-fg-3:             rgba(10, 10, 10, 0.46);
  --gg-fg-4:             rgba(10, 10, 10, 0.28);

  /* Borders — darker hairlines on white */
  --gg-border:           rgba(10, 10, 10, 0.08);
  --gg-border-strong:    rgba(10, 10, 10, 0.16);
  --gg-border-focus:     rgba(155, 48, 255, 0.5);

  /* Shadows are slightly more visible on light */
  --gg-shadow-sm:        0 1px 2px rgba(10, 10, 10, 0.06);
  --gg-shadow-md:        0 6px 24px rgba(10, 10, 10, 0.08);
  --gg-shadow-lg:        0 24px 64px -12px rgba(10, 10, 10, 0.14);
  --gg-glow-accent:      0 0 0 1px rgba(155, 48, 255, 0.35), 0 8px 32px -8px rgba(155, 48, 255, 0.35);

  /* Accent soft is darker-tinted on white */
  --gg-accent-soft:      rgba(155, 48, 255, 0.10);
  --gg-gradient-soft:    linear-gradient(120deg, rgba(107,184,245,0.12) 0%, rgba(91,111,232,0.12) 50%, rgba(180,79,232,0.12) 100%);
}

/* Optional: follow OS preference automatically when no explicit theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    --gg-bg:               #FFFFFF;
    --gg-bg-elev-1:        #FAFAFA;
    --gg-bg-elev-2:        #F4F4F5;
    --gg-bg-elev-3:        #ECECEE;
    --gg-bg-navy:          #F4F6FF;
    --gg-fg:               #0A0A0A;
    --gg-fg-2:             rgba(10, 10, 10, 0.66);
    --gg-fg-3:             rgba(10, 10, 10, 0.46);
    --gg-fg-4:             rgba(10, 10, 10, 0.28);
    --gg-border:           rgba(10, 10, 10, 0.08);
    --gg-border-strong:    rgba(10, 10, 10, 0.16);
    --gg-shadow-sm:        0 1px 2px rgba(10, 10, 10, 0.06);
    --gg-shadow-md:        0 6px 24px rgba(10, 10, 10, 0.08);
    --gg-shadow-lg:        0 24px 64px -12px rgba(10, 10, 10, 0.14);
  }
}

/* ============================================================
   Semantic / element-level styles
   ============================================================ */

html, body {
  background: var(--gg-bg);
  color: var(--gg-fg);
  font-family: var(--gg-font-sans);
  font-size: var(--gg-text-base);
  line-height: var(--gg-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gg-display {
  font-family: var(--gg-font-display);
  font-weight: 500;
  font-size: var(--gg-text-5xl);
  line-height: var(--gg-leading-tight);
  letter-spacing: var(--gg-tracking-tight);
}

.gg-h1 {
  font-family: var(--gg-font-display);
  font-weight: 500;
  font-size: var(--gg-text-4xl);
  line-height: var(--gg-leading-tight);
  letter-spacing: var(--gg-tracking-tight);
}

.gg-h2 {
  font-family: var(--gg-font-display);
  font-weight: 500;
  font-size: var(--gg-text-3xl);
  line-height: var(--gg-leading-tight);
  letter-spacing: var(--gg-tracking-tight);
}

.gg-h3 {
  font-family: var(--gg-font-display);
  font-weight: 500;
  font-size: var(--gg-text-2xl);
  line-height: var(--gg-leading-snug);
  letter-spacing: var(--gg-tracking-snug);
}

.gg-h4 {
  font-family: var(--gg-font-sans);
  font-weight: 500;
  font-size: var(--gg-text-xl);
  line-height: var(--gg-leading-snug);
  letter-spacing: var(--gg-tracking-snug);
}

.gg-h5 {
  font-family: var(--gg-font-sans);
  font-weight: 500;
  font-size: var(--gg-text-lg);
  line-height: var(--gg-leading-snug);
}

.gg-body {
  font-family: var(--gg-font-sans);
  font-weight: 400;
  font-size: var(--gg-text-base);
  line-height: var(--gg-leading-relaxed);
  color: var(--gg-fg-2);
}

.gg-body-lg {
  font-family: var(--gg-font-sans);
  font-weight: 400;
  font-size: var(--gg-text-md);
  line-height: var(--gg-leading-relaxed);
  color: var(--gg-fg-2);
}

.gg-small {
  font-family: var(--gg-font-sans);
  font-weight: 400;
  font-size: var(--gg-text-sm);
  line-height: var(--gg-leading-normal);
  color: var(--gg-fg-3);
}

.gg-eyebrow {
  font-family: var(--gg-font-sans);
  font-weight: 500;
  font-size: var(--gg-text-xs);
  letter-spacing: var(--gg-tracking-wide);
  text-transform: uppercase;
  color: var(--gg-fg-3);
}

.gg-mono {
  font-family: var(--gg-font-mono);
  font-size: 0.92em;
  font-weight: 400;
}

/* Handwritten accent — Architects Daughter. Used SPARINGLY:
   one word per screen, callouts, ribbon labels, margin notes.
   Never on buttons, nav, body copy, or data.                 */
.gg-accent {
  font-family: var(--gg-font-accent);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gg-cyan);
}

.gg-gradient-text {
  background: var(--gg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}