:root {
  /* ============================================================
     Palette (raw brand colors)
     ============================================================ */
  --midnight-green: #00586C;
  --blue-munsell: #009CA8;
  --cambridge-blue: #9FC6B9;
  --wheat: #F5E0B7;
  --hunyadi-yellow: #FFBF69;
  --orange-peel: #FF9F1C;
  --orange-hover: #F58F00;

  /* Neutrals */
  --gray-500: #6b7280;
  --light-gray: #E5E7EB;
  --slate-700: #334155;
  --slate-900: #0F172A;

  /* Brand accent */
  --accent: var(--blue-munsell);
  --accent-contrast: #ffffff;

  --accent-tint-12: rgba(0, 156, 168, 0.12);
  --accent-tint-18: rgba(0, 156, 168, 0.18);
  --accent-ring: rgba(0, 156, 168, 0.35);

  /* Actions */
  --action-primary: var(--orange-peel);
  --action-primary-hover: var(--orange-hover);
  --action-primary-contrast: #ffffff;
  --action-primary-hover-border: color-mix(in oklab, var(--action-primary) 80%, #000);
  --action-primary-active-bg: color-mix(in oklab, var(--action-primary) 85%, #000);
  --action-primary-shadow: 0 2px 0 rgba(15, 23, 42, 0.08);

  --action-secondary-bg: var(--surface);
  --action-secondary-border: var(--orange-peel);
  --action-secondary-hover: var(--wheat);
  --action-secondary-text: var(--orange-peel);
  --action-secondary-hover-bg: color-mix(in oklab, var(--action-secondary-border) 18%, var(--surface));
  --action-secondary-hover-border: color-mix(in oklab, var(--action-secondary-border) 55%, var(--border));
  --action-secondary-hover-text: var(--midnight-green);
  --action-secondary-active-bg: color-mix(in oklab, var(--action-secondary-border) 26%, var(--surface));

  --action-accent: var(--accent);
  --action-accent-hover: color-mix(in oklab, var(--accent) 80%, #000);
  --action-accent-contrast: var(--accent-contrast);

  /* Disabled */
  --disabled-bg: var(--surface-muted);
  --disabled-text: var(--text-muted);
  --disabled-border: var(--border);

  /* Focus ring */
  --focus-ring-color: var(--accent-ring);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);

  /* ============================================================
     Semantic tokens (use these in components)
     ============================================================ */

  /* Surfaces */
  --surface: #ffffff;
  --surface-muted: #F3F4F6;

  /* Text */
  --text-strong: var(--slate-900);
  --text-muted: var(--gray-500);

  /* Borders */
  --border: var(--light-gray);

  /* Shadows */
  --shadow-menu: 0 10px 30px rgba(2, 8, 23, 0.12);
  --shadow-card: 0 4px 10px rgba(0, 0, 0, 0.10);

  /* Status */
  --info: var(--accent);
  --success: #22c55e;
  --warning: #F59E0B;
  --danger: #E03137;
  --status-info: var(--info);
  --status-success: var(--success);
  --status-warning: var(--warning);
  --status-danger: var(--danger);

  /* Elements and links */
  --link: var(--blue-munsell);
  --link-hover: var(--midnight-green);

  /* Tooltip */
  --tooltip-bg: var(--surface);
  --tooltip-text: var(--text-strong);
  --tooltip-border: var(--border);
  --tooltip-shadow: var(--shadow-menu);
  --tooltip-radius: var(--radius-2);
  --tooltip-max-w: 260px;
  --tooltip-pad: var(--space-3);
  --tooltip-gap: 10px; /* distance icon <-> tooltip */
  --tooltip-viewport-pad: 12px; /* Margin to the screen border */

  /* Banners */
  --banner-bg: var(--surface-muted);
  --banner-border: var(--border);
  --banner-text: var(--text-strong);
  --banner-muted: var(--text-muted);
  --banner-radius: var(--radius-2);

  --banner-accent: var(--accent); /* left stripe */
  --banner-accent-info: var(--status-info);
  --banner-accent-warning: var(--status-warning);
  --banner-accent-danger: var(--status-danger);
  --banner-accent-success: var(--status-success);

  /* “Badge” inside banner (for rank, etc.) */
  --banner-badge-bg: var(--pill-active-bg);
  --banner-badge-border: var(--pill-active-border);
  --banner-badge-text: var(--text-strong);

  /* ============================================================
     Spacing / radius
     ============================================================ */
  --space-0: 0.125rem;   /* 2px */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */

  --radius-1: 6px;
  --radius-2: 12px;
  --radius-3: 16px;

  --readable-w: 28rem;

  /* ============================================================
     Typography
     ============================================================ */
  --fs-body: 1rem;
  --fs-h1: 1.75rem;
  --fs-h2: 1.25rem;
  --fs-h3: 1rem;
  --fs-small: 0.875rem;
  --fs-control-sm: .8125rem;

  --fs-icon: 22px;
  --fs-icon-sm: 18px;

  --lh-body: 1.45;
  --lh-heading: 1.2;

  /* ============================================================
     Controls (inputs/selects)
     ============================================================ */
  --control-bg: var(--surface);
  --control-border: var(--border);
  --control-border-focus: var(--blue-munsell);
  --control-shadow-focus: 0 0 0 3px rgba(0, 156, 168, 0.2);
  --control-radius: var(--radius-1);
  --control-min-height: 2.5rem;

  /* ============================================================
     Layout
     ============================================================ */
  --layout-container-max-w: 1100px;   /* default app content */
  --layout-container-narrow-w: 900px; /* detail-like pages */

  /* ============================================================
     Cards
     ============================================================ */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-radius: var(--radius-3);
  --card-padding: var(--space-6);
  --card-shadow: var(--shadow-card);

  /* ============================================================
     Media cards
     ============================================================ */
  --card-media-target-w: 260px;
  --card-media-max-w: 320px;
  --card-media-narrow-w: 200px;
  --card-media-ratio: 5 / 3;
  --card-media-ratio-mobile: 7 / 3;

  /* ============================================================
     Menus / popovers
     ============================================================ */
  --menu-bg: var(--surface);
  --menu-border: var(--border);
  --menu-radius: var(--radius-2);
  --menu-shadow: var(--shadow-menu);

  /* ============================================================
     Pills / segmented controls
     ============================================================ */
  --pill-bg: var(--surface);
  --pill-border: var(--border);
  --pill-radius: 999px;
  --pill-active-bg: var(--accent-tint-12);
  --pill-active-border: color-mix(in oklab, var(--accent) 30%, var(--border));
  --pill-text: var(--text-muted);
  --pill-text-active: var(--text-strong);

  /* ============================================================
     Interaction
     ============================================================ */
  --surface-hover: var(--surface-muted);
  --surface-active: color-mix(in oklab, var(--surface-muted) 70%, var(--surface));

  /* Links underline styling */
  --link-underline-thickness: 1px;
  --link-underline-offset: 2px;
  --link-underline-thickness-hover: 2px;

  /* ============================================================
     Sidebar
     ============================================================ */
  --sidebar-bg: var(--surface);
  --sidebar-border: var(--border);
  --sidebar-text: var(--text-strong);
  --sidebar-muted: var(--text-muted);
  --sidebar-icon: var(--slate-700);

  --sidebar-active-bg: var(--accent-tint-12);
  --sidebar-active-ring: var(--accent-ring);

  /* ============================================================
     Mobile shell
     ============================================================ */
  --mobile-header-h: 56px;
  --mobile-nav-h: 56px;
  --app-height: 100vh;
  --safe-bottom: env(safe-area-inset-bottom);
}

/* ============================================================
   Browser autofill override
   ============================================================ */

/* Chrome / Edge / Brave */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 1000px var(--control-bg) inset;
  box-shadow: 0 0 0 1000px var(--control-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--control-bg) inset;
  -moz-text-fill-color: var(--text-strong);
}

/* ============================================================
   Styles
   ============================================================ */

/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

/* Base typography */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-strong);
  background: var(--surface);
}

h1, h2, h3 {
  line-height: var(--lh-heading);
  font-weight: 600;
  color: var(--text-strong);
  margin: 0;
  margin-block: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p {
  margin: 0;
  margin-block: 0;
}

small { font-size: var(--fs-small); }

a {
  color: var(--link);
  text-decoration: none;
  text-decoration-skip-ink: auto;
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: var(--link-underline-thickness-hover);
}
a:focus-visible { box-shadow: var(--focus-ring); }

button,
input,
select,
textarea {
  font-family: inherit;
}

/* Material Symbols */
.mi {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: var(--fs-icon);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-display: swap;
}

textarea {
  resize: vertical;
}

/* Controls */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='date'],
textarea {
  width: 100%;
  padding: 0.5em 1em;
  font-size: 1rem;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  background-color: var(--control-bg);
  min-height: var(--control-min-height);
}

input[type='password'] {
  padding-right: 4em;
}

input:focus-visible,
textarea:focus-visible {
  border-color: var(--control-border-focus);
  box-shadow: var(--control-shadow-focus);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--text-muted) 75%, var(--surface));
}

input:disabled,
textarea:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  cursor: not-allowed;
  opacity: 1;
}

.required { color: var(--danger); }

.date-input{
  max-width: 280px;
}

/* Select */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  padding: 0.5em 2.25em 0.5em 1em;
  font-size: 1rem;
  line-height: 1.2;

  background-color: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);

  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'><path d='M4.646 5.646a.5.5 0 0 1 .708 0L8 8.293l2.646-2.647a.5.5 0 0 1 .708.708L8.354 9.354a.5.5 0 0 1-.708 0L4.646 6.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-position: right .625rem center;
  background-size: 16px 16px;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: var(--control-min-height);
}

select:focus {
  outline: none;
  border-color: var(--control-border-focus);
  box-shadow: var(--control-shadow-focus);
}

select:disabled {
  background-color: var(--surface-muted);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 1;
}

option { color: var(--text-strong); }

/* Password toggle */
.form__field--password { position: relative; }

.pwd-control { position: relative; display: block; }
.pwd-control > input { padding-right: 2.25rem; }

.toggle-pwd {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-pwd .mi {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 24;
  color: var(--text-muted);
  transition: color .2s ease, transform .1s ease;
}

.toggle-pwd:hover .mi,
.toggle-pwd:focus-visible .mi {
  color: var(--blue-munsell);
}

.toggle-pwd[aria-pressed='true'] .mi {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 24;
}

.toggle-pwd:active .mi { transform: scale(0.96); }

/* Focus visible (global) */
:where(a, button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Visibility */
.hidden { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Images */
.flip-horizontal { transform: scaleX(-1); }

/* Mobile typography adjustments */
@media (max-width: 768px) {
  :root {
    --fs-h1: 1.5rem;
    --fs-h2: 1.15rem;
    --fs-h3: 1rem;
    --card-media-ratio: var(--card-media-ratio-mobile);
  }

  input[type='text'],
  input[type='email'],
  input[type='password'],
  textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
  }
}