/* ─────────────────────────────────────────────────────────
   Playseer Labs — Design Tokens
   Drop-in CSS variables for colors, type, spacing, effects.
   ───────────────────────────────────────────────────────── */

/* Brand typeface: Cabin (variable, wdth + wght axes). */
@font-face {
  font-family: 'Cabin';
  src: url('fonts/Cabin-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('fonts/Cabin-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  font-style: normal;
}
/* Mono fallback only — no display fallback needed once Cabin is loaded */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand · Primary palette ───────────────────────────── */
  --ps-cyan:      #00D4FF;
  --ps-blue:      #4AA6BF;
  --ps-purple:    #8A3FFC;
  --ps-magenta:   #C44DFF;
  --ps-off-white: #F7F7FA;

  /* ── Neutrals ──────────────────────────────────────────── */
  --ps-bg-0:      #0A0C14;   /* primary background — near-black */
  --ps-bg-1:      #11131A;   /* secondary background */
  --ps-bg-2:      #1A1D26;   /* card / panel */
  --ps-border:    #2A2F3D;   /* borders, dividers */
  --ps-muted:     #6B7280;   /* secondary labels */
  --ps-light:     #E5E7EB;   /* light-mode text / subtle light */

  /* ── Semantic foreground / background ──────────────────── */
  --fg-1: var(--ps-off-white);  /* primary text */
  --fg-2: var(--ps-light);      /* high-contrast secondary */
  --fg-3: var(--ps-muted);      /* muted / supporting */
  --bg-0: var(--ps-bg-0);
  --bg-1: var(--ps-bg-1);
  --bg-2: var(--ps-bg-2);
  --border-1: var(--ps-border);
  --border-2: rgba(138, 63, 252, 0.30);  /* purple glow border */
  --border-3: rgba(0, 212, 255, 0.30);   /* cyan glow border */

  /* ── Signature gradient ────────────────────────────────── */
  --ps-gradient: linear-gradient(
    90deg,
    #00D4FF 0%,
    #4AA6BF 30%,
    #8A3FFC 70%,
    #C44DFF 100%
  );
  --ps-gradient-diag: linear-gradient(
    135deg,
    #00D4FF 0%,
    #4AA6BF 30%,
    #8A3FFC 70%,
    #C44DFF 100%
  );
  --ps-gradient-vert: linear-gradient(
    180deg,
    #00D4FF 0%,
    #4AA6BF 30%,
    #8A3FFC 70%,
    #C44DFF 100%
  );
  /* Subtle gradient — for backgrounds where full saturation would shout */
  --ps-gradient-soft: linear-gradient(
    135deg,
    rgba(0, 212, 255, 0.18),
    rgba(138, 63, 252, 0.18),
    rgba(196, 77, 255, 0.18)
  );

  /* ── Type families ─────────────────────────────────────── */
  --font-display: 'Cabin', system-ui, sans-serif;
  --font-body:    'Cabin', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Type scale (1.250 major-third) ────────────────────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;
  --text-6xl:  96px;

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

  /* ── Tracking ──────────────────────────────────────────── */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;   /* used by labels, wordmark */
  --tracking-mega:   0.24em;   /* hero eyebrow */

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

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ── Elevation / shadows ───────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 24px 64px rgba(0, 0, 0, 0.55);
  /* Brand glows — gradient edge halos */
  --glow-cyan:    0 0 32px rgba(0, 212, 255, 0.45);
  --glow-purple:  0 0 32px rgba(138, 63, 252, 0.55);
  --glow-magenta: 0 0 32px rgba(196, 77, 255, 0.45);
  --glow-soft:    0 0 48px rgba(138, 63, 252, 0.25),
                  0 0 96px rgba(0, 212, 255, 0.15);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
}

/* ── Base reset / dark default ─────────────────────────── */
html, body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic type styles ──────────────────────────────── */
.ps-eyebrow,
[data-ps="eyebrow"] {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ps-h1, h1[data-ps="h1"] {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1.02;
  color: var(--fg-1);
  text-wrap: balance;
}

.ps-h2, h2[data-ps="h2"] {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  color: var(--fg-1);
  text-wrap: balance;
}

.ps-h3, h3[data-ps="h3"] {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--w-medium);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--fg-1);
}

.ps-body, p[data-ps="body"] {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--w-regular);
  line-height: 1.6;
  color: var(--fg-2);
  text-wrap: pretty;
}

.ps-label, [data-ps="label"] {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}

.ps-code, code, [data-ps="code"] {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ps-cyan);
  background: rgba(0, 212, 255, 0.08);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

/* ── Utility: gradient text ────────────────────────────── */
.ps-gradient-text {
  background: var(--ps-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ── Utility: hairline divider with gradient ───────────── */
.ps-rule {
  height: 1px;
  border: 0;
  background: var(--ps-gradient);
  opacity: 0.7;
}