/* =====================================================
   TehGuys Design Token SSOT
   Craft/Arc Playful palette + shared structural tokens.
   All CSS custom properties are defined HERE once.
   static/core/theme.css consumes these vars; it does
   not redefine any name declared in this file.
   Mirrors frontend/src/styles/tokens.css (React side).
   ===================================================== */

:root {
  /* >>> gen:tokens-root >>> AUTO-GENERATED by scripts/gen_design_tokens.py — edit design-tokens.md */
  /* ── TehGuys Brand palette ────────────────────────── */
  --craft-indigo:       #53E867;  /* Electric Green — primary brand */
  --craft-indigo-hover: #3FC454;  /* darker green hover */
  --craft-indigo-tint:  rgba(83, 232, 103, 0.10);
  --craft-green-text:   #1E8F4E;  /* Forest — green text on light bg */
  --craft-pink:         #E76F51;  /* Terracotta */
  --craft-pink-text:    #C4532B;  /* darker terracotta for text */
  --craft-pink-tint:    rgba(231, 111, 81, 0.10);
  --craft-orange:       #F4A259;  /* Sunbeam */
  --craft-orange-tint:  rgba(244, 162, 89, 0.10);
  --craft-danger:       #ef4444;
  --craft-danger-hover: #dc2626;

  --craft-gradient-hero:   linear-gradient(135deg, #1E8F4E 0%, #53E867 50%, #F4A259 100%);
  --craft-gradient-accent: linear-gradient(90deg, #1E8F4E 0%, #53E867 100%);

  --craft-glass-bg:     rgba(246, 241, 228, 0.72); /* cream glass */
  --craft-glass-bg-dk:  rgba(8, 22, 40, 0.72);     /* midnight glass */
  --craft-glass-border: 1px solid rgba(221, 216, 204, 0.40);

  /* ── Shared radii ─────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shared spacing ───────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ── Layout ───────────────────────────────────────── */
  --sidebar-width:     220px;
  --sidebar-collapsed: 64px;
  --topbar-height:     60px;
  --content-max-width: 1400px;
  --container-pad:     clamp(16px, 4vw, 48px);

  /* ── Typography ───────────────────────────────────── */
  --font-display: 'Bricolage Grotesque', 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family:  'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', 'JetBrains Mono', 'Courier New', monospace;

  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;
  --font-size-4xl:  2.5rem;

  /* ── Transitions & easing ─────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* ── Bootstrap-blue compat aliases (deprecated — migrate to --craft-*) ── */
  --accent-blue:         var(--craft-indigo);
  --accent-blue-hover:   var(--craft-indigo-hover);
  --accent-blue-glow:    rgba(83, 232, 103, 0.2);
  --accent-blue-dark:    var(--craft-indigo-hover);
  --accent-blue-dark-bg: rgba(83, 232, 103, 0.15);

  /* ── Type scale (display > title > body/caption) ──── */
  --text-scale-display-size:     1.375rem;
  --text-scale-display-weight:   800;
  --text-scale-display-leading:  1.2;
  --text-scale-display-tracking: -0.02em;
  --text-scale-title-size:       1.0625rem;
  --text-scale-title-weight:     600;
  --text-scale-title-leading:    1.35;
  --text-scale-body-size:        1rem;
  --text-scale-body-weight:      400;
  --text-scale-body-leading:     1.55;
  --text-scale-caption-size:     0.8125rem;
  --text-scale-caption-weight:   500;
  --text-scale-caption-leading:  1.4;

  /* ── Calendar event-type colors ───────────────────── */
  --event-sports-bg:      #fff7ed;
  --event-sports-text:    #c2410c;
  --event-sports-border:  #fed7aa;
  --event-arts-bg:        #f5f3ff;
  --event-arts-text:      #7c3aed;
  --event-arts-border:    #ddd6fe;
  --event-social-bg:      #fdf2f8;
  --event-social-text:    #be185d;
  --event-social-border:  #fbcfe8;
  --event-outdoor-bg:     #f0fdf4;
  --event-outdoor-text:   #15803d;
  --event-outdoor-border: #bbf7d0;
  --event-food-bg:        #fffbeb;
  --event-food-text:      #b45309;
  --event-food-border:    #fde68a;
  --event-other-bg:       #f8fafc;
  --event-other-text:     #475569;
  --event-other-border:   #e2e8f0;
/* <<< gen:tokens-root <<< */
}


/* ── Type scale utility classes ─────────────────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-size: var(--text-scale-display-size);
  font-weight: var(--text-scale-display-weight);
  line-height: var(--text-scale-display-leading);
  letter-spacing: var(--text-scale-display-tracking);
}

.text-title {
  font-family: var(--font-display);
  font-size: var(--text-scale-title-size);
  font-weight: var(--text-scale-title-weight);
  line-height: var(--text-scale-title-leading);
}

.text-body {
  font-family: var(--font-body);
  font-size: var(--text-scale-body-size);
  font-weight: var(--text-scale-body-weight);
  line-height: var(--text-scale-body-leading);
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-scale-caption-size);
  font-weight: var(--text-scale-caption-weight);
  line-height: var(--text-scale-caption-leading);
}

/* ── Dark mode token overrides ───────────────────────── */
[data-theme="dark"],
body.dark-mode {
  /* >>> gen:tokens-dark >>> AUTO-GENERATED by scripts/gen_design_tokens.py — edit design-tokens.md */
  --craft-glass-bg:    rgba(8, 22, 40, 0.72);      /* midnight glass */
  --craft-glass-bg-dk: rgba(246, 241, 228, 0.06);  /* cream on dark */
/* <<< gen:tokens-dark <<< */
}

/* ── Mobile: prevent React islands from causing horizontal scroll ── */
@media (max-width: 639px) {
  [id$="-root"] {
    max-width: 100vw;
    overflow-x: hidden;
  }
}