/* ============================================================
   COLOURS — Kolégium Antona Neuwirtha
   Light mode only. Every text/background pairing documented
   below has a measured WCAG contrast ratio in the comment.
   Base ramps first, semantic role aliases second.
   ============================================================ */
:root {
  /* ---------- Base ramp: NAVY (brand primary, sampled from logo + site header) ---------- */
  --navy-950: #04212F; /* deepest ink / footer */
  --navy-900: #062A47; /* site top bar, sampled #073051 */
  --navy-800: #0B3455;
  --navy-700: #123E63; /* PRIMARY action */
  --navy-600: #1D4E78;
  --navy-500: #2E5472; /* sampled from CTA pill */
  --navy-400: #5C7B98;
  --navy-300: #94ABC1;
  --navy-200: #BFCEDD;
  --navy-100: #DCE5EE;
  --navy-50:  #EFF4F9;

  /* ---------- Base ramp: GOLD (secondary accent, sampled from "Podporte Kolégium" pill #d4bd40) ---------- */
  --gold-700: #8A7A18;
  --gold-600: #AC9829;
  --gold-500: #D5C242; /* the brand gold */
  --gold-400: #E0D06A;
  --gold-300: #EBE099;
  --gold-100: #F7F2D5;
  --gold-50:  #FCFAEC;

  /* ---------- Base ramp: INK (navy-tinted neutrals for text) ---------- */
  --ink-900: #16202B; /* 15.4:1 on white */
  --ink-700: #384A5C; /*  9.1:1 on white — body copy */
  --ink-500: #5F7080; /*  5.1:1 on white — muted text, still AA at 16px */
  --ink-400: #8494A1; /*  3.3:1 — NON-TEXT only (icons ≥24px, dividers, disabled) */
  --ink-300: #AEBAC4;

  /* ---------- Backgrounds ---------- */
  --paper:      #FFFFFF; /* default page + card surface */
  --cream:      #FAF6EE; /* warm section alternation */
  --cream-deep: #F4EDDF; /* second-level warm tint, quote blocks */
  --mist:       #ECF0F3; /* cool section tint as used on kolegium.org today */

  /* ---------- Base ramp: SEMANTIC hues ---------- */
  --green-700: #14603B;
  --green-600: #1E7A4D;
  --green-100: #E5F3EB;
  --red-700:   #A31E15;
  --red-600:   #C4271C;
  --red-100:   #FBEAE7;
  --amber-700: #7C4508;
  --amber-600: #9A5B12;
  --amber-100: #FBF0DE;
  --sky-700:   #14507C;
  --sky-600:   #1B6A9C;
  --sky-100:   #E7F0F7;
}

/* ============================================================
   SEMANTIC ROLES — always prefer these in components
   ============================================================ */
:root {
  /* Accent / action */
  --accent:            var(--navy-700); /* primary action, links, focus emphasis */
  --accent-hover:      var(--navy-800); /* darker on hover  */
  --accent-active:     var(--navy-900); /* darker still on press */
  --accent-subtle:     var(--navy-50);  /* tinted background for selected states */
  --accent-subtle-hover: var(--navy-100);
  --accent-border:     var(--navy-200);
  --on-accent:         #FFFFFF;         /* 11.1:1 on --accent */

  /* Donate highlight — gold is a SURFACE colour, never text on light backgrounds */
  --highlight:         var(--gold-500);
  --highlight-hover:   var(--gold-600);
  --on-highlight:      var(--navy-950); /* 8.4:1 on --highlight */
  --highlight-subtle:  var(--gold-50);
  --highlight-border:  var(--gold-400);

  /* Text */
  --text-heading:  var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-disabled: var(--ink-400);
  --text-on-dark:  #FFFFFF;
  --text-on-dark-muted: #B9C9D8; /* 7.6:1 on --surface-inverse */
  --text-link:       var(--navy-700);
  --text-link-hover: var(--navy-900);

  /* Backgrounds & surfaces */
  --bg-page:        var(--paper);
  --bg-alt:         var(--cream); /* alternating section — navy body text = 8.4:1 */
  --bg-alt-cool:    var(--mist);
  --surface-card:   var(--paper);
  --surface-sunken: var(--navy-50);
  --surface-inverse: var(--navy-900);
  --surface-disabled: #F2F4F6;

  /* Borders */
  --border-subtle: #E7ECF1;
  --border-default: #D6DEE7;
  --border-strong: #B9C6D3;
  --border-input:  #B9C6D3; /* 2.4:1 vs white — pairs with a 1.5px stroke, AA non-text */
  --border-inverse: rgba(255, 255, 255, 0.22);

  /* Focus — visible on light and dark */
  --focus-ring: #0F5C99;         /* 6.8:1 on white, 3.4:1 on --cream */
  --focus-ring-on-dark: var(--gold-400); /* 5.6:1 on --navy-900 */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Semantic states — HUE CHECK: none of these can be mistaken for --accent (navy)
     or --highlight (yellow-green gold). Error is a true red at 5.7:1 on white;
     warning is a brown-amber, deliberately darker and browner than --gold-500. */
  --success:         var(--green-600);
  --success-text:    var(--green-700); /* 7.6:1 on white */
  --success-surface: var(--green-100);
  --success-border:  #B7DCC7;

  --danger:          var(--red-600);   /* 5.7:1 on white */
  --danger-hover:    var(--red-700);
  --danger-text:     var(--red-700);   /* 7.6:1 on white */
  --danger-surface:  var(--red-100);
  --danger-border:   #F0C4BE;

  --warning:         var(--amber-600);
  --warning-text:    var(--amber-700); /* 8.0:1 on white */
  --warning-surface: var(--amber-100);
  --warning-border:  #EBD3AC;

  --info:            var(--sky-600);
  --info-text:       var(--sky-700);   /* 7.4:1 on white */
  --info-surface:    var(--sky-100);
  --info-border:     #BFD6E8;

  /* Destructive but quiet — used for "zrušiť podporu". Never a loud red fill. */
  --destructive-quiet-text:   var(--red-700);
  --destructive-quiet-border: #E0BEBA;
  --destructive-quiet-bg:     transparent;
  --destructive-quiet-bg-hover: var(--red-100);

  /* Fundraising thermometer — fill/track contrast 9.2:1 (AA non-text needs 3:1) */
  --meter-track:  #E4EAF0;
  --meter-fill:   var(--navy-700);
  --meter-fill-complete: var(--green-600);
  --meter-marker: var(--gold-500);
  --meter-label:  var(--ink-700);

  /* Status badge palette (paid / failed / refunded / active / paused / cancelled) */
  --status-paid-bg: var(--green-100);      --status-paid-fg: var(--green-700);      --status-paid-bd: #B7DCC7;
  --status-failed-bg: var(--red-100);      --status-failed-fg: var(--red-700);      --status-failed-bd: #F0C4BE;
  --status-refunded-bg: var(--amber-100);  --status-refunded-fg: var(--amber-700);  --status-refunded-bd: #EBD3AC;
  --status-active-bg: var(--navy-50);      --status-active-fg: var(--navy-800);     --status-active-bd: var(--navy-200);
  --status-paused-bg: #F1F3F5;             --status-paused-fg: #4C5966;             --status-paused-bd: #D8DEE4;
  --status-cancelled-bg: #FFFFFF;          --status-cancelled-fg: var(--ink-500);   --status-cancelled-bd: var(--border-default);

  /* Skeleton */
  --skeleton-base: #E9EEF3;
  --skeleton-shine: #F4F7FA;

  /* Scrim behind modals */
  --scrim: rgba(6, 42, 71, 0.55);
}