/* ==========================================================================
   EcoSphere — Brand tokens
   Warm moss/cream palette, Inter typography (console UI).
   ========================================================================== */

:root {
  /* ── Core palette (HSL channels) ───────────────────────────────────────── */

  /* Moss — primary brand */
  --moss-900: 186 42% 16%;
  --moss-800: 186 36% 22%;
  --moss-700: 185 30% 34%;
  --moss-600: 184 27% 39%;
  --moss-500: 184 21% 46%;
  --moss-300: 183 23% 82%;
  --moss-100: 180 24% 94%;

  /* Cream — primary surface */
  --cream-50:  43 40% 97%;
  --cream-100: 43 30% 95%;
  --cream-200: 40 25% 91%;
  --cream-300: 40 20% 85%;

  /* Ink — text */
  --ink-900: 115 30% 8%;
  --ink-700: 116 12% 28%;
  --ink-500: 116 7% 51%;
  --ink-300: 115 8% 75%;

  /* Clay — editorial accent */
  --clay-600: 18 55% 48%;
  --clay-400: 22 60% 70%;
  --clay-100: 28 50% 94%;

  /* Status */
  --status-success: 155 40% 38%;
  --status-warning:  40 60% 50%;
  --status-danger:    5 50% 42%;
  --status-info:    215 40% 42%;

  /* ── Semantic aliases ──────────────────────────────────────────────────── */

  --background: var(--cream-100);
  --foreground: var(--ink-900);

  --card:               0 0% 100%;
  --card-foreground:    var(--ink-900);

  --popover:            0 0% 100%;
  --popover-foreground: var(--ink-900);

  --primary:            var(--moss-700);
  --primary-foreground: 0 0% 100%;

  --secondary:            var(--cream-200);
  --secondary-foreground: var(--ink-900);

  --muted:              var(--moss-100);
  --muted-foreground:   var(--ink-500);

  --accent:             var(--moss-600);
  --accent-foreground:  0 0% 100%;

  --destructive:            var(--status-danger);
  --destructive-foreground: 0 0% 100%;

  --border: 115 30% 8% / 0.1;
  --input:  115 30% 8% / 0.15;
  --ring:   var(--moss-700);

  /* Sidebar — light warm shell */
  --sidebar-background:        var(--cream-50);
  --sidebar-foreground:        var(--ink-900);
  --sidebar-primary:           var(--moss-700);
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent:            var(--cream-200);
  --sidebar-accent-foreground: var(--ink-900);
  --sidebar-border:            var(--cream-300);
  --sidebar-ring:              var(--moss-600);

  /* ── Typography ────────────────────────────────────────────────────────── */

  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-lg:   1rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;

  --display-sm: 1.75rem;
  --display-md: 2rem;
  --display-lg: 2.5rem;
  --display-xl: 3rem;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ── Spacing ─────────────────────────────────────────────────────────── */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* ── Radii ───────────────────────────────────────────────────────────── */

  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* ── Shadows ─────────────────────────────────────────────────────────── */

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04);
  --shadow-md: 0 2px 8px hsl(0 0% 0% / 0.06);
  --shadow-lg: 0 8px 24px hsl(149 30% 15% / 0.10);

  /* ── Motion ──────────────────────────────────────────────────────────── */

  --motion-fast:  120ms;
  --motion-base:  180ms;
  --motion-slow:  280ms;
  --easing:       cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand-display {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.brand-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: hsl(var(--moss-700));
}

.brand-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: hsl(var(--foreground));
}