/* Glassy Shared Design Tokens — DOCS SURFACE
 * Mirror of glassy-www/src/styles/glassy-tokens.css and glassy-learn/src/styles/glassy-tokens.css.
 * Per-site accent differs:
 *   - www  : blue-purple (default brand)
 *   - learn: teal
 *   - docs : amber (#fbbf24) — wheel complement to teal, warm foil to the cool brand family.
 * Shared properties (gradient, fonts, spacing, radius, max-width) stay identical
 * across all three surfaces so the family is visually consistent.
 */

:root {
  /* Brand gradient (wordmark only — shared cross-site, never changes) */
  --glassy-gradient: linear-gradient(135deg, #60a5fa, #c084fc, #6ee7b7);

  /* DOCS accent — amber.
     Why amber:
      - ~150° wheel complement to teal (learn). Distinguishable but related.
      - Warm foil to the cool brand palette (blue-purple, teal).
      - "Literary / knowledge" tone fits a reference surface.
     Companion tokens (--glassy-accent, --glassy-accent-hover, --glassy-accent-light)
     are intentionally re-pointed to amber on the docs surface only. */
  --glassy-accent: #fbbf24;          /* amber-400 — primary accent */
  --glassy-accent-hover: #f59e0b;    /* amber-500 — hover state */
  --glassy-accent-light: #fde047;    /* yellow-300 — heading / soft variant */
  --glassy-accent-soft: rgba(251, 191, 36, 0.14);  /* border/bg tint */
  --glassy-accent-glow: rgba(251, 191, 36, 0.35);  /* glow halo */

  /* Typography */
  --glassy-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --glassy-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --glassy-font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace;

  /* Spacing scale */
  --glassy-space-xs: 0.5rem;
  --glassy-space-sm: 1rem;
  --glassy-space-md: 1.5rem;
  --glassy-space-lg: 2rem;
  --glassy-space-xl: 3rem;
  --glassy-space-2xl: 4rem;

  /* Border radius */
  --glassy-radius-sm: 0.5rem;
  --glassy-radius-md: 0.75rem;
  --glassy-radius-lg: 1rem;
  --glassy-radius-xl: 1.5rem;

  /* Surface opacity (shared glass effect) */
  --glassy-surface-opacity: 0.05;
  --glassy-border-opacity: 0.06;

  /* Max width */
  --glassy-max-width: 1400px;

  /* Ecosystem bar */
  --glassy-bar-height: 36px;
  --glassy-bar-font-size: 13px;

  /* Dark-only base palette (also exposed as CSS variables for Material override) */
  --glassy-base: #050505;
  --glassy-base-soft: #0a0a0a;
  --glassy-ink-50:  #f8fafc;
  --glassy-ink-100: #f1f5f9;
  --glassy-ink-200: #e2e8f0;
  --glassy-ink-300: #cbd5e1;
  --glassy-ink-400: #94a3b8;
  --glassy-ink-500: #64748b;
  --glassy-ink-900: #0f172a;
  --glassy-ink-950: #020617;
}