/* ============================================================
   Runit — Color tokens
   Source of truth: Guidelines_RUNIT (Sistemas de color · Porcentajes)
   Principal:  Green 32D17E · Black 1C1E1C · Cool Gray E0E1DD
   Secundario: Teal 175E54
   ============================================================ */
:root {
  /* --- Brand base palette (exact from guidelines) --- */
  --runit-green: #32D17E;        /* Pantone 7479 C · principal */
  --runit-black: #1C1E1C;        /* Pantone 419 C · principal  */
  --runit-gray:  #E0E1DD;        /* Cool Gray 1C · principal   */
  --runit-teal:  #175E54;        /* Pantone 561 C · secundario */

  /* --- Green ramp (derived, harmonious around #32D17E) --- */
  --green-100: #E4F8EE;
  --green-200: #BEEDD3;
  --green-300: #8AE0B2;
  --green-400: #58D797;
  --green-500: #32D17E;   /* brand green */
  --green-600: #23B268;
  --green-700: #1C8C53;
  --green-800: #176B41;
  --green-900: #124F31;

  /* --- Teal ramp (derived around #175E54) --- */
  --teal-400: #2A8877;
  --teal-500: #1F7263;
  --teal-600: #175E54;    /* brand teal */
  --teal-700: #124B43;
  --teal-800: #0E3A34;

  /* --- Ink / neutral ramp (cool, green-leaning grays) ---
     Premium refinement: a true paper-white top end and a deep,
     layered ink stack so dark surfaces read as material, not flat. */
  --ink-000: #FFFFFF;
  --ink-025: #FBFBF9;   /* card white, a hair off pure */
  --ink-050: #F5F5F2;   /* page paper */
  --ink-100: #ECEDE8;
  --ink-150: #E0E1DD;    /* brand cool gray */
  --ink-200: #CFD1CB;
  --ink-300: #ADB0A9;
  --ink-400: #83877E;
  --ink-500: #5E625A;
  --ink-600: #43463F;
  --ink-700: #2C2F29;
  --ink-800: #212320;   /* elevated dark surface */
  --ink-850: #1C1E1C;   /* brand black */
  --ink-900: #191B18;   /* base dark surface */
  --ink-950: #121412;   /* deepest ground */

  /* --- Semantic status --- */
  --success: #32D17E;
  --warning: #F2B33D;
  --danger:  #E5533C;
  --info:    #2F8FD1;

  /* ============================================================
     Semantic aliases — reach for these in components
     ============================================================ */
  /* Surfaces */
  --surface-page:      var(--ink-050);
  --surface-card:      var(--ink-025);
  --surface-raised:    var(--ink-000);
  --surface-sunken:    var(--ink-100);
  --surface-inverse:   var(--ink-900);
  --surface-brand:     var(--runit-green);
  --surface-brand-soft:var(--green-100);
  --surface-teal:      var(--runit-teal);

  /* Text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-800);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-inverse:  var(--ink-000);
  --text-on-brand: var(--ink-900);   /* black type on green = brand pairing */
  --text-brand:    var(--green-700);
  --text-link:     var(--teal-600);
  --text-link-hover: var(--teal-700);

  /* Borders / lines */
  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--runit-green);
  --border-focus:   var(--green-600);

  /* Interactive fills */
  --accent:            var(--runit-green);
  --accent-hover:      var(--green-600);
  --accent-active:     var(--green-700);
  --accent-contrast:   var(--ink-900);
  --control-bg:        var(--ink-000);
  --control-bg-hover:  var(--ink-050);
  --control-track:     var(--ink-200);

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

  /* Hairlines — premium thin separators (favoured over shadow) */
  --hairline:        color-mix(in srgb, var(--ink-900) 9%, transparent);
  --hairline-strong: color-mix(in srgb, var(--ink-900) 15%, transparent);
  --hairline-on-dark: rgba(255, 255, 255, 0.10);
  --hairline-on-dark-strong: rgba(255, 255, 255, 0.16);

  /* Elevated dark material (banners, record screen, dark cards) */
  --surface-dark:       var(--ink-900);
  --surface-dark-raised: var(--ink-800);
}