/* miniBIOTA Design Tokens — Biological Mission Control */
/* "The Synthetic Laboratory": dark, layered, immersive. */
:root {

  /* ============================================================
     ECOLOGICAL EDITORIAL LAB PALETTE
     Neutral lab surfaces do the structural work. Ecological color
     is reserved for imagery, organism accents, and small interface
     states.
     ============================================================ */
  --color-dark-lab: #08110F;
  --color-graphite-glass: #101816;
  --color-raised-charcoal: #18211F;
  --color-soft-slate: #24302D;
  --color-warm-mist: #F1F3EA;
  --color-glass-line-dark: rgba(241, 243, 234, 0.14);
  --color-glass-line-light: rgba(13, 23, 20, 0.12);
  --color-deep-glass:  var(--color-dark-lab);
  --color-blackwater:  var(--color-dark-lab);
  --color-deep-panel:  var(--color-graphite-glass);
  --color-wet-canopy:  var(--color-raised-charcoal);
  --color-canopy-glass: var(--color-soft-slate);
  --color-raised-moss: var(--color-soft-slate);
  --color-moss-signal: #8FBF5A;
  --color-algae-glow:  #D6E67A;
  --color-bright-spore: #E4F28A;
  --color-rain-blue:   #79B7C7;
  --color-rain-blue-bright: #9AD2DF;
  --color-warm-soil:   #A06A3B;
  --color-warm-soil-readable: #C7925A;
  --color-mist-white:  var(--color-warm-mist);
  --color-mist-muted:  #D8DED3;
  --color-mist-section: var(--color-warm-mist);
  --color-mist-card: #FAFBF5;
  --color-mist-ink: #0D1714;
  --color-mist-ink-muted: #47544D;
  --color-glass-line:  #9CA69D;
  --color-border-mist: var(--color-glass-line-light);
  --color-on-accent: var(--color-dark-lab);

  --glass-fill-soft:   rgba(241, 243, 234, 0.08);
  --glass-fill-card:   rgba(24, 33, 31, 0.88);
  --glass-fill-strong: rgba(8, 17, 15, 0.92);
  --glass-highlight:   linear-gradient(180deg, rgba(241, 243, 234, 0.10) 0%, rgba(241, 243, 234, 0.02) 100%);
  --atmosphere-rain:   rgba(121, 183, 199, 0.08);
  --atmosphere-moss:   rgba(214, 230, 122, 0.06);
  --atmosphere-soil:   rgba(160, 106, 59, 0.07);
  --shadow-text-strong: 0 2px 12px rgba(0, 8, 6, 0.90);

  /* ============================================================
     DARK SURFACE SCALE
     Tonal layering — no 1px dividers. Boundaries are defined
     by background shifts between these tiers.
     ============================================================ */
  --color-surface:                   var(--color-dark-lab); /* Global canvas */
  --color-surface-container-lowest:  var(--color-dark-lab); /* Input fields */
  --color-surface-container-low:     var(--color-graphite-glass); /* Section / sub-app backgrounds */
  --color-surface-container:         var(--color-raised-charcoal); /* Standard containers */
  --color-surface-container-high:    var(--color-raised-charcoal); /* Elevated content */
  --color-surface-container-highest: var(--color-soft-slate); /* Interactive cards, selected states */

  /* ============================================================
     TEXT / ON-SURFACE SCALE
     Never use pure white. on-surface is the primary text token.
     ============================================================ */
  --color-on-surface:         var(--color-mist-white); /* Primary text */
  --color-on-surface-variant: var(--color-mist-muted); /* Secondary / muted labels */
  --color-on-surface-subtle:  var(--color-glass-line); /* Placeholder, de-emphasized */
  --color-on-surface-inverse: var(--color-mist-ink); /* Text on light surfaces */

  /* ============================================================
     THEME ROLE TOKENS
     Middle-layer roles for components and section variants. Future
     visual direction changes should remap these before page CSS.
     ============================================================ */
  --theme-bg:             var(--color-surface);
  --theme-section-bg:     var(--color-surface-container-low);
  --theme-section-bg-alt: var(--color-mist-section);
  --theme-panel-bg:       var(--glass-fill-card);
  --theme-card-bg:        var(--glass-fill-card);
  --theme-card-hover-bg:  var(--color-surface-container-highest);
  --theme-text:           var(--color-on-surface);
  --theme-text-muted:     var(--color-on-surface-variant);
  --theme-border:         var(--color-border-default);
  --theme-accent:         var(--theme-eel-biological-accent);
  --theme-on-accent:      var(--color-on-accent);
  --theme-link:           var(--theme-eel-biological-accent);
  --theme-focus-outline:  var(--theme-eel-earth-accent);
  --theme-focus-inset:    inset 0 0 0 var(--border-width-accent) var(--theme-eel-border-mist);

  /* Ecological Editorial Lab implementation roles. These are
     the first real Stitch palette mapping and remain opt-in for
     EEL components before any global visual remap. */
  --theme-eel-ink: #0F1110;
  --theme-eel-mist: #D9D9C3;
  --theme-eel-mist-card: #E9E8D7;
  --theme-eel-instrument-bg: #151816;
  --theme-eel-archive-card-bg: rgba(21, 24, 22, 0.94);
  --theme-eel-biological-accent: #8B9467;
  --theme-eel-earth-accent: #B87952;
  --theme-eel-border-dark: rgba(217, 217, 195, 0.18);
  --theme-eel-border-mist: rgba(15, 17, 16, 0.16);
  --theme-eel-text-muted-dark: #B8BBA9;
  --theme-eel-text-muted-mist: #555846;

  /* ============================================================
     BORDER / OUTLINE SCALE
     Ghost borders only — outline-variant at ≤15% opacity.
     Hard 1px opaque borders are forbidden for sectioning.
     ============================================================ */
  --color-border-default:  var(--color-glass-line-dark);
  --color-border-hover:    rgba(184, 121, 82, 0.40);
  --color-border-strong:   rgba(241, 243, 234, 0.26);
  --color-border-ghost:    var(--color-glass-line-dark); /* outline-variant 15% */
  --color-border-toplight: rgba(241, 243, 234, 0.16); /* glass top-light only */

  /* ============================================================
     BORDER / DIVIDER RECIPES
     Use compound border tokens for generic outlines and dividers.
     Use width/style tokens only when the color is a real accent.
     ============================================================ */
  --border-width-subtle:   1px;
  --border-width-accent:   2px;
  --border-width-emphasis: 3px;
  --border-width-status:   4px;

  --border-style-solid:  solid;
  --border-style-dashed: dashed;

  --border-subtle:              var(--border-width-subtle) var(--border-style-solid) var(--color-border-default);
  --border-strong:              var(--border-width-subtle) var(--border-style-solid) var(--color-border-strong);
  --border-emphasis:            var(--border-width-accent) var(--border-style-solid) var(--color-border-strong);
  --border-thick-subtle:        var(--border-width-accent) var(--border-style-solid) var(--color-border-default);
  --border-glass:               var(--border-width-subtle) var(--border-style-solid) var(--color-border-ghost);
  --border-glass-toplight:      var(--border-width-subtle) var(--border-style-solid) var(--color-border-toplight);
  --border-dashed-subtle:       var(--border-width-accent) var(--border-style-dashed) var(--color-border-default);
  --border-transparent:         var(--border-width-subtle) var(--border-style-solid) transparent;
  --border-control-transparent: var(--border-width-accent) var(--border-style-solid) transparent;

  --divider-subtle:      var(--border-subtle);
  --divider-strong:      var(--border-thick-subtle);
  --divider-transparent: var(--border-transparent);
  --divider-tab-idle:    var(--border-width-emphasis) var(--border-style-solid) transparent;

  /* ============================================================
     HARDWARE STATE SCALE  (resolves DEBT-001)
     Replaces hardcoded hex values in the telemetry HUD.
     ============================================================ */
  --color-state-nominal:   var(--color-moss-signal); /* Nominal / thriving — soft green glow */
  --color-state-standby:   var(--color-rain-blue-bright); /* Standby / tertiary */
  --color-state-warning:   var(--color-warm-soil-readable); /* Warning / earth contrast */
  --color-state-critical:  #ffb4ab; /* Critical — 2 s pulse animation */
  --color-state-stale:     var(--color-glass-line); /* Cached / dimmed telemetry */
  --color-state-info-status: var(--color-rain-blue-bright); /* True info/status indicator only */
  --color-state-info:      var(--theme-eel-biological-accent); /* Generic info emphasis */
  --color-state-link:      var(--theme-link); /* Generic interactive links */

  /* ============================================================
     GLASS PANEL TREATMENT
     Use these variables when composing floating panels.
     ============================================================ */
  --glass-fill:       var(--glass-fill-strong);
  --blur-sm:          var(--blur-sm);
  --blur-md:          var(--blur-md);
  --blur-lg:          var(--blur-lg);
  --blur-xl:          blur(16px);
  --glass-blur:       var(--blur-xl);
  --glass-toplight:   var(--border-glass-toplight);

  /* Intentional image treatments that share the filter lint path */
  --filter-hero-dim:  var(--filter-hero-dim);
  --filter-media-unavailable: var(--filter-media-unavailable);

  /* ============================================================
     PRIMARY CTA GRADIENT
     ============================================================ */
  --gradient-primary: linear-gradient(135deg, var(--theme-eel-biological-accent) 0%, var(--theme-eel-earth-accent) 100%);

  /* ============================================================
     FONT FAMILIES
     Display: Inter — editorial headers, biological metrics.
     Telemetry: Space Grotesk — labels, data readouts.
     Mono: existing code/log stack.
     ============================================================ */
  --font-display:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-telemetry: 'Space Grotesk', 'SF Mono', 'Monaco', monospace;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:      'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
  --font-editorial: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-eel-body:  'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-metadata:  var(--font-telemetry);

  /* Keep legacy aliases pointing at new font vars */
  --heading-font: var(--font-display);
  --body-font:    var(--font-body);
  --code-font:    var(--font-mono);

  /* ============================================================
     FONT WEIGHT SCALE
     ============================================================ */
  --font-weight-light:    300; /* Hairline separators and quiet metadata */
  --font-weight-regular:  400; /* Body copy */
  --font-weight-medium:   500; /* Labels and compact controls */
  --font-weight-semibold: 600; /* Section labels and secondary emphasis */
  --font-weight-bold:     700; /* Headings and strong UI labels */
  --font-weight-heavy:    800; /* Hero/display emphasis only */

  /* ============================================================
     TYPE SCALE — single source of truth
     ============================================================ */
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-display: 3.5rem; /* 56px — display-lg, use sparingly */

  /* Line-height partners */
  --leading-tight:  1.2;
  --leading-normal: 1.55;
  --leading-loose:  1.7;

  /* ============================================================
     LETTER SPACING / TEXT CASE SCALE
     Use positive tracking only for compact uppercase labels,
     metadata, telemetry, and small badges. Negative tracking is
     intentionally not part of the public UI system.
     ============================================================ */
  --tracking-tight:   0;       /* Tightest approved display/UI tracking */
  --tracking-normal:  0.02em;  /* Subtle controls and form labels */
  --tracking-wide:    0.05em;  /* Telemetry and metadata labels */
  --tracking-wider:   0.08em;  /* Badges and status labels */
  --tracking-widest:  0.14em;  /* Sparse section kickers and realm marks */

  --text-case-uppercase: uppercase;
  --text-case-none:      none;

  /* Keep legacy aliases pointing at the new tracking scale */
  --tracking-display:   var(--tracking-tight);
  --tracking-telemetry: var(--tracking-wide);

  /* ============================================================
     SPACING SCALE (4px base, 8px rhythm)
     Use these for public margin, padding, gap, row-gap, and
     column-gap. Zero and auto remain allowed CSS literals.
     ============================================================ */
  --mb-space-0:  0;
  --mb-space-1:  4px;
  --mb-space-2:  8px;
  --mb-space-3:  12px;
  --mb-space-4:  16px;
  --mb-space-5:  20px;
  --mb-space-6:  24px;
  --mb-space-7:  28px;
  --mb-space-8:  32px;
  --mb-space-10: 40px;
  --mb-space-12: 48px;
  --mb-space-16: 64px;
  --mb-space-20: 80px;
  --mb-space-24: 96px;

  /* Dense-control and timeline exceptions already used in shared UI */
  --mb-space-3xs: 2px;
  --mb-space-compact: 6px;
  --mb-space-2-5: 10px;
  --mb-space-3-5: 14px;
  --mb-space-5-5: 22px;
  --mb-space-timeline-compact: 45px;
  --mb-space-timeline-rail: 60px;

  /* Legacy/readable aliases backed by the numeric scale */
  --mb-space-2xs: var(--mb-space-1);
  --mb-space-xs:  var(--mb-space-2);
  --mb-space-sm:  var(--mb-space-3);
  --mb-space-md:  var(--mb-space-4);
  --mb-space-lg:  var(--mb-space-6);
  --mb-space-xl:  var(--mb-space-8);
  --mb-space-2xl: var(--mb-space-10); /* Biome card content separator */

  /* ============================================================
     COMPONENT SIZING SCALE
     Shared dimensions for controls, icons, avatars, and reusable
     media frames. Container widths and breakpoints are separate.
     ============================================================ */
  --size-icon-xs: 12px;
  --size-icon-sm: 16px;
  --size-icon-md: 18px;
  --size-icon-lg: 20px;
  --size-icon-xl: 24px;
  --size-icon-2xl: 36px;
  --size-icon-3xl: 48px;
  --size-indicator-xs: 6px;
  --size-indicator-sm: 10px;
  --size-indicator-md: 12px;
  --size-indicator-lg: 14px;

  --size-control-compact: 40px;
  --size-control-min:     44px;
  --size-control-touch:   48px;
  --size-control-nav:     58px;
  --size-control-modal:   60px;
  --size-logo-header:     48px;

  --size-control-inline-sm: 120px;
  --size-control-inline-md: 140px;
  --size-control-inline-lg: 150px;
  --size-filter-inline:     280px;
  --size-panel-xs:          300px;
  --size-panel-sm:          400px;
  --size-card-min-inline:   250px;

  --size-avatar-event: 112px;
  --size-affiliate-thumb: 88px;

  --size-media-thumb:       150px;
  --size-media-card:        180px;
  --size-media-compact:     280px;
  --size-media-sm:          300px;
  --size-media-md:          350px;
  --size-media-lg:          400px;
  --size-media-hero:        450px;
  --size-media-feature:     520px;
  --size-media-video-rail:  420px;
  --size-media-hero-min:    420px;
  --size-media-object-min:  250px;
  --size-gallery-thumb:     72px;

  --size-textarea-sm: 100px;
  --size-textarea-md: 120px;
  --size-progress-bar: 20px;

  /* ============================================================
     BREAKPOINT SCALE
     CSS custom properties cannot be used directly in native media
     query conditions, so these tokens document the approved set.
     The matching numeric media queries are enforced by lint.
     ============================================================ */
  --breakpoint-xs:  320px;
  --breakpoint-sm:  480px;
  --breakpoint-md:  640px;
  --breakpoint-lg:  768px;
  --breakpoint-xl:  900px;
  --breakpoint-2xl: 1024px;
  --breakpoint-3xl: 1200px;

  /* Page-specific stack points already present in shared layouts */
  --breakpoint-detail-stack: 960px;
  --breakpoint-biome-stack:  968px;
  --breakpoint-scope-stack:  980px;

  /* ============================================================
     CONTAINER WIDTH SCALE
     Shared max-width values for page shells, readable copy, forms,
     modal captions, and wide detail workspaces.
     ============================================================ */
  --container-xs:       360px;
  --container-sm:       500px;
  --container-md:       600px;
  --container-lg:       700px;
  --container-copy:     750px;
  --container-readable: 760px;
  --container-form:     768px;
  --container-xl:       800px;
  --container-prose:    900px;
  --container-hero:     1000px;
  --container-page:     1200px;
  --container-wide:     1400px;

  --container-copy-narrow: 44rem;
  --container-copy-wide:   48rem;
  --container-detail-card: min(100%, 36rem);
  --container-modal-caption: min(60ch, 60vw);
  --container-modal-caption-compact: min(75vw, 24rem);

  /* ============================================================
     MOTION / TRANSITION SCALE
     Shared timing, easing, and hover-lift distances for public UI.
     Use motion tokens instead of direct seconds/easing values.
     ============================================================ */
  --motion-duration-instant: 0.01ms; /* Reduced-motion override only */
  --motion-duration-quick: 0.15s;
  --motion-duration-fast: 0.2s;
  --motion-duration-disclosure: 0.28s;
  --motion-duration-standard: 0.3s;
  --motion-duration-slow: 0.4s;
  --motion-duration-emphasized: 0.5s;
  --motion-duration-reveal: 0.6s;
  --motion-duration-progress: 0.8s;
  --motion-duration-loading: 1.5s;

  --motion-ease-standard: ease;
  --motion-ease-out: ease-out;
  --motion-ease-in-out: ease-in-out;
  --motion-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);

  --motion-lift-xs: -1px;
  --motion-lift-sm: -2px;
  --motion-lift-md: -4px;
  --motion-lift-lg: -5px;
  --motion-lift-xl: -6px;
  --motion-lift-hero: -8px;
  --motion-shift-inline-sm: -3px;
  --motion-shift-inline-md: 4px;
  --motion-reveal-distance: 20px;

  /* ============================================================
     OPACITY SCALE
     Shared transparency roles for muted UI, disabled/faded states,
     decorative depth lines, and high-emphasis softened copy.
     Literal 0 and 1 remain allowed for animation endpoints.
     ============================================================ */
  --opacity-depth:      0.35;
  --opacity-quiet:      0.4;
  --opacity-marker:     0.45;
  --opacity-muted:      0.6;
  --opacity-faded:      0.7;
  --opacity-subtle:     0.8;
  --opacity-caption:    0.85;
  --opacity-high:       0.9;
  --opacity-prominent:  0.95;

  --opacity-disabled:   var(--opacity-muted);
  --opacity-overlay:    var(--opacity-faded);

  /* ============================================================
     Z-INDEX / LAYER SCALE
     Shared stacking roles for local content, sticky surfaces,
     overlays, modals, toasts, and high-priority image/navigation UI.
     ============================================================ */
  --layer-behind: -1;
  --layer-base: 0;
  --layer-raised: 1;
  --layer-content: 2;
  --layer-control: 3;
  --layer-carousel-control: 10;
  --layer-sticky: 100;
  --layer-overlay: 1000;
  --layer-toast: 10000;
  --layer-lightbox: 99999;
  --layer-mobile-overlay: 100000;
  --layer-critical-control: 100001;

  /* ============================================================
     RADIUS SCALE — single source of truth
     Tightened to match Biological Mission Control spec.
     ============================================================ */
  --radius-sm:   2px;   /* Small data chips */
  --radius-md:   6px;   /* Main panels, cards */
  --radius-pill: 999px; /* Status chips, badges */

  /* Legacy aliases — point at new scale. Remove once all call
     sites are migrated and lint:radius passes clean. */
  --organic-radius: var(--radius-md);
  --mb-radius:      var(--radius-md);
  --mb-radius-sm:   var(--radius-sm);
  --mb-radius-chip: var(--radius-pill);

  /* ============================================================
     SHADOW SCALE — dark-tuned ambient shadows
     Shadows must feel like a dark tint of the background,
     never pure black.
     ============================================================ */
  --shadow-sm:     0 2px 8px rgba(0, 8, 6, 0.34);
  --shadow-md:     0 8px 24px rgba(0, 8, 6, 0.42);
  --shadow-lg:     0 18px 54px rgba(0, 8, 6, 0.52);
  --shadow-modal:  0 24px 58px rgba(0, 8, 6, 0.56); /* Ambient floating modal */
  --shadow-ring:   var(--theme-focus-inset);
  --shadow-inner:  inset 0 1px 2px rgba(0, 8, 6, 0.30);

  /* Hardware-state glow shadows */
  --shadow-glow-nominal:  0 0 0 4px rgba(143, 191, 90, 0.25);
  --shadow-glow-standby:  0 0 0 4px rgba(154, 210, 223, 0.22);
  --shadow-glow-critical: 0 0 0 4px rgba(255, 180, 171, 0.30);

  /* ============================================================
     FOCUS / OUTLINE / RING SYSTEM
     Keyboard focus uses a static non-blue outline plus a subtle
     inset edge. Do not suppress focus outlines.
     ============================================================ */
  --focus-outline-width:  2px;
  --focus-outline-style:  solid;
  --focus-outline-color:  var(--theme-focus-outline);
  --focus-outline-offset: 2px;
  --focus-outline:        var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  --focus-ring-shadow:    var(--shadow-ring);
  --focus-active-shadow:  var(--shadow-inner), var(--focus-ring-shadow);

  /* Legacy shadow aliases — point at new scale */
  --card-shadow:       var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --soft-shadow:       var(--shadow-sm);
  --inner-shadow:      var(--shadow-inner);
  --glow-effect:       var(--shadow-inner);
  --mb-shadow:         var(--shadow-md);
  --mb-shadow-hover:   var(--shadow-lg);

  /* ============================================================
     LEGACY PANEL & SURFACE TOKENS (kept for backward compat)
     Migrate call sites to --color-surface-* equivalents,
     then delete these.
     ============================================================ */
  --mb-bg:         var(--color-surface);
  --mb-panel-bg:   var(--glass-fill);
  --mb-border:     var(--color-border-default);
  --mb-border-hover: var(--color-border-hover);

  /* ============================================================
     LEGACY TYPOGRAPHY COLOR TOKENS (kept for backward compat)
     Migrate call sites to --color-on-surface-* then delete.
     ============================================================ */
  --mb-text:        var(--color-on-surface);
  --mb-text-muted:  var(--color-on-surface-variant);
  --mb-text-subtle: var(--color-on-surface-subtle);

  /* ============================================================
     CHIP STYLES
     ============================================================ */
  --mb-chip-border:       var(--color-border-default);
  --mb-chip-border-hover: var(--color-border-hover);
  --mb-chip-bg:           var(--glass-fill-soft);

  /* ============================================================
     BIOME ACCENT COLORS
     Used for 2px left-accent bars on biome modules.
     ============================================================ */
  --mb-biome-default:       var(--color-glass-line);
  --mb-biome-lake:          var(--color-rain-blue);
  --mb-biome-lakeshore:     var(--color-rain-blue);
  --mb-biome-lowland-meadow: var(--color-moss-signal);
  --mb-biome-mangrove:       var(--color-moss-signal);
  --mb-biome-mangrove-forest: var(--color-moss-signal);
  --mb-biome-beach:          var(--color-warm-soil-readable);
  --mb-biome-marine-shore:   var(--color-warm-soil-readable);
  --mb-biome-seagrass:       #5CC8B2;
  --mb-biome-seagrass-meadow: #5CC8B2;
  --mb-biome-estuary:        #8b5cf6;
  --mb-biome-coral:          #ec4899;

  /* ============================================================
     REALM ACCENT COLORS
     ============================================================ */
  --mb-realm-freshwater: var(--color-rain-blue);
  --mb-realm-saltwater:  #5CC8B2;
  --mb-realm-terrestrial: var(--color-moss-signal);
  --mb-realm-brackish:   #8b5cf6;

  /* ============================================================
     SPECIES STATUS COLORS
     ============================================================ */
  --mb-status-thriving:    var(--color-moss-signal);
  --mb-status-established: var(--color-algae-glow);
  --mb-status-vulnerable:  var(--color-warm-soil-readable);
  --mb-status-uncertain:   var(--color-glass-line);
  --mb-status-extirpated:  #6b7280;
  --mb-status-removed:     #475569;

  /* ============================================================
     LEGACY BRAND PALETTE ALIASES
     Kept for existing call sites; values now point toward the
     wet-canopy palette.
     ============================================================ */
  --deep-ocean:      var(--color-deep-glass);
  --current-primary: var(--theme-eel-biological-accent);
  --bright-water:    var(--color-rain-blue-bright);
  --light-aqua:      var(--color-mist-muted);
  --pale-sky:        var(--theme-eel-mist-card);
  --forest-green:    var(--color-raised-charcoal);
  --coral:           #ff6b6b;
  --sandy-brown:     var(--color-warm-soil-readable);
  --deep-kelp:       var(--color-deep-glass);
  --charcoal:        var(--color-deep-glass);
  --storm-gray:      var(--color-soft-slate);
  --mist:            var(--color-mist-white);
  --pure-white:      var(--color-mist-white);

  /* ============================================================
     LEGACY GRADIENTS
     ============================================================ */
  --surface-gradient: linear-gradient(135deg, var(--color-mist-white) 0%, var(--color-mist-muted) 100%);
  --depth-gradient:   var(--gradient-primary);
  --subtle-gradient:  linear-gradient(135deg, var(--light-aqua) 0%, var(--mist) 100%);
  --nature-gradient:  linear-gradient(135deg, var(--forest-green) 0%, var(--deep-kelp) 100%);
}