/* ============================================================
   UpScale — Design Tokens
   colors_and_type.css

   Loaded by every UI kit, slide deck, and preview card.
   Owns: color tokens, typography tokens, spacing, radii,
   shadows, motion, and semantic type roles.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* ─── Brand: UpScale azul ───────────────────────────────── */
  --us-blue-50:  #EEF5FF;
  --us-blue-100: #D5E5FF;
  --us-blue-200: #A8CAFF;
  --us-blue-300: #7AAEFF;      /* electric — sparingly */
  --us-blue-400: #4D96FF;      /* PRIMARY brand */
  --us-blue-500: #2D7AEE;
  --us-blue-600: #1F5FCC;
  --us-blue-700: #1846A0;
  --us-blue-800: #11316F;
  --us-blue-900: #0A1D44;

  /* Glow halo (used on hover / focus, large soft shadows) */
  --us-blue-glow:  color-mix(in oklab, var(--us-blue-400) 35%, transparent);
  --us-blue-tint:  color-mix(in oklab, var(--us-blue-400) 12%, transparent);

  /* Legacy aliases — keep `--us-green-*` resolving to blue so older
     component CSS doesn't break during the rebrand transition. */
  --us-green-50:   var(--us-blue-50);
  --us-green-100:  var(--us-blue-100);
  --us-green-200:  var(--us-blue-200);
  --us-green-300:  var(--us-blue-300);
  --us-green-400:  var(--us-blue-400);
  --us-green-500:  var(--us-blue-500);
  --us-green-600:  var(--us-blue-600);
  --us-green-700:  var(--us-blue-700);
  --us-green-800:  var(--us-blue-800);
  --us-green-900:  var(--us-blue-900);
  --us-green-glow: var(--us-blue-glow);
  --us-green-tint: var(--us-blue-tint);

  /* ─── Neutrals: warm-cool dark ink (subtle blue tint) ───── */
  --us-ink-0:   #060810;   /* deepest, used for slide section dividers */
  --us-ink-1:   #0A0E16;   /* page canvas (dark) */
  --us-ink-2:   #0F141E;   /* base surface */
  --us-ink-3:   #161D28;   /* card surface */
  --us-ink-4:   #1E2733;   /* elevated surface, hovered */
  --us-ink-5:   #2A3340;   /* line / divider */
  --us-ink-6:   #3A4456;   /* line-strong / pressed border */
  --us-ink-7:   #4F5A6E;   /* muted icon */
  --us-ink-8:   #6B7689;   /* tertiary text */
  --us-ink-9:   #95A0B3;   /* secondary text */
  --us-ink-10:  #C6CDD9;   /* primary-on-dark */
  --us-ink-11:  #ECF0F7;   /* high-emphasis text */
  --us-ink-12:  #FFFFFF;

  /* ─── Light surfaces (used on a handful of slides + email) ─ */
  --us-paper:        #F4F6FA;
  --us-paper-2:      #EAEEF4;
  --us-paper-card:   #FFFFFF;
  --us-on-paper:     #0A1018;
  --us-on-paper-2:   #4F5A6E;

  /* ─── Semantic ──────────────────────────────────────────── */
  --us-bg:           var(--us-ink-1);
  --us-bg-elevated:  var(--us-ink-3);
  --us-bg-sunk:      var(--us-ink-0);
  --us-surface:      var(--us-ink-3);
  --us-surface-hi:   var(--us-ink-4);
  --us-border:       var(--us-ink-5);
  --us-border-hi:    var(--us-ink-6);
  --us-fg:           var(--us-ink-11);
  --us-fg-muted:     var(--us-ink-9);
  --us-fg-faint:     var(--us-ink-8);
  --us-fg-disabled:  var(--us-ink-7);
  --us-accent:       var(--us-blue-400);
  --us-accent-hover: var(--us-blue-300);
  --us-accent-press: var(--us-blue-500);
  --us-on-accent:    var(--us-ink-1);

  /* States */
  --us-success: #34D399;
  --us-warning: #FFB454;
  --us-danger:  #FF6B6B;
  --us-info:    var(--us-blue-300);

  /* ─── Typography families ───────────────────────────────── */
  --us-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --us-font-sans:    "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --us-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ─── Type scale (modular ~1.18 ratio, tuned by hand) ───── */
  --us-text-2xs:  10px;
  --us-text-xs:   12px;
  --us-text-sm:   14px;
  --us-text-base: 15px;
  --us-text-md:   17px;
  --us-text-lg:   20px;
  --us-text-xl:   24px;
  --us-text-2xl:  30px;
  --us-text-3xl:  38px;
  --us-text-4xl:  48px;
  --us-text-5xl:  64px;
  --us-text-6xl:  84px;
  --us-text-7xl:  108px;

  /* Tracking */
  --us-tracking-tightest: -0.04em;
  --us-tracking-tighter:  -0.025em;
  --us-tracking-tight:    -0.015em;
  --us-tracking-normal:   0;
  --us-tracking-wide:     0.04em;
  --us-tracking-mono:     0.06em;       /* for eyebrows */

  /* Line heights */
  --us-leading-tight:  1.05;
  --us-leading-snug:   1.2;
  --us-leading-normal: 1.45;
  --us-leading-relaxed: 1.6;

  /* ─── Spacing scale (4-pt grid, geometric beyond 32) ────── */
  --us-space-0:  0;
  --us-space-1:  4px;
  --us-space-2:  8px;
  --us-space-3:  12px;
  --us-space-4:  16px;
  --us-space-5:  20px;
  --us-space-6:  24px;
  --us-space-8:  32px;
  --us-space-10: 40px;
  --us-space-12: 48px;
  --us-space-16: 64px;
  --us-space-20: 80px;
  --us-space-24: 96px;
  --us-space-32: 128px;

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

  /* ─── Shadows / elevation ───────────────────────────────── */
  /* Dark-first: shadows are subtle; "elevation" mostly comes
     from a thin top-edge highlight + a soft outer halo.       */
  --us-shadow-sm:
    0 1px 0 0 color-mix(in oklab, white 4%, transparent) inset,
    0 1px 2px rgb(0 0 0 / 0.6);
  --us-shadow-md:
    0 1px 0 0 color-mix(in oklab, white 5%, transparent) inset,
    0 6px 16px -4px rgb(0 0 0 / 0.55),
    0 2px 4px rgb(0 0 0 / 0.4);
  --us-shadow-lg:
    0 1px 0 0 color-mix(in oklab, white 6%, transparent) inset,
    0 24px 48px -12px rgb(0 0 0 / 0.6),
    0 8px 20px -6px rgb(0 0 0 / 0.4);
  --us-shadow-glow:
    0 0 0 1px var(--us-green-400),
    0 0 24px -4px var(--us-green-glow);
  --us-focus-ring:
    0 0 0 2px var(--us-bg),
    0 0 0 4px var(--us-blue-400);

  /* Inner highlights for "lit from above" feel */
  --us-edge-top:    inset 0 1px 0 0 color-mix(in oklab, white 7%, transparent);
  --us-edge-bottom: inset 0 -1px 0 0 color-mix(in oklab, black 30%, transparent);

  /* ─── Motion ────────────────────────────────────────────── */
  --us-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --us-ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --us-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --us-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --us-dur-instant: 80ms;
  --us-dur-fast:    140ms;
  --us-dur-base:    220ms;
  --us-dur-slow:    400ms;
  --us-dur-slower:  700ms;

  /* ─── Layout ────────────────────────────────────────────── */
  --us-container:    1280px;
  --us-container-md: 1080px;
  --us-container-sm: 720px;
  --us-gutter:       32px;
}

/* ============================================================
   Base resets + semantic type roles
   ============================================================ */

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

body {
  margin: 0;
  background: var(--us-bg);
  color: var(--us-fg);
  font-family: var(--us-font-sans);
}

::selection {
  background: var(--us-green-400);
  color: var(--us-ink-1);
}

/* Semantic typography classes.
   Naming: us-display, us-h1..h4, us-body, us-eyebrow, us-mono, us-caption.
   Use these directly OR copy their declarations into components. */

.us-display {
  font-family: var(--us-font-display);
  font-weight: 700;
  font-size: var(--us-text-6xl);
  line-height: var(--us-leading-tight);
  letter-spacing: var(--us-tracking-tightest);
}

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

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

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

.us-h4 {
  font-family: var(--us-font-sans);
  font-weight: 600;
  font-size: var(--us-text-lg);
  line-height: var(--us-leading-snug);
  letter-spacing: var(--us-tracking-tight);
}

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

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

.us-caption {
  font-family: var(--us-font-sans);
  font-weight: 500;
  font-size: var(--us-text-xs);
  line-height: var(--us-leading-snug);
  color: var(--us-fg-faint);
}

.us-eyebrow {
  font-family: var(--us-font-mono);
  font-weight: 500;
  font-size: var(--us-text-xs);
  letter-spacing: var(--us-tracking-mono);
  text-transform: uppercase;
  color: var(--us-accent);
}

.us-mono {
  font-family: var(--us-font-mono);
  font-weight: 500;
  font-size: var(--us-text-sm);
  letter-spacing: 0;
  color: var(--us-fg);
}

.us-code {
  font-family: var(--us-font-mono);
  font-size: 0.92em;
  background: var(--us-ink-3);
  border: 1px solid var(--us-border);
  padding: 1px 6px;
  border-radius: var(--us-radius-xs);
  color: var(--us-blue-300);
}

/* ============================================================
   Utility primitives used across kits
   ============================================================ */

.us-grid-bg {
  /* Subtle 32-px terminal grid. Apply to a section, not body. */
  background-image:
    linear-gradient(to right, var(--us-ink-5) 1px, transparent 1px),
    linear-gradient(to bottom, var(--us-ink-5) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

.us-grid-bg-fade {
  /* same as us-grid-bg, but fades out toward edges via mask */
  background-image:
    linear-gradient(to right, var(--us-ink-5) 1px, transparent 1px),
    linear-gradient(to bottom, var(--us-ink-5) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.us-noise {
  /* Tiny noise overlay; pair with mix-blend-mode: overlay */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.04;
  pointer-events: none;
}