/* EduConnect design tokens — WLC institutional identity + semantic status colors */

:root {
  /* Western Leyte College — forest green primary, gold accent */
  --ec-primary:        #0B6848;
  --ec-primary-hover:  #094F37;
  --ec-primary-light:  #D8F3E8;
  --ec-primary-border: #6BC9A8;
  --ec-primary-muted:  #E6F6EF;

  --ec-accent:         #B8860B;
  --ec-accent-light:   #FEF3C7;
  --ec-accent-border:  #FCD34D;

  --ec-ink:            #0F172A;
  --ec-muted:          #475569;
  --ec-muted-light:    #94A3B8;
  --ec-border:         #E2E8F0;
  --ec-surface:        #F8FAFC;
  --ec-white:          #FFFFFF;

  /* Semantic — attendance & workflow (web + docs parity with mobile) */
  --ec-success:        #059669;
  --ec-success-bg:     #D1FAE5;
  --ec-success-border: #6EE7B7;

  --ec-warning:        #D97706;
  --ec-warning-bg:     #FEF3C7;
  --ec-warning-border: #FCD34D;

  --ec-danger:         #DC2626;
  --ec-danger-bg:      #FEE2E2;
  --ec-danger-border:  #FCA5A5;

  --ec-info:           #2563EB;
  --ec-info-bg:        #DBEAFE;
  --ec-info-border:    #93C5FD;

  --ec-neutral:        #64748B;
  --ec-neutral-bg:     #F1F5F9;
  --ec-neutral-border: #CBD5E1;

  /* Legacy aliases (staff dashboards) */
  --green:        var(--ec-primary);
  --green-light:  var(--ec-primary-light);
  --green-dark:   var(--ec-primary-hover);
  --green-border: var(--ec-primary-border);
  --emerald:      var(--ec-success);
  --amber:        var(--ec-warning);
  --amber-light:  var(--ec-warning-bg);
  --amber-border: var(--ec-warning-border);
  --red:          var(--ec-danger);
  --red-light:    var(--ec-danger-bg);
  --red-border:   var(--ec-danger-border);
  --blue:         var(--ec-info);
  --violet:       #7C3AED;
  --orange:       #EA580C;
  --teal:         #0D9488;
  --ink:          var(--ec-ink);
  --muted:        var(--ec-muted);
  --border:       var(--ec-border);
  --bg:           var(--ec-surface);
  --white:        var(--ec-white);

  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --ec-radius-sm:  8px;
  --ec-radius-md:  12px;
  --ec-radius-lg:  16px;
  --ec-radius-pill: 9999px;

  --ec-space-1: 4px;
  --ec-space-2: 8px;
  --ec-space-3: 12px;
  --ec-space-4: 16px;
  --ec-space-5: 20px;
  --ec-space-6: 24px;

  --ec-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ec-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --ec-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1);

  --sidebar-w: 240px;
}