/* ============================================================
   S3 Regnskap — Color tokens
   Brand green #2d885d + white, a cool-neutral grey scale,
   and a restrained semantic set. Green is a hero accent used
   sparingly against generous white space.
   ============================================================ */

:root {
  /* ---- Brand green scale (500 = the logo green) ---- */
  --green-50:  #eef7f2;
  --green-100: #d6ece1;
  --green-200: #aedcc4;
  --green-300: #7cc6a1;
  --green-400: #4ba87b;
  --green-500: #2d885d;  /* brand */
  --green-600: #246e4b;
  --green-700: #1d583c;
  --green-800: #184730;
  --green-900: #123626;

  /* ---- Neutral / ink scale (faint cool-green tint) ---- */
  --neutral-0:   #ffffff;
  --neutral-25:  #f8faf9;
  --neutral-50:  #f1f4f3;
  --neutral-100: #e7ebe9;
  --neutral-200: #d4dad7;
  --neutral-300: #b3bcb8;
  --neutral-400: #8a948f;
  --neutral-500: #69736e;
  --neutral-600: #4d5651;
  --neutral-700: #39423d;
  --neutral-800: #262d29;
  --neutral-900: #161b18;

  /* ---- Semantic hues ---- */
  --success-50:  #eaf7ef;
  --success-500: #1f8a52;
  --success-600: #176b40;

  --warning-50:  #fdf4e3;
  --warning-500: #d9890f;
  --warning-600: #a9690a;

  --danger-50:   #fbecec;
  --danger-500:  #d04545;
  --danger-600:  #a93434;

  --info-50:     #eaf1fa;
  --info-500:    #2f6db3;
  --info-600:    #24578f;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code
     ============================================================ */

  /* Brand */
  --brand:            var(--green-500);
  --brand-hover:      var(--green-600);
  --brand-press:      var(--green-700);
  --brand-subtle:     var(--green-50);
  --brand-subtle-2:   var(--green-100);
  --on-brand:         var(--neutral-0);

  /* Text */
  --text-strong:      var(--neutral-900);
  --text-body:        var(--neutral-700);
  --text-muted:       var(--neutral-500);
  --text-subtle:      var(--neutral-400);
  --text-on-dark:     var(--neutral-0);
  --text-brand:       var(--green-600);
  --text-link:        var(--green-600);

  /* Surfaces */
  --surface-page:     var(--neutral-25);
  --surface-card:     var(--neutral-0);
  --surface-sunken:   var(--neutral-50);
  --surface-hover:    var(--neutral-50);
  --surface-inverse:  var(--neutral-900);
  --surface-brand:    var(--green-500);

  /* Borders */
  --border-subtle:    var(--neutral-100);
  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-brand:     var(--green-500);
  --border-focus:     var(--green-500);

  /* Semantic surfaces + text */
  --success:          var(--success-500);
  --success-text:     var(--success-600);
  --success-surface:  var(--success-50);

  --warning:          var(--warning-500);
  --warning-text:     var(--warning-600);
  --warning-surface:  var(--warning-50);

  --danger:           var(--danger-500);
  --danger-text:      var(--danger-600);
  --danger-surface:   var(--danger-50);

  --info:             var(--info-500);
  --info-text:        var(--info-600);
  --info-surface:     var(--info-50);

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