/* ============================================================
   Enable Essential — Design Tokens
   Based on the SAP × Enable Essential design system.
   Single source of truth for color, spacing, typography.
   ============================================================ */

:root {
  /* ── Enable Essential Core Palette ─────────────────────── */
  --ee-navy:        #011F47;
  --ee-mid-blue:    #004BAA;
  --ee-light-blue:  #019ED6;
  --ee-turquoise:   #58E0E4;
  --ee-charcoal:    #131E29;
  --ee-gray:        #6B7280;
  --ee-gray-soft:   #8896A7;
  --ee-light-bg:    #F4F4F4;
  --ee-surface:     #F7F9FC;
  --ee-white:       #FFFFFF;

  /* ── Status / Semantic ─────────────────────────────────── */
  --status-future:        #E07B00;   /* SAP amber — pending / future */
  --status-future-bg:     #FDF3E7;
  --status-active:        #019ED6;   /* in development / active */
  --status-active-bg:     #E6F4FA;
  --status-done:          #1A7F3C;   /* delivered / approved */
  --status-done-bg:       #E8F5EE;
  --status-planned:       #6B7280;
  --status-planned-bg:    #F3F4F6;
  --status-error:         #DC2626;
  --status-error-bg:      #FEE2E2;

  /* ── Hero / Welcome gradients (Learning Portal) ────────── */
  --hero-bg-start:        #E8F4FD;
  --hero-bg-end:          #FFFFFF;
  --welcome-bg-start:     #1B6ECC;
  --welcome-bg-end:       #0B4F9E;
  --cta-bg-start:         #011F47;
  --cta-bg-end:           #004BAA;

  /* ── Spacing Scale ─────────────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  96px;

  /* ── Typography Scale ──────────────────────────────────── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;

  /* ── Elevation / Shadows (SAP Fiori-inspired) ──────────── */
  --shadow-card:    0 1px 4px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
  --shadow-hover:   0 4px 16px rgba(0,0,0,0.14), 0 0 0 1px rgba(1,158,214,0.20);
  --shadow-panel:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-modal:   0 20px 50px rgba(0,0,0,0.20);

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── Borders ───────────────────────────────────────────── */
  --border-color:      #D1D5DB;
  --border-color-soft: #E2E8F0;
  --border-color-dark: #9CA3AF;
  --border-width:      1px;

  /* ── Transitions ───────────────────────────────────────── */
  --t-fast:   0.15s ease;
  --t-base:   0.20s ease;
  --t-panel:  0.25s cubic-bezier(0.4, 0, 0.2, 1);
}