/* ═══════════════════════════════════════════════════════════════
   SimApt — Design Token System (Single Source of Truth)
   "Business Solutions made Simple & Apt"
   
   📍 All brand colors are defined here and only here.
   📍 Every other file should reference these variables.
   📍 To change the entire brand palette, edit ONLY this file.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Greens (Primary Identity) ───────────────────── */
  --si-green-900: #0B4A1D;     /* Deepest — headers */
  --si-green-700: #117A32;     /* Deep forest — buttons */
  --si-green-500: #27D300;     /* Vibrant brand green — primary */
  --si-green-300: #7BEB69;     /* Soft — highlights */
  --si-green-100: #E8FBE5;     /* Pale — backgrounds */

  /* ── Brand Yellows (Accent — Optimism & Creativity) ───── */
  --si-yellow-700: #E6B800;    /* Deep — icons */
  --si-yellow-500: #FFD400;    /* Golden yellow — CTA */
  --si-yellow-300: #FFE76B;    /* Soft — hover states */
  --si-yellow-100: #FFF8D8;    /* Pale — backgrounds */

  /* ── Neutrals (Professional Foundation) ────────────────── */
  --si-black:       #1B1B1B;   /* Charcoal — primary text */
  --si-dark:        #374151;   /* Dark grey — secondary text */
  --si-neutral:     #6B7280;   /* Cool grey — muted text */
  --si-light:       #E5E7EB;   /* Light grey — borders, dividers */
  --si-bg:          #F8FAFC;   /* Soft white — page backgrounds */
  --si-white:       #FFFFFF;   /* Pure white — cards, surfaces */

  /* ── Semantic Aliases ──────────────────────────────────── */
  --si-primary:       var(--si-green-500);
  --si-primary-hover: #20B800;
  --si-primary-dark:  var(--si-green-700);
  --si-accent:        var(--si-yellow-500);
  --si-accent-hover:  var(--si-yellow-300);
  --si-text:          var(--si-black);
  --si-text-secondary: var(--si-dark);
  --si-text-muted:    var(--si-neutral);
  --si-border:        var(--si-light);
  --si-surface:       var(--si-white);
  --si-surface-dim:   var(--si-bg);

  /* ── UI Components ─────────────────────────────────────── */
  /* Primary Button */
  --si-btn-primary-bg:       var(--si-green-500);
  --si-btn-primary-hover:    #20B800;
  --si-btn-primary-text:     var(--si-white);
  --si-btn-primary-shadow:   0 4px 14px rgba(39, 211, 0, 0.35);

  /* Secondary Button */
  --si-btn-secondary-bg:     var(--si-white);
  --si-btn-secondary-border: var(--si-green-500);
  --si-btn-secondary-text:   var(--si-green-500);
  --si-btn-secondary-hover:  var(--si-green-100);

  /* ── Status Colors ─────────────────────────────────────── */
  --si-success:       #16A34A;
  --si-success-bg:    #F0FDF4;
  --si-warning:       #FACC15;
  --si-warning-bg:    #FFFBEB;
  --si-error:         #DC2626;
  --si-error-bg:      #FEF2F2;
  --si-info:          #2563EB;
  --si-info-bg:       #F0F9FF;

  /* ── Gradients ─────────────────────────────────────────── */
  --si-gradient-primary: linear-gradient(135deg, #117A32, #27D300);
  --si-gradient-accent:  linear-gradient(135deg, #FFD400, #FFE76B);
  --si-gradient-dark:    linear-gradient(135deg, #1B1B1B, #374151);

  /* ── Shadows ───────────────────────────────────────────── */
  --si-shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.04);
  --si-shadow-md:  0 4px 20px rgba(39, 211, 0, 0.08);
  --si-shadow-lg:  0 10px 30px rgba(39, 211, 0, 0.12);
  --si-shadow-xl:  0 20px 40px rgba(39, 211, 0, 0.15);

  /* ── RGB Components (for rgba() usage) ────────────────── */
  --si-green-500-rgb:  39, 211, 0;
  --si-green-700-rgb:  17, 122, 50;
  --si-green-900-rgb:  11, 74, 29;
  --si-yellow-500-rgb: 255, 212, 0;

  /* ── Alpha Variants ────────────────────────────────────── */
  --si-alpha-64: rgba(var(--si-green-700-rgb), 0.64);
  --si-alpha-72: rgba(var(--si-green-700-rgb), 0.72);

  /* ── Border Radius ─────────────────────────────────────── */
  --si-radius-sm: 6px;
  --si-radius-md: 10px;
  --si-radius-lg: 16px;
  --si-radius-xl: 24px;

  /* ── Typography ────────────────────────────────────────── */
  --si-font-sans: 'Outfit', 'Inter', 'Segoe UI', 'Helvetica Neue', sans-serif;
  --si-font-heading: 'Outfit', sans-serif;

  /* ═════════════════════════════════════════════════════════
     BACKWARD COMPATIBILITY — old theme-* names
     These map old names → new colors so existing code still works.
     ═════════════════════════════════════════════════════════ */

  /* Old → New mappings */
  /* 
     IMPORTANT: --theme-navy maps to deep green (#117A32) for readability.
     --si-green-500 (#27D300) is the bright accent green — 
     it's reserved for buttons, badges, and highlights on dark BGs only.
  */
  --theme-navy:        var(--si-green-700);   /* was #97281c, now #117A32 — readable text green */
  --theme-navy-dark:   var(--si-green-900);   /* was #7b1f15, now #0B4A1D — darkest green */
  --theme-gold:        var(--si-accent);      /* was #1a7a4c (green), now yellow */
  --theme-bg-light:    var(--si-bg);          /* was #f8fafc */
  --theme-border:      var(--si-border);      /* was #e2e8f0 */
  --theme-text-dark:   var(--si-text);        /* was #0f172a */
  --theme-text-muted:  var(--si-text-muted);  /* was #64748b */
  --theme-shadow-sm:   var(--si-shadow-sm);
  --theme-shadow-md:   var(--si-shadow-md);
  --theme-shadow-lg:   var(--si-shadow-lg);
  --theme-navy-a3:     var(--si-alpha-64);    /* was #97281ca3 */
  --theme-navy-b8:     var(--si-alpha-72);    /* was #97281cb8 */
  --theme-navy-rgb:    var(--si-green-500-rgb); /* rgb components for rgba() */
}