/*
 * tree — design tokens
 *
 * A single source of truth for colors, typography, spacing, and effects.
 * Import into any page via <link> or @import to stay on-palette.
 *
 * Palette philosophy: deep forest backgrounds with warm golden light,
 * cream parchment text, mossy greens, and soft amber —
 * like a woodland clearing in a Studio Ghibli film.
 */

:root {
  /* ───── Core Brand ───── */
  --t-brand:          #7cb55a;
  --t-brand-light:    #a0d47a;
  --t-brand-dark:     #4a8a32;
  --t-brand-muted:    rgba(124, 181, 90, 0.15);
  --t-brand-faint:    rgba(124, 181, 90, 0.06);

  /* ───── Backgrounds (deep forest → clearing) ───── */
  --t-bg-root:        #141e12;
  --t-bg-surface:     #1a2816;
  --t-bg-card:        #1e3018;
  --t-bg-elevated:    #24381e;
  --t-bg-glass:       rgba(20, 30, 18, 0.92);

  /* ───── Text (warm parchment tones — WCAG AA contrast on forest bg) ───── */
  --t-text:           #f2eedc;
  --t-text-secondary: #d8c8a0;
  --t-text-faint:     #a89878;
  --t-text-inverse:   #141e12;

  /* ───── Accent — warm golden sunlight ───── */
  --t-accent-warm:    #e0b040;
  --t-accent-warm-muted: rgba(224, 176, 64, 0.15);

  /* ───── Semantic ───── */
  --t-success:        #60c878;
  --t-success-bg:     rgba(96, 200, 120, 0.12);
  --t-warning:        #f0c040;
  --t-warning-bg:     rgba(240, 192, 64, 0.12);
  --t-error:          #e07060;
  --t-error-bg:       rgba(224, 112, 96, 0.10);
  --t-info:           #70a8d8;
  --t-info-bg:        rgba(112, 168, 216, 0.10);

  /* ───── Domain Colors (career categories) — softer, hand-painted feel ───── */
  --t-domain-tech:       #50b8d8;
  --t-domain-health:     #50c090;
  --t-domain-business:   #8088d0;
  --t-domain-education:  #a090c8;
  --t-domain-law:        #e09050;
  --t-domain-trades:     #c89040;
  --t-domain-creative:   #d078a0;
  --t-domain-outdoor:    #50c090;
  --t-domain-hospitality:#e0a060;
  --t-domain-fitness:    #60b0d0;

  /* ───── Borders (soft moss) ───── */
  --t-border:         rgba(124, 181, 90, 0.10);
  --t-border-hover:   rgba(124, 181, 90, 0.25);
  --t-border-focus:   rgba(124, 181, 90, 0.40);

  /* ───── Typography ───── */
  --t-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --t-font-display:   'Crimson Text', Georgia, 'Times New Roman', serif;
  --t-font-mono:      'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --t-fs-xs:    0.7rem;
  --t-fs-sm:    0.8rem;
  --t-fs-base:  0.95rem;
  --t-fs-md:    1.1rem;
  --t-fs-lg:    1.4rem;
  --t-fs-xl:    1.8rem;
  --t-fs-xxl:   2.4rem;

  --t-lh-tight:   1.2;
  --t-lh-normal:  1.5;
  --t-lh-relaxed: 1.7;

  --t-ls-tight:   -0.01em;
  --t-ls-normal:   0;
  --t-ls-wide:     0.05em;
  --t-ls-caps:     0.12em;

  /* ───── Spacing ───── */
  --t-space-1:   4px;
  --t-space-2:   8px;
  --t-space-3:  12px;
  --t-space-4:  16px;
  --t-space-5:  20px;
  --t-space-6:  24px;
  --t-space-8:  32px;
  --t-space-10: 40px;
  --t-space-12: 48px;
  --t-space-16: 64px;

  /* ───── Radii (organic, rounded) ───── */
  --t-radius-sm:   8px;
  --t-radius-md:  14px;
  --t-radius-lg:  18px;
  --t-radius-xl:  24px;
  --t-radius-full: 9999px;

  /* ───── Shadows (warm, tinted) ───── */
  --t-shadow-sm:   0  2px  8px rgba(10, 20, 8, 0.30);
  --t-shadow-md:   0  4px 16px rgba(10, 20, 8, 0.40);
  --t-shadow-lg:   0  8px 32px rgba(10, 20, 8, 0.50);
  --t-shadow-xl:   0 16px 48px rgba(10, 20, 8, 0.60);
  --t-shadow-glow: 0  0  24px rgba(124, 181, 90, 0.12);

  /* ───── Transitions ───── */
  --t-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --t-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-duration-fast:   0.15s;
  --t-duration-normal: 0.25s;
  --t-duration-slow:   0.4s;

  /* ───── Z-index scale ───── */
  --t-z-base:     1;
  --t-z-dropdown: 100;
  --t-z-sticky:   200;
  --t-z-overlay:  500;
  --t-z-modal:    1000;
  --t-z-toast:    2000;

  /* ───── Layout ───── */
  --t-header-height: 64px;
  --t-sidebar-width: 240px;
  --t-max-content:   1200px;

  /* ───── Scrollbars ───── */
  --t-scrollbar-size:         5px;
  --t-scrollbar-track:        rgba(255, 255, 255, 0.04);
  --t-scrollbar-thumb-top:    rgba(124, 181, 90, 0.55);
  --t-scrollbar-thumb-bottom: rgba(74, 138, 50, 0.4);
  --t-scrollbar-thumb-hover:  rgba(124, 181, 90, 0.65);
  --t-scrollbar-thumb-active: rgba(124, 181, 90, 0.85);
  --t-scrollbar-thumb-border: rgba(124, 181, 90, 0.15);
  --t-scrollbar-glow:         rgba(124, 181, 90, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Root-tendril hover animation
   Add class "has-roots" to any interactive element for organic root growth.
   ═══════════════════════════════════════════════════════════════════════════ */

.has-roots {
  position: relative;
  overflow: visible;
}

.has-roots::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 14px;
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top center;
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' fill='none'%3E%3Cpath d='M50 0C50 5 50 10 50 14' stroke='%237cb55a' stroke-width='1.3' opacity='.45'/%3E%3Cpath d='M50 2C47 7 40 12 34 15' stroke='%237cb55a' stroke-width='1' opacity='.35'/%3E%3Cpath d='M50 2C53 7 60 12 66 15' stroke='%237cb55a' stroke-width='1' opacity='.35'/%3E%3Cpath d='M50 4C45 10 36 14 25 16' stroke='%237cb55a' stroke-width='.7' opacity='.22'/%3E%3Cpath d='M50 4C55 10 64 14 75 16' stroke='%237cb55a' stroke-width='.7' opacity='.22'/%3E%3C/svg%3E") center top / contain no-repeat;
}

.has-roots:hover::after {
  opacity: 1;
  transform: scaleY(1);
}

.has-roots:active::after {
  transform: scaleY(1.15);
  transition-duration: 0.1s;
}

/* Variant: wider roots for large elements (cards, panels) */
.has-roots--wide::after {
  left: 5%;
  right: 5%;
  height: 18px;
}

/* Variant: upward roots (for elements at the bottom of the screen) */
.has-roots--up::after {
  bottom: auto;
  top: -2px;
  transform-origin: bottom center;
  transform: scaleY(0) rotate(180deg);
}
.has-roots--up:hover::after {
  transform: scaleY(1) rotate(180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Global scrollbars — thin pill thumbs on all scrollable surfaces
   ═══════════════════════════════════════════════════════════════════════════ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--t-scrollbar-thumb-top) transparent;
}

*::-webkit-scrollbar {
  width: var(--t-scrollbar-size);
  height: var(--t-scrollbar-size);
}

*::-webkit-scrollbar-track {
  background: var(--t-scrollbar-track);
  border-radius: var(--t-radius-full);
  margin: 2px 0;
}

*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--t-scrollbar-thumb-top) 0%,
    var(--t-scrollbar-thumb-bottom) 100%
  );
  border-radius: var(--t-radius-full);
  border: 1px solid var(--t-scrollbar-thumb-border);
  box-shadow: 0 0 8px var(--t-scrollbar-glow);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--t-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background: var(--t-scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Hide scrollbar but keep scroll (horizontal chips, feed pager, etc.) */
.t-scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.t-scrollbar-hidden::-webkit-scrollbar {
  display: none;
}