/* =======================================================================
   PRODUCT: [ss-landing:storefront]
   Name: Short Name: Global Design OS Theme
   FILE NAME: public/assets/css/theme.css
   ROLE: Global UI Stylesheet & Design System
   PURPOSE: Establishes Design Tokens, Base Typography, Macro Layouts, 
            and Enterprise Form styling. (Journals 2026-0058, 0059, 0060)
   LICENSE: Pending Review
   ======================================================================= */

/* =======================================================================
   [1] DESIGN TOKENS (CSS Variables)
   ======================================================================= */
:root {
  /* Backgrounds & Borders */
  --bg-main: #171A21;        /* Dark Slate - Main Canvas */
  --bg-surface: #1E232D;     /* Lighter Slate - Elevated Cards */
  --border-color: #2D3748;   /* Dark Grey - Delineations */

  /* Text Colors */
  --text-main: #E2E8F0;      /* Off-White - Standard Body */
  --text-muted: #A0AEC0;     /* Cool Grey - Meta text / H2 */
  --text-white: #FFFFFF;     /* Pure White - H1 Titles Only */

  /* 5-Tier Semantic Palette */
  --accent-luminous: #43BA43;  /* Tier 1: Primary Action/Highlight */
  --accent-anthosa: #195C3A;   /* Tier 2: Structural/Deep Borders */
  --accent-gold: #D69E2E;      /* Tier 3: Secondary Edge */
  --accent-gold-base: #675000; /* Tier 3: Secondary Base */
  --accent-purple: #805AD5;    /* Tier 4: Tertiary Contrast */
  --accent-debian: #007FFF;    /* Tier 5: Foundation Tech */
  
  --font-family: 'Inter', -apple-system, sans-serif;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --border-radius-global: 6px;
}

/* =======================================================================
   [2] TYPOGRAPHY & BASE HTML RESETS
   ======================================================================= */
body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-luminous); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--text-white); }

/* The "No Shouting" Rule */
h1, h2, h3, h4, h5, h6 { text-transform: none !important; margin-top: 0; }

h1 {
  color: var(--text-white);
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 30px;
}

h2 {
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-top: 40px;
  margin-bottom: 20px;
}

h3 {
  color: var(--accent-luminous);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 15px;
}

/* Semantic Highlights */
.text-highlight { color: var(--accent-luminous); font-weight: 700; }
.tech-label {
  font-family: monospace;
  font-size: 0.9em;
  color: var(--accent-debian);
  display: block;
  margin-bottom: 10px;
}

/* =======================================================================
   [3] STRUCTURAL LAYOUT (Cards & Macro Grids)
   ======================================================================= */
.main-container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* Global Page Header (The Hero Text) */
.page-header {
  text-align: center; margin: 0 auto 40px auto; padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color); max-width: 800px;
}
.page-header h1, .page-header h2 {
  color: var(--text-white); font-size: 1.8rem; font-weight: 600; border: none; margin: 0;
}

/* The Enterprise Panel Card (Control Plane Aesthetic) */
.panel-card {
  background-color: var(--bg-surface); border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-anthosa); border-radius: 8px;
  padding: 25px; margin-bottom: 25px; box-sizing: border-box;
}

/* Standard Feature Card (For products-sw and why grids) */
.feature-card {
  background-color: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: 8px; padding: 20px; box-sizing: border-box; transition: all 0.2s ease;
}
.feature-card:hover { border-color: var(--accent-anthosa); }

/* The Hero Card (Replaces local .area-ai styles) */
.feature-card-hero {
  border: 2px solid var(--accent-luminous);
  border-left: 4px solid var(--accent-luminous) !important;
  background: rgba(67, 186, 67, 0.05); /* Faint Luminous Green */
  box-shadow: 0 0 15px rgba(67, 186, 67, 0.1);
}

/* =======================================================================
   [4] STRICT CONTAINMENT & WEB COMPONENTS
   ======================================================================= */
/* Force Custom Elements to respect bounding boxes to prevent dropdown bleed 
   NOTE: overflow: hidden has been removed (The Guillotine is lifted)
         because ss-currency-search now uses a Shadow DOM to protect its 
         layout.*/
ss-currency, ss-currency-extend, ss-currency-search {
  display: block; width: 100%; box-sizing: border-box; max-width: 100%;
}

/* Standard Inputs */
input[type="text"], input[type="number"], select {
  background: var(--bg-surface); color: var(--text-white); border: 1px solid var(--border-color);
  padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-global);
  width: 100%; box-sizing: border-box; max-width: 100%; font-family: var(--font-family); font-size: 14px;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--accent-luminous); }

/* =======================================================================
   [5] ENTERPRISE FORM CONTROLS (The "Paint")
   ======================================================================= */
/* Strip default browser spin buttons */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* FUSED STEPPER BUTTONS */
.stepper-btn {
  background: var(--border-color); color: var(--text-white); border: 1px solid var(--border-color);
  padding: 0 15px; cursor: pointer; font-size: 1.2rem; font-weight: bold;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;
}
.stepper-btn:hover { background: var(--accent-anthosa); color: var(--accent-luminous); border-color: var(--accent-anthosa); }

/* SPOTIFY SLIDER (Cross-Browser Edge Guillotine Fix) */
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; background: transparent; outline: none;
  border-radius: 4px; margin: 10px 0;
  /* THE FIX: Padding allows the massive shadow to be clipped, but leaves exactly 
     enough room inside the box so the thumb isn't chopped in half at 0% or 100% */
  padding: 0 4px !important; box-sizing: border-box; overflow: hidden; 
}
/* WebKit (Chrome/Safari/Edge) */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; height: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.1); border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; height: 16px; width: 6px; border-radius: 3px;
  background: var(--text-white); cursor: pointer; margin-top: -4px;
  box-shadow: -10000px 0 0 10000px var(--accent-luminous);
}
/* Mozilla (Firefox) - Native Progress Override */
input[type="range"]::-moz-range-track {
  width: 100%; height: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.1); border-radius: 4px;
}
input[type="range"]::-moz-range-progress {
  background-color: var(--accent-luminous); height: 8px; border-radius: 4px 0 0 4px;
}
input[type="range"]::-moz-range-thumb {
  height: 16px; width: 6px; border-radius: 3px; border: none;
  background: var(--text-white); cursor: pointer;
}

/* =======================================================================
   [6] GLOBAL CONTROL LAYOUTS (The "Plumbing Wrapper Classes")
   ======================================================================= */
/* Standard Side-by-Side Slider (Slider left, Input right) */
.ss-slider-group {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
}
.ss-slider-group input[type="range"] { flex-grow: 1; }
.ss-slider-group input[type="number"] { flex: 0 0 80px; text-align: center; }

/* Standard Fused Stepper ( [-] [number] [+] ) */
.ss-stepper-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}
.ss-stepper-group input[type="number"] {
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.ss-stepper-group .stepper-btn:first-child { border-top-left-radius: var(--border-radius-global); border-bottom-left-radius: var(--border-radius-global); }
.ss-stepper-group .stepper-btn:last-child { border-top-right-radius: var(--border-radius-global); border-bottom-right-radius: var(--border-radius-global); }

/* =======================================================================
   [7] RESPONSIVE BREAKPOINTS & FOOTER
   ======================================================================= */
@media (max-width: 900px) {
  h1 { font-size: 1.8rem; margin-bottom: 20px; }
  h2 { font-size: 1.35rem; margin-top: 30px; }
  .panel-card { padding: 15px; margin-bottom: 20px; }
}

.site-footer {
  margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--border-color);
  text-align: center; font-size: 0.85rem; color: var(--text-muted);
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--accent-luminous); }
.pipeline-status {
  margin-top: var(--spacing-md); padding: var(--spacing-sm); background: rgba(0,0,0,0.3);
  border-radius: var(--border-radius-global); display: inline-block;
}
.pipeline-status .footer-version {
  display: block; margin-top: 8px; color: var(--accent-luminous); font-family: monospace;
}

/* =======================================================================
   [8] GLOBAL FOOTER LINKS
   ======================================================================= */
#global-footer a,
footer a {
    color: var(--accent-luminous) !important;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

#global-footer a:hover,
footer a:hover {
    color: #5CC75C !important; /* Luminous Green Light 1 */
}