/*
 * Theme Name: TUG Signature Theme
 * Description: Dark obsidian backdrop, slate glassmorphism, gold/amber accents, and inset gold top border highlights.
 * Accent Color: #f59e0b
 * Category: Cyber-Industrial Obsidian
 */

:root {
  /* ==========================================================================
     1. MASTER 6-COLOR PALETTE (Standard Hex Codes)
     ========================================================================== */
  --color-canvas:    #0b0e14; /* 1. Base page background */
  --color-surface:   #161b26; /* 2. Card, modal, panel, and dropdown surfaces */
  --color-content:   #f8fafc; /* 3. Headings, body copy, and main readable text */
  --color-primary:   #38bdf8; /* 4. Primary buttons, active states, key focus borders */
  --color-secondary: #818cf8; /* 5. Secondary buttons, subtle borders, subtext */
  --color-accent:    #f59e0b; /* 6. Badges, status highlights, telemetry indicators */

  /* ==========================================================================
     2. THEMEABLE GEOMETRY & LAYOUT
     ========================================================================== */
  --card-radius: 12px;
  --btn-radius: 6px;
  --input-radius: 6px;

  /* ==========================================================================
     3. DERIVED ELEMENT TOKENS (Computed via color-mix)
     ========================================================================== */
  --text-main:          var(--color-content);
  --text-muted:         color-mix(in srgb, var(--color-content) 70%, transparent);
  --text-subtle:        color-mix(in srgb, var(--color-content) 45%, transparent);
  --text-inverse:       var(--color-canvas);

  --border-subtle:      color-mix(in srgb, var(--color-accent) 25%, transparent);
  --border-focus:       var(--color-primary);

  --bg-page:            var(--color-canvas);
  --bg-card:            color-mix(in srgb, var(--color-surface) 80%, transparent);
  --bg-card-hover:      color-mix(in srgb, var(--color-surface) 95%, var(--color-primary));
  --card-shadow:        0 12px 35px rgba(0, 0, 0, 0.4);

  --btn-primary-bg:     var(--color-primary);
  --btn-primary-txt:    #0b0e14;
  --btn-primary-hover:  color-mix(in srgb, var(--color-primary) 85%, black);

  --input-bg:           color-mix(in srgb, var(--color-canvas) 80%, var(--color-surface));
  --input-border:       color-mix(in srgb, var(--color-accent) 30%, transparent);

  /* Status Colors */
  --status-success:     #10b981;
  --status-warning:     #f59e0b;
  --status-danger:      #ef4444;
  --status-info:        var(--color-secondary);
}

/* ==========================================================================
   TUG WORKSPACE OVERRIDES & HIGHLIGHTS
   ========================================================================== */
.card.featured {
  border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
  border-top: 3px solid var(--color-accent);
}

.workspace-sidebar .nav-link.active,
.portal-tab-pill.active {
  border-left: 3px solid var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent);
}