/* ============================================================
   KADIN — Color tokens
   Anchored to the three heraldic colors of the lambang:
   Biru (Royal Blue), Merah (Red), Emas (Gold), on Putih (White).
   ============================================================ */

:root {
  /* ---- Biru / Royal Blue — primary institutional color ----
     The blue of the ribbon & waves. Sampled #0000C0. */
  --blue-50:  #ECECFB;
  --blue-100: #D7D8F6;
  --blue-200: #AFB0EE;
  --blue-300: #8284E4;
  --blue-400: #4B4ED8;
  --blue-500: #2024CC;
  --blue-600: #0000C0; /* brand blue */
  --blue-700: #0000A0;
  --blue-800: #00007E;
  --blue-900: #0B0B5C;
  --blue-950: #070738;

  /* ---- Merah / Red — the Merah-Putih of the shield ---- */
  --red-50:  #FDECEE;
  --red-100: #FBD4D8;
  --red-200: #F6A7AE;
  --red-300: #F17783;
  --red-400: #ED4857;
  --red-500: #E81C2E; /* brand red */
  --red-600: #CC1527;
  --red-700: #A81220;
  --red-800: #84101A;
  --red-900: #671217;

  /* ---- Emas / Gold — the ship, horses & frame ---- */
  --gold-50:  #FFF8E8;
  --gold-100: #FFEEC2;
  --gold-200: #FFDB84;
  --gold-300: #FFC848;
  --gold-400: #FFB620;
  --gold-500: #FFA800; /* brand gold */
  --gold-600: #E08F00;
  --gold-700: #B36F00;
  --gold-800: #875300;
  --gold-900: #6B4205;

  /* ---- Ink / Neutral — cool, faintly blue-tinted to sit
     beside the royal blue without clashing ---- */
  --white:     #FFFFFF;
  --ink-50:  #F7F8FC;
  --ink-100: #EEF0F7;
  --ink-200: #DEE1EC;
  --ink-300: #C2C7D8;
  --ink-400: #9298B3;
  --ink-500: #6B7290;
  --ink-600: #4C5470;
  --ink-700: #343A53;
  --ink-800: #1F2439;
  --ink-900: #14172A;
  --ink-950: #0A0C18;

  /* ---- Supporting state hues (derived, used sparingly) ---- */
  --green-500: #1F9D57;
  --green-600: #178249;
  --green-50:  #E7F6EE;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in components
     ============================================================ */

  /* Brand roles */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active: var(--blue-800);
  --color-secondary:      var(--gold-500);
  --color-secondary-hover:var(--gold-600);
  --color-accent:         var(--red-500);
  --color-accent-hover:   var(--red-600);

  /* Text */
  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-primary:var(--white);
  --text-on-gold:   var(--ink-900);
  --text-link:      var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--ink-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --surface-primary: var(--blue-600);
  --surface-inverse: var(--ink-950);
  --surface-gold:    var(--gold-500);
  --surface-accent:  var(--red-500);

  /* Borders */
  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-400);
  --border-primary: var(--blue-600);

  /* States */
  --state-success: var(--green-600);
  --state-success-surface: var(--green-50);
  --state-warning: var(--gold-600);
  --state-warning-surface: var(--gold-50);
  --state-danger:  var(--red-500);
  --state-danger-surface: var(--red-50);
  --state-info:    var(--blue-600);
  --state-info-surface: var(--blue-50);

  /* Focus ring */
  --focus-ring: var(--blue-400);
}