/* ============================================================
   PSEO Agency — Design System Tokens
   The single source of truth: colors, type, spacing, motion.
   Import this in every artifact.
   ============================================================ */

/* ---------- Fonts ----------
   Variable font (full axes: GRAD, ROND, opsz, slnt, wdth, wght) is the
   canonical source. Static cuts are listed as fallbacks for browsers
   that ignore variable fonts. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/GoogleSansFlex-VariableFont_GRAD_ROND_opsz_slnt_wdth_wght.ttf") format("truetype-variations"),
       url("./fonts/GoogleSansFlex-VariableFont_GRAD_ROND_opsz_slnt_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex Display";
  src: url("./fonts/GoogleSansFlex-VariableFont_GRAD_ROND_opsz_slnt_wdth_wght.ttf") format("truetype-variations"),
       url("./fonts/GoogleSansFlex-VariableFont_GRAD_ROND_opsz_slnt_wdth_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 25% 151%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/GoogleSansFlex_24pt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/GoogleSansFlex_24pt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/GoogleSansFlex_24pt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex";
  src: url("./fonts/GoogleSansFlex_24pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex Display";
  src: url("./fonts/GoogleSansFlex_72pt-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex Display";
  src: url("./fonts/GoogleSansFlex_72pt-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Flex Display";
  src: url("./fonts/GoogleSansFlex_72pt-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR TOKENS
     ============================================================ */

  /* — Brand: Agency (the parent / primary marketing brand) — */
  /* Cyan→Blue gradient. Usage: hero gradients, primary CTAs, accent fills. */
  --pseo-cyan-400:   #22d3ee;   /* gradient start  */
  --pseo-blue-500:   #2563eb;   /* gradient end, primary action */
  --pseo-blue-600:   #1d4ed8;   /* hover */
  --pseo-blue-deep:  #062c7f;   /* logo "P", deep accent  */

  /* — Brand: Builder (sub-brand for the SaaS app) — */
  /* Violet gradient. Usage: Builder pages only — keeps surfaces visually distinct. */
  --pseo-violet-400: #a78bfa;
  --pseo-violet-500: #8b5cf6;   /* gradient mid */
  --pseo-violet-600: #7c3aed;   /* primary action on Builder pages */
  --pseo-violet-700: #6d28d9;
  --pseo-purple-400: #c084fc;   /* secondary tint */
  --pseo-purple-500: #a556f7;   /* gradient start (Builder) */
  --pseo-indigo-500: #6366f1;   /* gradient end (Builder) */

  /* — Brand: Academy (sub-brand for education / engineering / open product) — */
  /* Emerald gradient. Reserved for Academy surfaces and "go / success" semantics. */
  --pseo-emerald-400: #34d399;
  --pseo-emerald-500: #10b981;
  --pseo-green-500:   #04a146;
  --pseo-green-600:   #03873a;
  --pseo-mint-500:    #45c57b;

  /* — Neutrals — */
  /* Surfaces, body type, dividers. Use ink-* for text, surface-* for fills, line-* for borders. */
  --ink-1000:        #09121f;   /* footer / hero overlay backgrounds */
  --ink-900:         #181f2c;   /* primary headings */
  --ink-700:         #2d3c58;   /* body emphasis */
  --ink-500:         #627393;   /* body / muted */
  --ink-400:         #8b95ab;   /* placeholder */
  --ink-300:         #d6d7e8;   /* disabled text */

  --surface-0:       #ffffff;   /* page */
  --surface-50:      #fafbfd;
  --surface-100:     #f1f5f9;   /* section bg */
  --surface-150:     #eef1ff;   /* tinted surface */
  --surface-200:     #ededf8;   /* card hover */

  --line-100:        #eff2f8;   /* hairlines (navbar, dividers) */
  --line-200:        #e5e7eb;   /* default border */
  --line-300:        #dadada;   /* badge border */
  --line-400:        #dddef4;   /* card border */

  /* — Semantic — */
  --success:         #04a146;
  --warning:         #e98614;
  --danger:          #df1f49;
  --info:            #2563eb;

  /* — Shadows — */
  --shadow-card:        0 3px 43px -17px rgba(37,99,235,0.10);
  --shadow-card-hover:  0 4px 50px -14px rgba(37,99,235,0.50);
  --shadow-builder:     0 3px 42px -16px rgba(124,58,237,0.45);
  --shadow-cta-blue:    0 -1px 70.8px -16px rgba(37,99,235,0.45);
  --shadow-cta-violet:  0 -1px 70.8px -16px rgba(167,139,250,1);

  /* — Brand gradients (always reach for these before inventing one) — */
  --grad-agency:       linear-gradient(135deg, #22d3ee 0%, #2563eb 100%);
  --grad-agency-soft:  linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(192,132,252,0.10) 100%);
  --grad-builder:      linear-gradient(96deg,  #a556f7 0%, #6366f1 100%);
  --grad-core:         linear-gradient(135deg, #34d399 0%, #04a146 100%);
  --grad-academy:      linear-gradient(135deg, #34d399 0%, #04a146 100%);
  --grad-spectrum:     linear-gradient(90deg,  #22d3ee 0%, #2563eb 33%, #7c3aed 66%, #34d399 100%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Google Sans Flex Display", "Google Sans Flex", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", Consolas, Menlo, monospace;

  /* Display: hero + section headlines. Tight tracking, medium/semibold weight. */
  --type-display-xl:   600 clamp(56px, 7vw, 96px) / 1.06 var(--font-display);
  --type-display-l:    600 clamp(40px, 5vw, 72px) / 1.08 var(--font-display);
  --type-display-m:    500 clamp(32px, 3.5vw, 56px) / 1.10 var(--font-display);

  /* Heading: card titles, section labels. */
  --type-h1:           600 40px/1.15 var(--font-sans);
  --type-h2:           600 28px/1.25 var(--font-sans);
  --type-h3:           600 20px/1.30 var(--font-sans);
  --type-h4:           600 16px/1.35 var(--font-sans);

  /* Body: prose, descriptions. */
  --type-body-l:       400 18px/1.55 var(--font-sans);
  --type-body:         400 16px/1.55 var(--font-sans);
  --type-body-s:       400 14px/1.50 var(--font-sans);

  /* Label: uppercase eyebrows, badges, metadata. */
  --type-eyebrow:      500 14px/1   var(--font-sans);
  --type-label:        500 13px/1.2 var(--font-sans);
  --type-caption:      400 12px/1.4 var(--font-sans);

  --tracking-display:  -0.02em;   /* tight headlines */
  --tracking-tight:    -0.01em;   /* h1–h3 */
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;    /* eyebrows */

  /* ============================================================
     SPACING
     8-point grid. Use these — don't invent in-between values.
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ============================================================
     RADII
     Generous and consistent. Cards = 20–25, inputs = 12, pills = 999.
     ============================================================ */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  25px;
  --radius-pill: 9999px;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container:       1280px;
  --container-wide:  1440px;
  --gutter:          clamp(20px, 4vw, 40px);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:      150ms;
  --dur-base:      300ms;
  --dur-slow:      600ms;
}

/* ---------- Utility classes ---------- */
.pseo-gradient-text {
  background: var(--grad-agency);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pseo-gradient-bg {
  background: var(--grad-agency);
}
.builder-gradient-text {
  background: var(--grad-builder);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.builder-gradient-bg { background: var(--grad-builder); }
.core-gradient-text {
  background: var(--grad-core);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.core-gradient-bg { background: var(--grad-core); }

/* ---------- Reset (light) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--type-body);
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }