/* ════════════════════════════════════════════════════════════════════
   GP LINK — DESIGN TOKENS  (single source of truth for the GP-side UI)
   Loaded on every GP-facing page BEFORE the page's inline <style>.
   Pages consume these via var(--gp-*). Do not redefine these locally.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand core ─────────────────────────────────────────────── */
  --gp-blue: #2563eb;            /* primary action */
  --gp-blue-deep: #1d4ed8;       /* hover / emphasis */
  --gp-blue-ink: #173da6;        /* pressed / dense text on tint */
  --gp-blue-soft: #eff4ff;       /* tinted fills */
  --gp-blue-border: #d6e2fb;     /* tinted borders */
  --gp-grad-brand: linear-gradient(135deg, #2e6bf0 0%, #1d4ed8 100%);

  /* ── Ink & neutrals ─────────────────────────────────────────── */
  --gp-ink: #0f172a;             /* headings / primary text */
  --gp-text: #1f2b43;            /* body text */
  --gp-muted: #64748b;           /* secondary text */
  --gp-faint: #94a3b8;           /* tertiary / placeholders */
  --gp-border: #e3e9f4;          /* hairlines, card borders */
  --gp-border-strong: #cbd7ea;   /* inputs, emphasized rules */

  /* ── Surfaces ───────────────────────────────────────────────── */
  --gp-canvas: #f4f6fb;          /* page background, app-wide */
  --gp-surface: #ffffff;         /* cards, sheets */
  --gp-surface-sunken: #f8fafd;  /* wells, table headers, code */
  --gp-hero-ink: #0b1322;        /* dark hero panels */
  --gp-grad-hero: linear-gradient(160deg, #0b1322 0%, #14203a 55%, #0e1a30 100%);

  /* ── Status (one of each — no variants) ─────────────────────── */
  --gp-green: #16a34a;        --gp-green-soft: #eafaf0;  --gp-green-border: #c5ecd4;
  --gp-amber: #d97706;        --gp-amber-soft: #fdf3e1;  --gp-amber-border: #f4ddb0;
  --gp-red:   #dc2626;        --gp-red-soft:   #fdf0f0;  --gp-red-border:   #f5cfcf;
  --gp-info:  #2563eb;        --gp-info-soft:  #eff4ff;  --gp-info-border:  #d6e2fb;
  /* Ink variants: text on the -soft fills (≥4.5:1 at small sizes) */
  --gp-green-ink: #166534;    --gp-amber-ink: #92400e;   --gp-red-ink: #991b1b;

  /* ── Typography ─────────────────────────────────────────────── */
  --gp-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gp-font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --gp-fs-xs: 12px;
  --gp-fs-sm: 13px;
  --gp-fs-base: 15px;
  --gp-fs-md: 17px;
  --gp-fs-lg: 20px;
  --gp-fs-xl: 24px;
  --gp-fs-2xl: clamp(28px, 4.5vw, 34px);
  --gp-fs-hero: clamp(30px, 6vw, 42px);
  --gp-tracking-label: 0.08em;   /* uppercase micro-labels */

  /* ── Radii ──────────────────────────────────────────────────── */
  --gp-r-sm: 10px;               /* chips, small controls */
  --gp-r-md: 14px;               /* buttons, inputs */
  --gp-r-lg: 18px;               /* cards */
  --gp-r-xl: 24px;               /* sheets, modals, hero panels */
  --gp-r-pill: 999px;

  /* ── Elevation (exactly three levels) ───────────────────────── */
  --gp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 2px 10px -4px rgba(15, 23, 42, 0.08);
  --gp-shadow-md: 0 10px 30px -18px rgba(15, 23, 42, 0.28);
  --gp-shadow-lg: 0 24px 55px -24px rgba(2, 6, 23, 0.42);

  /* ── Glass (one recipe) ─────────────────────────────────────── */
  --gp-glass-bg: rgba(255, 255, 255, 0.72);
  --gp-glass-blur: saturate(1.5) blur(18px);
  --gp-glass-border: rgba(255, 255, 255, 0.55);

  /* ── Focus & motion ─────────────────────────────────────────── */
  --gp-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
  --gp-ease: cubic-bezier(0.22, 0.61, 0.21, 1);
  --gp-dur-fast: 0.16s;
  --gp-dur: 0.28s;
  --gp-dur-slow: 0.5s;

  /* ── Spacing (8px grid) ─────────────────────────────────────── */
  --gp-sp-1: 4px;  --gp-sp-2: 8px;  --gp-sp-3: 12px; --gp-sp-4: 16px;
  --gp-sp-5: 20px; --gp-sp-6: 24px; --gp-sp-8: 32px; --gp-sp-10: 40px;
}

/* ── Base polish (safe, additive) ─────────────────────────────── */
::selection { background: rgba(37, 99, 235, 0.16); color: var(--gp-ink); }

@media (min-width: 860px) {
  * { scrollbar-width: thin; scrollbar-color: #c3cfe3 transparent; }
  *::-webkit-scrollbar { width: 8px; height: 8px; }
  *::-webkit-scrollbar-thumb { background: #c3cfe3; border-radius: 999px; }
  *::-webkit-scrollbar-track { background: transparent; }
}

/* ── Entrance reveal utility ──────────────────────────────────── */
@keyframes gpFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gp-reveal { animation: gpFadeUp var(--gp-dur-slow) var(--gp-ease) both; }
.gp-reveal-1 { animation-delay: 0.05s; }
.gp-reveal-2 { animation-delay: 0.12s; }
.gp-reveal-3 { animation-delay: 0.19s; }
.gp-reveal-4 { animation-delay: 0.26s; }
.gp-reveal-5 { animation-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  .gp-reveal, .gp-reveal-1, .gp-reveal-2, .gp-reveal-3, .gp-reveal-4, .gp-reveal-5 {
    animation: none;
  }
}