/*
 * ============================================================
 * GoodCharacter Platform — Design System Theme
 * theme.css — Single source of truth for all CSS variables
 *
 * LOAD ORDER: Must be the FIRST stylesheet loaded in all base templates.
 * All other CSS files should reference these variables, never raw hex values.
 *
 * Variable Tiers:
 *   Tier 1: --raw-*       Raw color primitives
 *   Tier 2: --color-*     Semantic role mapping
 *   Tier 3: --[component]-[property]   Component-specific tokens
 * ============================================================
 */

:root {

  /* =============================================
   * TIER 1 — Raw Color Primitives
   * Change hex here → updates everywhere
   * ============================================= */

  /* Green Scale */
  --raw-green-950: #071A0E;
  --raw-green-900: #0A3D22;
  --raw-green-800: #114D34;
  --raw-green-700: #1A6B4A;
  --raw-green-600: #1F7D56;
  --raw-green-500: #2D9966;
  --raw-green-400: #4DB87F;
  --raw-green-200: #A3D9BB;
  --raw-green-100: #D4EFE1;
  --raw-green-50:  #EBF7F1;

  /* Neutral (Green-tinted grays) */
  --raw-neutral-950: #0D1610;
  --raw-neutral-900: #141F17;
  --raw-neutral-800: #1C2B22;
  --raw-neutral-700: #263530;
  --raw-neutral-600: #3A4D43;
  --raw-neutral-400: #6B8278;
  --raw-neutral-300: #96ADA3;
  --raw-neutral-200: #C8D8D2;
  --raw-neutral-100: #EEF3F0;
  --raw-neutral-50:  #F4F7F5;

  /* Semantic Accent Colors */
  --raw-success:      #16A34A;
  --raw-success-bg:   #DCFCE7;
  --raw-warning:      #D97706;
  --raw-warning-bg:   #FEF3C7;
  --raw-danger:       #DC2626;
  --raw-danger-bg:    #FEE2E2;
  --raw-info:         #0D9488;
  --raw-info-bg:      #CCFBF1;
  --raw-gold:         #B8962E;
  --raw-gold-bg:      #FEF9E7;

  /* Base */
  --raw-white: #FFFFFF;
  --raw-black: #000000;


  /* =============================================
   * TIER 2 — Semantic Role Mapping
   * Change these to retheme the entire app
   * ============================================= */

  /* Brand Colors */
  --color-primary:        var(--raw-green-700);
  --color-primary-hover:  var(--raw-green-600);
  --color-primary-active: var(--raw-green-800);
  --color-primary-dark:   var(--raw-green-900);
  --color-primary-muted:  var(--raw-green-50);
  --color-primary-soft:   var(--raw-green-100);

  /* Backgrounds */
  --color-bg-page:        var(--raw-neutral-50);
  --color-bg-card:        var(--raw-white);
  --color-bg-sidebar:     var(--raw-neutral-950);
  --color-bg-sidebar-mid: var(--raw-neutral-900);
  --color-bg-input:       var(--raw-white);
  --color-bg-hover:       var(--raw-green-50);
  --color-bg-selected:    var(--raw-green-100);

  /* Text */
  --color-text-primary:   #111B16;
  --color-text-secondary: #4A6357;
  --color-text-muted:     var(--raw-neutral-400);
  --color-text-disabled:  var(--raw-neutral-300);
  --color-text-inverse:   #E8F2EC;
  --color-text-on-primary: var(--raw-white);
  --color-text-link:      var(--raw-green-700);

  /* Borders */
  --color-border:         var(--raw-neutral-200);
  --color-border-strong:  var(--raw-neutral-300);
  --color-border-dark:    var(--raw-neutral-700);
  --color-border-focus:   var(--raw-green-500);
  --color-border-primary: var(--raw-green-700);

  /* Semantic */
  --color-success:        var(--raw-success);
  --color-success-bg:     var(--raw-success-bg);
  --color-warning:        var(--raw-warning);
  --color-warning-bg:     var(--raw-warning-bg);
  --color-danger:         var(--raw-danger);
  --color-danger-bg:      var(--raw-danger-bg);
  --color-info:           var(--raw-info);
  --color-info-bg:        var(--raw-info-bg);
  --color-gold:           var(--raw-gold);
  --color-gold-bg:        var(--raw-gold-bg);


  /* =============================================
   * TIER 3 — Component Tokens
   * Override per-component without touching globals
   * ============================================= */

  /* --- Sidebar --- */
  --sidebar-bg:               var(--color-bg-sidebar);
  --sidebar-header-bg:        var(--color-bg-sidebar-mid);
  --sidebar-text:             var(--color-text-inverse);
  --sidebar-text-muted:       var(--raw-neutral-400);
  --sidebar-border:           var(--color-border-dark);
  --sidebar-link-hover-bg:    var(--raw-neutral-800);
  --sidebar-link-hover-text:  var(--raw-green-400);
  --sidebar-link-active-bg:   var(--raw-green-900);
  --sidebar-link-active-text: var(--raw-white);
  --sidebar-link-active-accent: var(--raw-green-500);
  --sidebar-avatar-bg:        var(--color-primary);
  --sidebar-width:            260px;

  /* --- Navbar / Header --- */
  --navbar-bg:                var(--color-bg-card);
  --navbar-border:            var(--color-border);
  --navbar-text:              var(--color-text-primary);
  --navbar-height:            64px;

  /* --- Buttons --- */
  --btn-primary-bg:           var(--color-primary);
  --btn-primary-hover-bg:     var(--color-primary-hover);
  --btn-primary-active-bg:    var(--color-primary-active);
  --btn-primary-text:         var(--raw-white);

  --btn-secondary-bg:         transparent;
  --btn-secondary-border:     var(--color-border-strong);
  --btn-secondary-text:       var(--color-text-primary);
  --btn-secondary-hover-bg:   var(--color-bg-hover);

  --btn-ghost-bg:             transparent;
  --btn-ghost-text:           var(--color-text-secondary);
  --btn-ghost-hover-bg:       var(--color-bg-hover);

  --btn-danger-bg:            var(--color-danger);
  --btn-danger-text:          var(--raw-white);

  --btn-border-radius:        var(--radius-md);
  --btn-padding:              6px 16px;
  --btn-padding-sm:           4px 12px;
  --btn-font-weight:          500;

  /* --- Tables --- */
  --table-header-bg:          var(--color-primary-muted);
  --table-header-text:        var(--color-text-secondary);
  --table-border:             var(--color-border);
  --table-row-hover:          var(--raw-green-50);
  --table-row-selected:       var(--raw-green-100);
  --table-stripe-bg:          var(--raw-neutral-50);

  /* --- Cards --- */
  --card-bg:                  var(--color-bg-card);
  --card-border:              var(--color-border);
  --card-border-radius:       var(--radius-lg);
  --card-shadow:              0 1px 4px rgba(26, 107, 74, 0.07), 0 0 0 1px var(--color-border);
  --card-shadow-hover:        0 4px 16px rgba(26, 107, 74, 0.12), 0 0 0 1px var(--color-border-strong);
  --card-padding:             var(--space-6);
  --card-accent-border:       3px solid var(--color-primary);

  /* --- Forms / Inputs --- */
  --input-bg:                 var(--color-bg-input);
  --input-border:             var(--color-border);
  --input-border-focus:       var(--color-border-focus);
  --input-text:               var(--color-text-primary);
  --input-placeholder:        var(--color-text-muted);
  --input-border-radius:      var(--radius-md);
  --input-padding:            8px 12px;
  --input-shadow-focus:       0 0 0 3px rgba(45, 153, 102, 0.15);

  /* --- Badges / Status Tags --- */
  --badge-success-bg:         var(--color-success-bg);
  --badge-success-text:       var(--color-success);
  --badge-warning-bg:         var(--color-warning-bg);
  --badge-warning-text:       var(--color-warning);
  --badge-danger-bg:          var(--color-danger-bg);
  --badge-danger-text:        var(--color-danger);
  --badge-info-bg:            var(--color-info-bg);
  --badge-info-text:          var(--color-info);
  --badge-gold-bg:            var(--color-gold-bg);
  --badge-gold-text:          var(--color-gold);
  --badge-border-radius:      var(--radius-full);
  --badge-padding:            2px 10px;

  /* --- KPI / Stat Cards (Admin Dashboard) --- */
  --kpi-icon-primary-bg:      var(--color-primary-muted);
  --kpi-icon-primary-color:   var(--color-primary);
  --kpi-icon-success-bg:      var(--color-success-bg);
  --kpi-icon-success-color:   var(--color-success);
  --kpi-icon-warning-bg:      var(--color-warning-bg);
  --kpi-icon-warning-color:   var(--color-warning);
  --kpi-icon-info-bg:         var(--color-info-bg);
  --kpi-icon-info-color:      var(--color-info);
  --kpi-icon-gold-bg:         var(--color-gold-bg);
  --kpi-icon-gold-color:      var(--color-gold);
  --kpi-value-color:          var(--color-text-primary);
  --kpi-label-color:          var(--color-text-muted);
  --kpi-positive-color:       var(--color-success);
  --kpi-negative-color:       var(--color-danger);

  /* --- Quiz Specific --- */
  --quiz-option-bg:           var(--color-bg-card);
  --quiz-option-border:       var(--color-border);
  --quiz-option-hover-bg:     var(--color-primary-muted);
  --quiz-option-hover-border: var(--color-primary);
  --quiz-option-selected-bg:  var(--color-primary-soft);
  --quiz-option-selected-border: var(--color-primary);
  --quiz-progress-bg:         var(--raw-neutral-200);
  --quiz-progress-fill:       var(--color-primary);

  /* --- Result / Score --- */
  --result-score-border:      var(--color-primary);
  --result-score-bg:          var(--color-primary-muted);
  --result-score-text:        var(--color-primary-dark);
  --result-header-bg:         linear-gradient(135deg, var(--raw-green-700) 0%, var(--raw-green-500) 100%);
  --result-trait-fill-1:      linear-gradient(90deg, var(--raw-green-500), var(--raw-green-400));
  --result-trait-fill-2:      linear-gradient(90deg, var(--raw-info), #38BDF8);
  --result-trait-fill-3:      linear-gradient(90deg, var(--raw-warning), #FCD34D);
  --result-trait-fill-4:      linear-gradient(90deg, #EC4899, #F472B6);


  /* =============================================
   * TYPOGRAPHY
   * ============================================= */
  --font-primary:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:         'Fira Code', 'Consolas', monospace;

  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --font-normal:  400;
  --font-medium:  500;
  --font-semi:    600;
  --font-bold:    700;
  --font-black:   800;

  --line-height-tight:  1.3;
  --line-height-base:   1.6;
  --line-height-loose:  1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-wider:   0.08em;


  /* =============================================
   * SPACING SCALE
   * ============================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;


  /* =============================================
   * BORDER RADIUS
   * ============================================= */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;


  /* =============================================
   * SHADOWS
   * ============================================= */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-brand: 0 4px 16px rgba(26, 107, 74, 0.2);


  /* =============================================
   * TRANSITIONS
   * ============================================= */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);


  /* =============================================
   * Z-INDEX STACK
   * ============================================= */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-sidebar: 300;
  --z-overlay: 400;
  --z-modal:   500;
  --z-toast:   600;
  --z-loader:  700;

  /* =============================================
   * MATERIAL DESIGN SHADOW SYSTEM
   * Centralized here — admin-dashboard-material.css
   * no longer needs its own :root block.
   * ============================================= */
  --mat-shadow-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
  --mat-shadow-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
  --mat-shadow-3: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
  --mat-shadow-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  --mat-shadow-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
  --mat-shadow-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

  --mat-background:     #FAFAFA;
  --mat-surface:        #FFFFFF;
  --mat-divider:        rgba(0, 0, 0, 0.12);
  --mat-text-primary:   rgba(0, 0, 0, 0.87);
  --mat-text-secondary: rgba(0, 0, 0, 0.54);
  --mat-text-disabled:  rgba(0, 0, 0, 0.38);
  --mat-primary:        #D4AF37;
  --mat-primary-dark:   #B89620;
  --mat-primary-light:  #E5C968;
  --mat-accent:         #D4AF37;

  /* =============================================
   * ADMIN GOLD PALETTE (Legacy — admin panel only)
   * Kept intentionally separate from the green brand.
   * Admin UI uses gold accents per design spec.
   * ============================================= */
  --primary-gold: #D4AF37;
  --gold-light:   #E5C968;
  --gold-dark:    #B89620;
  --dark-black:   #121212;
  --black-light:  #1E1E1E;
  --off-white:    #F9F9F6;
  --warm-grey:    #8A8A80;
  --light-grey:   #DADADA;
  --grey-dark:    #6B6B62;

  /* Admin spacing aliases */
  --spacing-xs:  0.5rem;
  --spacing-sm:  1rem;
  --spacing-md:  1.5rem;
  --spacing-lg:  2rem;
  --spacing-xl:  3rem;
  --spacing-2xl: 4rem;

}


/* =============================================
 * GLOBAL BASE RESETS
 * Safe defaults that don't conflict with existing styles
 * ============================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* =============================================
 * UTILITY: Badge / Status Chips
 * Reusable across all modules (quiz, admin, history)
 * ============================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--badge-padding);
  border-radius: var(--badge-border-radius);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
}

.badge-success  { background: var(--badge-success-bg);  color: var(--badge-success-text); }
.badge-warning  { background: var(--badge-warning-bg);  color: var(--badge-warning-text); }
.badge-danger   { background: var(--badge-danger-bg);   color: var(--badge-danger-text); }
.badge-info     { background: var(--badge-info-bg);     color: var(--badge-info-text); }
.badge-gold     { background: var(--badge-gold-bg);     color: var(--badge-gold-text); }
.badge-primary  { background: var(--color-primary-muted); color: var(--color-primary); }


/* =============================================
 * UTILITY: Focus Ring
 * Accessible keyboard focus across all interactive elements
 * ============================================= */

:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}


/* =============================================
 * UTILITY: Scrollbar (optional, webkit only)
 * Keeps scrollbars consistent with brand
 * ============================================= */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--raw-neutral-100);
}

::-webkit-scrollbar-thumb {
  background: var(--raw-neutral-300);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}