/*
 * ============================================================
 * PENA Konsultan — assets/css/variables.css
 * DESIGN: Gen Z Light — Space Grotesk · Indigo · Amber
 * Matches: pena_design1_fullpreview.html
 * ============================================================
 */

:root {
  /* BRAND */
  --color-primary:        #4F46E5;   /* indigo */
  --color-primary-dark:   #3730A3;
  --color-primary-light:  #EEF2FF;
  --color-accent:         #F59E0B;   /* amber */
  --color-accent-dark:    #D97706;
  --color-accent-light:   #FEF3C7;

  /* NEUTRAL */
  --color-text:           #111111;
  --color-text-muted:     #6B7280;
  --color-text-light:     #9CA3AF;
  --color-text-inverse:   #FFFFFF;
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F9FAFB;
  --color-bg-dark:        #0d0d10;
  --color-border:         #E5E7EB;
  --color-border-dark:    #D1D5DB;

  /* STATUS */
  --color-success:        #10B981;
  --color-success-light:  #ECFDF5;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-error:          #EF4444;
  --color-error-light:    #FEF2F2;
  --color-info:           #3B82F6;
  --color-info-light:     #EFF6FF;

  /* CATEGORIES */
  --cat-k3:               #4F46E5;  --cat-k3-bg:           #EEF2FF;
  --cat-lingkungan:       #10B981;  --cat-lingkungan-bg:   #ECFDF5;
  --cat-iso:              #0EA5E9;  --cat-iso-bg:          #F0F9FF;
  --cat-mining:           #F59E0B;  --cat-mining-bg:       #FEF3C7;
  --cat-soft:             #8B5CF6;  --cat-soft-bg:         #F5F3FF;
  --cat-technical:        #F43F5E;  --cat-technical-bg:    #FFF1F2;
  --cat-purna:            #059669;  --cat-purna-bg:        #F0FDF4;

  /* TIERS */
  --tier-bronze:   #CD7F32;  --tier-bronze-bg:   #FDF3E7;
  --tier-silver:   #9CA3AF;  --tier-silver-bg:   #F3F4F6;
  --tier-gold:     #F59E0B;  --tier-gold-bg:     #FEF3C7;
  --tier-platinum: #4F46E5;  --tier-platinum-bg: #EEF2FF;

  /* TYPOGRAPHY */
  --font-main:            'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-display:         'Space Grotesk', system-ui, sans-serif;
  --font-mono:            'Courier New', monospace;

  --font-size-xs:         11px;
  --font-size-sm:         13px;
  --font-size-base:       15px;
  --font-size-md:         16px;
  --font-size-lg:         18px;
  --font-size-xl:         22px;
  --font-size-2xl:        28px;
  --font-size-3xl:        36px;
  --font-size-4xl:        48px;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:700;

  --line-height-tight:    1.05;
  --line-height-normal:   1.6;
  --line-height-relaxed:  1.75;

  /* SPACING */
  --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; --space-20:80px;

  /* RADIUS — moderate, not too round */
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm:   0 1px 4px rgba(0,0,0,.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 12px 32px rgba(0,0,0,.10);
  --shadow-xl:   0 20px 48px rgba(79,70,229,.12);

  /* LAYOUT */
  --container:  1200px;
  --nav-height: 64px;

  /* TRANSITIONS */
  --transition:       .2s ease;
  --transition-slow:  .4s ease;
  --transition-bounce:.2s ease;

  /* ADMIN SIDEBAR */
  --sidebar-width: 240px;
  --sidebar-bg:    #111111;
  --sidebar-text:  rgba(255,255,255,.65);
  --sidebar-active:#FFFFFF;
  --sidebar-hover: rgba(79,70,229,.2);
}

/* HERO — light white background */
:root {
  --hero-bg-from: #FFFFFF;
  --hero-bg-to:   #FFFFFF;
  --hero-text:    #111111;
  --hero-subtext: #6B7280;
  --hero-accent:  #4F46E5;
}