/* ============================================================
   GC-ERP — COLOR TOKENS
   Base palette (raw values) + semantic aliases.
   Light is the default on :root. Dark is re-mapped under
   [data-theme="dark"]. Components only ever reference the
   SEMANTIC aliases (--surface-*, --text-*, --border-*, etc.)
   ============================================================ */
:root {
  /* ---- Brand green scale ---- */
  --green-50:  #ECFDF3;
  --green-100: #D3F8E0;
  --green-200: #A9EFC4;
  --green-300: #74E0A3;
  --green-400: #3FC882;
  --green-500: #28A86B;
  --green-600: #1F8A5B; /* primary */
  --green-700: #196E4A;
  --green-800: #15573B;
  --green-900: #114831;
  --green-950: #07271B;

  /* ---- Neutral (cool slate) scale ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8FAFB;
  --neutral-100: #F1F4F6;
  --neutral-200: #E3E8EC;
  --neutral-300: #CDD5DB;
  --neutral-400: #9AA6AF;
  --neutral-500: #6B7780;
  --neutral-600: #4D575F;
  --neutral-700: #39424A;
  --neutral-800: #262D33;
  --neutral-900: #181D21;
  --neutral-950: #0E1215;

  /* ---- Functional hues ---- */
  --blue-50:  #EFF5FF;  --blue-100: #DBE8FE; --blue-500: #3B7DE0; --blue-600: #2563EB; --blue-700: #1D4ED8;
  --amber-50: #FFF8EB;  --amber-100:#FEEFC7; --amber-500:#F0A92B; --amber-600:#D97706; --amber-700:#B45309;
  --red-50:   #FEF2F2;  --red-100:  #FDE0E0; --red-500:  #EF4444; --red-600:  #DC2626; --red-700:  #B91C1C;
  --teal-500: #0E9C8A;  --violet-500:#7C5CDB; --pink-500:#DB5C9A;

  /* ============== SEMANTIC ALIASES — LIGHT ============== */
  /* Surfaces */
  --surface-app:        var(--neutral-50);   /* page background */
  --surface-card:       var(--neutral-0);    /* cards, panels */
  --surface-raised:     var(--neutral-0);    /* menus, popovers */
  --surface-sunken:     var(--neutral-100);  /* wells, table zebra */
  --surface-inverse:    var(--neutral-900);
  --surface-hover:      var(--neutral-100);
  --surface-active:     var(--neutral-200);
  --surface-selected:   var(--green-50);

  /* Text */
  --text-primary:    var(--neutral-900);
  --text-secondary:  var(--neutral-600);
  --text-tertiary:   var(--neutral-500);
  --text-disabled:   var(--neutral-400);
  --text-inverse:    var(--neutral-0);
  --text-link:       var(--green-700);
  --text-on-brand:   #FFFFFF;

  /* Borders */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-focus:    var(--green-600);

  /* Brand */
  --brand:           var(--green-600);
  --brand-hover:     var(--green-700);
  --brand-active:    var(--green-800);
  --brand-subtle:    var(--green-50);
  --brand-subtle-hover: var(--green-100);
  --brand-border:    var(--green-200);
  --brand-text:      var(--green-700);

  /* Official Greencoding brand colors (from the logo) — use for brand
     surfaces/lockups; the green-600 primary above drives UI actions. */
  --brand-forest:    #003D31; /* logo tile / dark brand surface */
  --brand-lime:      #87C65A; /* logo accent loop */

  /* Status — text/icon + subtle bg + border */
  --success:        var(--green-600);  --success-text: var(--green-700);  --success-bg: var(--green-50);  --success-border: var(--green-200);
  --warning:        var(--amber-600);  --warning-text: var(--amber-700);  --warning-bg: var(--amber-50);  --warning-border: var(--amber-100);
  --danger:         var(--red-600);    --danger-text:  var(--red-700);    --danger-bg:  var(--red-50);    --danger-border:  var(--red-100);
  --info:           var(--blue-600);   --info-text:    var(--blue-700);   --info-bg:    var(--blue-50);   --info-border:    var(--blue-100);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-600) 35%, transparent);

  /* Data-viz categorical sequence */
  --viz-1: var(--green-600);
  --viz-2: var(--blue-600);
  --viz-3: var(--amber-600);
  --viz-4: var(--violet-500);
  --viz-5: var(--teal-500);
  --viz-6: var(--pink-500);
}

/* ===================== DARK ===================== */
[data-theme="dark"] {
  --surface-app:        var(--neutral-950);
  --surface-card:       var(--neutral-900);
  --surface-raised:     var(--neutral-800);
  --surface-sunken:     #0A0D0F;
  --surface-inverse:    var(--neutral-100);
  --surface-hover:      var(--neutral-800);
  --surface-active:     var(--neutral-700);
  --surface-selected:   color-mix(in srgb, var(--green-600) 18%, var(--neutral-900));

  --text-primary:    var(--neutral-50);
  --text-secondary:  var(--neutral-300);
  --text-tertiary:   var(--neutral-400);
  --text-disabled:   var(--neutral-600);
  --text-inverse:    var(--neutral-900);
  --text-link:       var(--green-300);
  --text-on-brand:   #06241A;

  --border-subtle:   var(--neutral-800);
  --border-default:  var(--neutral-700);
  --border-strong:   var(--neutral-600);
  --border-focus:    var(--green-400);

  --brand:           var(--green-500);
  --brand-hover:     var(--green-400);
  --brand-active:    var(--green-300);
  --brand-subtle:    color-mix(in srgb, var(--green-600) 16%, var(--neutral-900));
  --brand-subtle-hover: color-mix(in srgb, var(--green-600) 26%, var(--neutral-900));
  --brand-border:    color-mix(in srgb, var(--green-500) 40%, var(--neutral-800));
  --brand-text:      var(--green-300);

  --success-text: var(--green-300); --success-bg: color-mix(in srgb, var(--green-600) 16%, var(--neutral-900)); --success-border: color-mix(in srgb, var(--green-500) 35%, var(--neutral-800));
  --warning-text: #F5C969;          --warning-bg: color-mix(in srgb, var(--amber-600) 18%, var(--neutral-900)); --warning-border: color-mix(in srgb, var(--amber-500) 35%, var(--neutral-800));
  --danger-text:  #F2A1A1;          --danger-bg:  color-mix(in srgb, var(--red-600) 18%, var(--neutral-900));   --danger-border:  color-mix(in srgb, var(--red-500) 35%, var(--neutral-800));
  --info-text:    #9DC0F5;          --info-bg:    color-mix(in srgb, var(--blue-600) 18%, var(--neutral-900));  --info-border:    color-mix(in srgb, var(--blue-500) 35%, var(--neutral-800));

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-400) 40%, transparent);

  --viz-2: var(--blue-500);
}