/*
 * toolkit_theme.css
 *
 * Single shared visual-token source for all Toolkit themes.
 * Future themes must replace semantic token values here — not restyle individual components.
 * Status meanings (success, warning, danger, info) must remain semantically recognizable in every theme.
 * Decorative imagery, textures, and fonts are intentionally not defined here.
 */

/* ─── Default Theme: Outlands Swamp Hybrid ─────────────────────────────────── */
/*
 * Palette foundation:
 *   Deep charcoal / near-black base
 *   Muted swamp-green and deep teal for environmental mood
 *   Restrained violet for depth
 *   VoV red reserved for destructive actions, urgent attention, critical alerts,
 *   and high-emphasis active states
 *   Neutral text with strong readability contrast
 */

:root,
[data-toolkit-theme="outlands-swamp"] {

  /* ── Page & Canvas Backgrounds ─────────────────────────────────────────── */
  --tk-bg-page:            #0d0f0e;   /* near-black base canvas */
  --tk-bg-canvas:          #111413;   /* slightly lifted from page for content areas */

  /* ── Sidebar & Header Backgrounds ─────────────────────────────────────── */
  --tk-bg-sidebar:         #0f1210;   /* dark charcoal with slight swamp tint */
  --tk-bg-header:          #121614;   /* near-match to sidebar, slight separation */

  /* ── Card / Surface / Raised Surface ──────────────────────────────────── */
  --tk-bg-surface:         #181d1b;   /* card and panel base */
  --tk-bg-surface-raised:  #1f2622;   /* elevated modals, dropdowns, popovers */
  --tk-bg-surface-sunken:  #0b0d0c;   /* inset wells, code blocks */

  /* ── Borders & Hover Borders ───────────────────────────────────────────── */
  --tk-border:             #2a3430;   /* default border — subtle, swamp-tinted */
  --tk-border-muted:       #1e2724;   /* quieter dividers and separators */
  --tk-border-hover:       #3d5a4f;   /* teal-leaning border on hover */
  --tk-border-focus:       #4a7c6a;   /* visible focus border (not the ring) */

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --tk-text-primary:       #d8e0dc;   /* main readable text on dark surfaces */
  --tk-text-muted:         #8ea39a;   /* secondary labels, captions */
  --tk-text-subdued:       #5c7069;   /* placeholder, disabled, quiet metadata */
  --tk-text-inverse:       #0d0f0e;   /* text on light/accent backgrounds */
  --tk-text-on-accent:     #f0f5f2;   /* text placed directly on colored accents */

  /* ── Primary Accent — Swamp Green ─────────────────────────────────────── */
  --tk-accent-primary:          #3d7a5c;   /* swamp green — interactive UI elements */
  --tk-accent-primary-hover:    #4d9470;   /* brighter on hover */
  --tk-accent-primary-subtle:   #1f3d2e;   /* tinted surface tint, not full saturation */

  /* ── Secondary Accent — Deep Teal ─────────────────────────────────────── */
  --tk-accent-secondary:        #2e6e72;   /* deep teal — highlights, links, icons */
  --tk-accent-secondary-hover:  #3d8a8f;
  --tk-accent-secondary-subtle: #163436;

  /* ── Tertiary Accent — Restrained Violet ──────────────────────────────── */
  --tk-accent-tertiary:         #5e4f7a;   /* violet — depth, tags, decorative labels */
  --tk-accent-tertiary-hover:   #7a6599;
  --tk-accent-tertiary-subtle:  #2a2038;

  /* ── VoV Red — Action / Critical ──────────────────────────────────────── */
  /*
   * Reserved for: destructive actions, urgent attention, critical alerts,
   * high-emphasis active states. Do not use decoratively.
   */
  --tk-accent-vov:              #c0392b;
  --tk-accent-vov-hover:        #e04030;
  --tk-accent-vov-subtle:       #3d1010;

  /* ── Status Colors ─────────────────────────────────────────────────────── */
  --tk-status-success:          #3a8c5c;
  --tk-status-success-bg:       #162b1f;
  --tk-status-success-text:     #6dcfa0;

  --tk-status-warning:          #c78a2a;
  --tk-status-warning-bg:       #2e1e08;
  --tk-status-warning-text:     #f0b855;

  --tk-status-danger:           #c0392b;   /* matches VoV red — danger = critical */
  --tk-status-danger-bg:        #3d1010;
  --tk-status-danger-text:      #f07070;

  --tk-status-info:             #2e6e72;   /* matches deep teal */
  --tk-status-info-bg:          #102426;
  --tk-status-info-text:        #6ab8bc;

  /* ── Focus Ring ────────────────────────────────────────────────────────── */
  --tk-focus-ring:         #4a9e80;   /* accessible focus ring — swamp-green leaning */
  --tk-focus-ring-width:   2px;
  --tk-focus-ring-offset:  2px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --tk-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5);
  --tk-shadow-md:   0 4px 10px rgba(0, 0, 0, 0.55);
  --tk-shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.65);
  --tk-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.4);

  /* ── Border Radii ──────────────────────────────────────────────────────── */
  --tk-radius-xs:  2px;
  --tk-radius-sm:  4px;
  --tk-radius-md:  6px;
  --tk-radius-lg:  10px;
  --tk-radius-xl:  16px;
  --tk-radius-pill: 9999px;

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

  /* ── Transition Timing & Duration ─────────────────────────────────────── */
  --tk-duration-fast:    100ms;
  --tk-duration-base:    180ms;
  --tk-duration-slow:    300ms;
  --tk-ease-default:     ease;
  --tk-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --tk-ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --tk-ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --tk-transition-base:  var(--tk-duration-base) var(--tk-ease-in-out);

  /* ── Atmospheric Glow — Outlands Swamp ────────────────────────────────── */
  /*
   * Used for CSS radial/linear gradients that create the Outlands Swamp atmosphere.
   * Intentionally low-alpha so they layer without overwhelming content.
   * Components may reference these as gradient color-stops only.
   */
  --tk-glow-swamp:          rgba(40, 92, 63, 0.15);   /* ambient swamp-green bleed */
  --tk-glow-swamp-strong:   rgba(40, 92, 63, 0.26);   /* stronger swamp emphasis */
  --tk-glow-teal:           rgba(26, 72, 78, 0.12);   /* deep-teal fog/depth */
  --tk-glow-teal-strong:    rgba(26, 72, 78, 0.22);
  --tk-glow-violet:         rgba(56, 42, 84, 0.07);   /* restrained violet depth */

  /* ── Surface Highlight (top-edge specular on cards/panels) ────────────── */
  --tk-surface-highlight:        rgba(255, 255, 255, 0.030);
  --tk-surface-highlight-strong: rgba(255, 255, 255, 0.058);

  /* ── Navigation Active State — refined tint, not solid block ──────────── */
  --tk-nav-active-bg:      rgba(40, 92, 63, 0.13);   /* translucent swamp tint */
  --tk-nav-active-text:    #7fd4a8;                   /* bright readable swamp green */
  --tk-nav-active-rail:    #3d7a5c;                   /* accent rail = primary green */

  /* ── Skeleton / Loading ────────────────────────────────────────────────── */
  --tk-skeleton-base:      #1b2823;   /* darker, swamp-tinted idle state */
  --tk-skeleton-shimmer:   #253830;   /* subtle shimmer band, still dark */

  /* ── Canvas Atmosphere — per-surface radial origins ──────────────────── */
  --tk-canvas-glow-a:      rgba(30, 66, 48, 0.20);   /* swamp-green leak, lower-left */
  --tk-canvas-glow-b:      rgba(16, 50, 56, 0.14);   /* teal depth, upper-right */

  /* ── Sidebar Atmosphere ────────────────────────────────────────────────── */
  --tk-sidebar-depth:      rgba(8, 14, 10, 0.35);    /* depth bleed at sidebar top */
  --tk-sidebar-edge:       rgba(255, 255, 255, 0.026); /* inner-right specular */

}

/*
 * To add a future theme, define a new [data-toolkit-theme="..."] block
 * and override the semantic tokens above. Component selectors must not appear here.
 */