/* =========================================================
   LEARNING REWIRED STUDIO — MASTER DESIGN TOKENS V1
   Location: /assets/css/studio-tokens.css

   Purpose:
   Shared Studio-wide variables for color, typography, shadows,
   radii, spacing, borders, gradients, and app-shell styling.

   Load order:
   1. /global.css
   2. /assets/css/studio-tokens.css
   3. Page-specific Studio CSS
   ========================================================= */

:root {
  /* =========================================================
     CORE COLORS
     ========================================================= */

  --studio-ink: #07111f;
  --studio-ink-soft: rgba(7, 17, 31, 0.72);
  --studio-muted: rgba(7, 17, 31, 0.62);
  --studio-faint: rgba(7, 17, 31, 0.42);
  --studio-subtle: rgba(7, 17, 31, 0.28);

  --studio-white: #ffffff;
  --studio-bg: #eef2f7;
  --studio-bg-soft: #f8fafc;
  --studio-panel: #ffffff;
  --studio-panel-soft: #f8fafc;

  --studio-line: rgba(15, 23, 42, 0.08);
  --studio-line-strong: rgba(15, 23, 42, 0.14);
  --studio-line-dark: rgba(255, 255, 255, 0.10);

  /* =========================================================
     BRAND / SIGNAL COLORS
     Color-blind-friendly note:
     Do not rely on color alone for state. Use labels/icons too.
     ========================================================= */

  --studio-blue: #2563eb;
  --studio-blue-dark: #123f9c;
  --studio-blue-soft: rgba(37, 99, 235, 0.10);
  --studio-blue-glow: rgba(37, 99, 235, 0.16);

  --studio-teal: #14b8a6;
  --studio-teal-soft: rgba(20, 184, 166, 0.12);
  --studio-teal-glow: rgba(20, 184, 166, 0.18);

  --studio-purple: #7c3aed;
  --studio-purple-soft: rgba(124, 58, 237, 0.10);

  --studio-navy: #07111f;
  --studio-navy-soft: #0f172a;

  --studio-info: #2563eb;
  --studio-success: #0f766e;
  --studio-warning: #b45309;
  --studio-danger: #b91c1c;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --studio-font:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --studio-weight-regular: 400;
  --studio-weight-medium: 650;
  --studio-weight-bold: 820;
  --studio-weight-heavy: 950;

  --studio-tracking-tight: -0.055em;
  --studio-tracking-tighter: -0.07em;
  --studio-tracking-wide: 0.13em;
  --studio-tracking-wider: 0.14em;

  --studio-text-xs: 0.72rem;
  --studio-text-sm: 0.84rem;
  --studio-text-md: 0.94rem;
  --studio-text-base: 1rem;
  --studio-text-lg: 1.12rem;
  --studio-text-xl: 1.42rem;

  --studio-h1: clamp(28px, 3vw, 44px);
  --studio-hero: clamp(42px, 5.7vw, 84px);
  --studio-section-title: clamp(26px, 3vw, 42px);
  --studio-panel-title: clamp(28px, 3.2vw, 46px);

  /* =========================================================
     RADII
     ========================================================= */

  --studio-radius-xs: 10px;
  --studio-radius-sm: 14px;
  --studio-radius-md: 16px;
  --studio-radius-lg: 20px;
  --studio-radius-xl: 24px;
  --studio-radius-2xl: 28px;
  --studio-radius-3xl: 30px;
  --studio-radius-4xl: 34px;
  --studio-radius-5xl: 36px;
  --studio-radius-pill: 999px;

  /* =========================================================
     SHADOWS
     ========================================================= */

  --studio-shadow-soft: 0 14px 40px rgba(15, 23, 42, 0.07);
  --studio-shadow: 0 24px 70px rgba(15, 23, 42, 0.10);
  --studio-shadow-strong: 0 30px 90px rgba(15, 23, 42, 0.14);

  --studio-shadow-blue: 0 14px 30px rgba(37, 99, 235, 0.22);
  --studio-shadow-blue-soft: 0 24px 70px rgba(37, 99, 235, 0.14);
  --studio-shadow-dark: 0 22px 54px rgba(0, 0, 0, 0.20);

  /* =========================================================
     GRADIENTS
     ========================================================= */

  --studio-gradient-primary:
    linear-gradient(135deg, #080b12 0%, #123f9c 50%, #2563eb 100%);

  --studio-gradient-sidebar-active:
    linear-gradient(135deg, rgba(37, 99, 235, 0.88), rgba(20, 184, 166, 0.42));

  --studio-gradient-brand:
    linear-gradient(135deg, #2563eb 0%, #5b4df5 42%, #7c3aed 70%, #14b8a6 100%);

  --studio-bg-gradient:
    radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.13), transparent 32%),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.10), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);

  --studio-panel-gradient:
    radial-gradient(circle at 90% 14%, rgba(37, 99, 235, 0.12), transparent 32%),
    radial-gradient(circle at 12% 90%, rgba(20, 184, 166, 0.10), transparent 34%),
    #ffffff;

  --studio-card-gradient:
    radial-gradient(circle at 86% 12%, rgba(37, 99, 235, 0.08), transparent 28%),
    #ffffff;

  --studio-card-gradient-active:
    radial-gradient(circle at 82% 14%, rgba(37, 99, 235, 0.16), transparent 30%),
    radial-gradient(circle at 16% 86%, rgba(20, 184, 166, 0.12), transparent 30%),
    #ffffff;

  --studio-dark-card-gradient:
    radial-gradient(circle at 86% 16%, rgba(37, 99, 235, 0.20), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(20, 184, 166, 0.14), transparent 34%),
    #07111f;

  /* =========================================================
     SPACING
     ========================================================= */

  --studio-space-1: 4px;
  --studio-space-2: 8px;
  --studio-space-3: 12px;
  --studio-space-4: 16px;
  --studio-space-5: 20px;
  --studio-space-6: 24px;
  --studio-space-7: 28px;
  --studio-space-8: 32px;
  --studio-space-10: 40px;
  --studio-space-12: 48px;
  --studio-space-14: 56px;

  --studio-page-pad: 26px;
  --studio-page-pad-mobile: 16px;
  --studio-sidebar-width: 260px;
  --studio-sidebar-width-compact: 230px;
  --studio-right-rail-width: 310px;

  /* =========================================================
     COMPONENT TOKENS
     ========================================================= */

  --studio-button-height: 42px;
  --studio-button-height-lg: 48px;
  --studio-input-height: 50px;

  --studio-icon-sm: 24px;
  --studio-icon-md: 36px;
  --studio-icon-lg: 44px;
  --studio-icon-xl: 52px;

  --studio-transition-fast: 0.18s ease;
  --studio-transition-med: 0.22s ease;
}

/* =========================================================
   OPTIONAL SHARED STUDIO BASE
   These are intentionally light so page CSS can still control layout.
   ========================================================= */

.studio-app-base,
.studio-app-base button,
.studio-app-base input,
.studio-app-base textarea,
.studio-app-base select {
  font-family: var(--studio-font);
}

.studio-app-base {
  color: var(--studio-ink);
  background: var(--studio-bg-gradient);
}

.studio-app-base h1,
.studio-app-base h2,
.studio-app-base h3,
.studio-app-base h4,
.studio-app-base p {
  margin-top: 0;
}

.studio-token-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--studio-button-height);
  padding: 0 16px;
  border-radius: var(--studio-radius-pill);
  font-size: var(--studio-text-sm);
  font-weight: var(--studio-weight-heavy);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--studio-transition-fast),
    box-shadow var(--studio-transition-fast);
}

.studio-token-btn:hover {
  transform: translateY(-2px);
}

.studio-token-btn-primary {
  background: var(--studio-gradient-primary);
  color: #ffffff;
  box-shadow: var(--studio-shadow-blue);
}

.studio-token-btn-secondary {
  border: 1px solid var(--studio-line);
  background: var(--studio-panel);
  color: var(--studio-ink);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.studio-token-eyebrow {
  margin: 0 0 8px;
  color: var(--studio-blue);
  font-size: 11px;
  font-weight: var(--studio-weight-heavy);
  letter-spacing: var(--studio-tracking-wider);
  line-height: 1;
  text-transform: uppercase;
}

.studio-token-card {
  border: 1px solid var(--studio-line);
  border-radius: var(--studio-radius-3xl);
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .studio-token-btn,
  .studio-token-btn:hover {
    transition: none !important;
    transform: none !important;
  }
}