/* ============================================================
   Cyclades design tokens — SINGLE SOURCE OF TRUTH.
   Mirrored from storybook/styles.css :root. Every page links this;
   do NOT redefine these tokens per page. Update them here only.
   ============================================================ */
:root {
  /* Primary */
  --kingfisher: #4A49BC;
  --black: #101820;
  --white: #FFFFFF;
  --stone: #D7D2CB;

  /* Kingfisher tints */
  --kingfisher-0: #F0F0FF;
  --kingfisher-1: #E1E1F8;
  --kingfisher-2: #D1D1EC;
  --kingfisher-3: #37327A;
  --kingfisher-4: #2C275B;

  /* Stone tints */
  --stone-0: #F6F5F3;
  --stone-1: #F2F1EE;
  --stone-2: #8E8D83;
  --stone-3: #727168;
  --stone-4: #343430;

  /* Amber */
  --amber-light-0: #FFE6CA;
  --amber-light-1: #FFDEB7;
  --amber-light-2: #FFCE94;
  --amber-0: #FF9E1B;
  --amber-1: #E48300;
  --amber-2: #D48300;

  /* Red */
  --red-light-0: #FFDAD1;
  --red-light-1: #F2CDC5;
  --red-light-2: #E2B9AF;
  --red-0: #BB0012;
  --red-1: #7B1410;
  --red-2: #5C150E;

  /* Green */
  --green-light-0: #CBFEED;
  --green-light-1: #B7F4E0;
  --green-light-2: #9AEACF;
  --green-0: #00664F;
  --green-1: #0A5B49;
  --green-2: #164F42;

  /* Size Scale */
  --size-0: 0px;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 24px;
  --size-6: 32px;
  --size-7: 40px;
  --size-8: 48px;
  --size-9: 56px;
  --size-10: 64px;
  --size-11: 72px;
  --size-12: 80px;
  --size-13: 96px;
  --size-14: 120px;
  --size-15: 160px;
  --size-16: 200px;

  /* Shadows */
  --kingfisher-light-dropshadow: 0 8px 24px rgba(74, 73, 188, 0.18);
  --kingfisher-medium-dropshadow: drop-shadow(0 8px 20px rgba(74, 73, 188, 0.25));
  --kingfisher-heavy-dropshadow: 0 8px 24px rgba(74, 73, 188, 0.5);
  --soft-dropshadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  --modal-dropshadow: 0 0 40px rgba(0, 0, 0, 0.10);
  --card-default-shadow: 0 4px 12px rgba(31, 36, 45, 0.04);
  --card-hover-shadow: 0 4px 8px rgba(31, 36, 45, 0.40);
  --card-press-shadow: 0 1px 3px rgba(31, 36, 45, 0.90);

  /* Motion */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-intentional: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-snap: cubic-bezier(0.99, 0, 0.01, 1);
  --ease-spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Gradients — Light */
  --gradient-light-1: linear-gradient(90deg, var(--kingfisher-0) 0%, var(--kingfisher-1) 100%);
  --gradient-light-2: linear-gradient(90deg, var(--kingfisher-1) 0%, var(--kingfisher-2) 100%);
  --gradient-light-3: linear-gradient(90deg, var(--kingfisher-0) 0%, var(--kingfisher-2) 100%);
  --gradient-light-4: linear-gradient(90deg, var(--kingfisher-2) 0%, var(--stone-0) 100%);
  --gradient-light-5: linear-gradient(90deg, var(--kingfisher-1) 0%, var(--stone-1) 100%);

  /* Gradients — Medium */
  --gradient-medium-1: linear-gradient(90deg, var(--kingfisher) 0%, var(--stone) 100%);

  /* Gradients — Dark */
  --gradient-dark-1: linear-gradient(90deg, var(--kingfisher) 0%, var(--kingfisher-3) 100%);
  --gradient-dark-2: linear-gradient(90deg, var(--kingfisher) 0%, var(--kingfisher-4) 100%);

  /* ── Button Tokens ── */

  /* Primary Filled */
  --btn-primary-filled-bg: var(--kingfisher);
  --btn-primary-filled-text: var(--white);
  --btn-primary-filled-border: var(--kingfisher);
  --btn-primary-filled-bg-hover: var(--kingfisher-3);
  --btn-primary-filled-border-hover: var(--kingfisher-3);
  --btn-primary-filled-bg-active: var(--kingfisher-4);
  --btn-primary-filled-border-active: var(--kingfisher-4);

  /* Primary Outlined */
  --btn-primary-outlined-bg: transparent;
  --btn-primary-outlined-text: var(--kingfisher);
  --btn-primary-outlined-border: var(--kingfisher);
  --btn-primary-outlined-bg-hover: var(--kingfisher);
  --btn-primary-outlined-text-hover: var(--white);
  --btn-primary-outlined-bg-active: var(--kingfisher-3);
  --btn-primary-outlined-text-active: var(--white);
  --btn-primary-outlined-border-active: var(--kingfisher-3);

  /* Primary Simple */
  --btn-primary-simple-bg: transparent;
  --btn-primary-simple-text: var(--kingfisher);
  --btn-primary-simple-border: transparent;
  --btn-primary-simple-bg-hover: var(--kingfisher-0);
  --btn-primary-simple-border-hover: var(--kingfisher-0);
  --btn-primary-simple-bg-active: var(--kingfisher-1);
  --btn-primary-simple-border-active: var(--kingfisher-1);

  /* Inverted Filled */
  --btn-inverted-filled-bg: var(--white);
  --btn-inverted-filled-text: var(--kingfisher);
  --btn-inverted-filled-border: var(--white);
  --btn-inverted-filled-bg-hover: var(--kingfisher-0);
  --btn-inverted-filled-border-hover: var(--kingfisher-0);
  --btn-inverted-filled-bg-active: var(--kingfisher-1);
  --btn-inverted-filled-border-active: var(--kingfisher-1);

  /* Inverted Outlined */
  --btn-inverted-outlined-bg: transparent;
  --btn-inverted-outlined-text: var(--white);
  --btn-inverted-outlined-border: var(--white);
  --btn-inverted-outlined-bg-hover: var(--white);
  --btn-inverted-outlined-text-hover: var(--kingfisher);
  --btn-inverted-outlined-bg-active: var(--kingfisher-0);
  --btn-inverted-outlined-text-active: var(--kingfisher);
  --btn-inverted-outlined-border-active: var(--kingfisher-0);

  /* Inverted Simple */
  --btn-inverted-simple-bg: transparent;
  --btn-inverted-simple-text: var(--white);
  --btn-inverted-simple-border: transparent;
  --btn-inverted-simple-bg-hover: rgba(255, 255, 255, 0.15);
  --btn-inverted-simple-bg-active: rgba(255, 255, 255, 0.25);

  /* Negative Filled */
  --btn-negative-filled-bg: var(--red-0);
  --btn-negative-filled-text: var(--white);
  --btn-negative-filled-border: var(--red-0);
  --btn-negative-filled-bg-hover: var(--red-1);
  --btn-negative-filled-border-hover: var(--red-1);
  --btn-negative-filled-bg-active: var(--red-2);
  --btn-negative-filled-border-active: var(--red-2);

  /* Negative Outlined */
  --btn-negative-outlined-bg: transparent;
  --btn-negative-outlined-text: var(--red-0);
  --btn-negative-outlined-border: var(--red-0);
  --btn-negative-outlined-bg-hover: var(--red-0);
  --btn-negative-outlined-text-hover: var(--white);
  --btn-negative-outlined-bg-active: var(--red-1);
  --btn-negative-outlined-text-active: var(--white);
  --btn-negative-outlined-border-active: var(--red-1);

  /* Negative Simple */
  --btn-negative-simple-bg: transparent;
  --btn-negative-simple-text: var(--red-0);
  --btn-negative-simple-border: transparent;
  --btn-negative-simple-bg-hover: var(--red-light-0);
  --btn-negative-simple-border-hover: var(--red-light-0);
  --btn-negative-simple-bg-active: var(--red-light-1);
  --btn-negative-simple-border-active: var(--red-light-1);

  /* Button Disabled (black + alpha) */
  --btn-disabled-bg: rgba(16, 24, 32, 0.06);
  --btn-disabled-text: rgba(16, 24, 32, 0.38);
  --btn-disabled-border: transparent;

  /* Button Disabled — Inverted (white + alpha, for dark backgrounds) */
  --btn-inverted-disabled-bg: rgba(255, 255, 255, 0.12);
  --btn-inverted-disabled-text: rgba(255, 255, 255, 0.38);
  --btn-inverted-disabled-border: transparent;

  /* ── Badge Tokens ── */

  /* Alert */
  --badge-alert-none-text: var(--red-0);
  --badge-alert-light-bg: var(--red-light-0);
  --badge-alert-light-text: var(--red-0);
  --badge-alert-outline-bg: var(--white);
  --badge-alert-outline-text: var(--red-0);
  --badge-alert-outline-border: var(--red-0);
  --badge-alert-heavy-bg: var(--red-0);
  --badge-alert-heavy-text: var(--white);

  /* Good */
  --badge-good-none-text: var(--green-0);
  --badge-good-light-bg: var(--green-light-0);
  --badge-good-light-text: var(--green-0);
  --badge-good-outline-bg: var(--white);
  --badge-good-outline-text: var(--green-0);
  --badge-good-outline-border: var(--green-0);
  --badge-good-heavy-bg: var(--green-0);
  --badge-good-heavy-text: var(--white);

  /* Neutral */
  --badge-neutral-none-text: var(--stone-3);
  --badge-neutral-light-bg: var(--stone-0);
  --badge-neutral-light-text: var(--stone-3);
  --badge-neutral-outline-bg: var(--white);
  --badge-neutral-outline-text: var(--stone-3);
  --badge-neutral-outline-border: var(--stone-3);
  --badge-neutral-heavy-bg: var(--stone-3);
  --badge-neutral-heavy-text: var(--white);

  /* Brand */
  --badge-brand-none-text: var(--kingfisher);
  --badge-brand-light-bg: var(--kingfisher-0);
  --badge-brand-light-text: var(--kingfisher);
  --badge-brand-outline-bg: var(--white);
  --badge-brand-outline-text: var(--kingfisher);
  --badge-brand-outline-border: var(--kingfisher);
  --badge-brand-heavy-bg: var(--kingfisher);
  --badge-brand-heavy-text: var(--white);

  /* ── Form Icon Button Tokens ── */
  --form-icon-btn-text: var(--stone-3);
  --form-icon-btn-bg-hover: var(--kingfisher-0);
  --form-icon-btn-text-hover: var(--kingfisher);
  --form-icon-btn-ring-focus: var(--kingfisher);
  --form-icon-btn-bg-active: var(--kingfisher);
  --form-icon-btn-text-active: var(--white);
  --form-icon-btn-bg-disabled: rgba(16, 24, 32, 0.04);
  --form-icon-btn-text-disabled: rgba(16, 24, 32, 0.26);

  /* ── Toast Tokens ── */
  --toast-text: var(--stone-4);

  /* Light */
  --toast-light-bg: var(--stone-0);
  --toast-light-success-icon: var(--green-0);
  --toast-light-brand-icon: var(--kingfisher);
  --toast-light-error-icon: var(--red-0);
  --toast-light-success-text: var(--green-0);
  --toast-light-brand-text: var(--kingfisher);
  --toast-light-error-text: var(--red-0);

  /* Heavy */
  --toast-heavy-text: var(--white);
  --toast-heavy-success-bg: var(--green-0);
  --toast-heavy-brand-bg: var(--kingfisher);
  --toast-heavy-error-bg: var(--red-0);
  --toast-heavy-success-text-bg: var(--green-light-0);
  --toast-heavy-success-text-text: var(--green-0);
  --toast-heavy-brand-text-bg: var(--kingfisher-0);
  --toast-heavy-brand-text-text: var(--kingfisher);
  --toast-heavy-error-text-bg: var(--red-light-0);
  --toast-heavy-error-text-text: var(--red-0);

  /* ── Toggle Tokens ── */
  --toggle-track: var(--stone-1);
  --toggle-thumb: var(--kingfisher);
  --toggle-active-track: var(--kingfisher-3);
  --toggle-active-thumb: var(--white);
  --toggle-label: var(--stone-3);

  --toggle-negative-thumb: var(--red-0);
  --toggle-negative-active-track: var(--stone-1);
  --toggle-negative-active-thumb: var(--kingfisher);

  --toggle-inert-thumb: var(--stone-2);
  --toggle-inert-active-track: var(--stone-1);
  --toggle-inert-active-thumb: var(--kingfisher);

  --toggle-text-bg: var(--stone-1);
  --toggle-text-text: var(--stone-4);

  /* ── Form Field Tokens ── */
  --form-label-text: var(--black);
  --form-label-error: var(--red-0);
  --form-label-disabled: var(--stone-2);

  --form-input-bg: var(--white);
  --form-input-border: var(--stone);
  --form-input-text: var(--black);
  --form-input-placeholder: var(--stone-2);
  --form-input-border-hover: var(--stone-3);
  --form-input-border-focus: var(--kingfisher);
  --form-input-ring-focus: rgba(74, 73, 188, 0.1);
  --form-input-border-error: var(--red-0);
  --form-input-ring-error: rgba(187, 0, 18, 0.08);
  --form-input-bg-disabled: var(--stone-0);
  --form-input-border-disabled: var(--stone-1);
  --form-input-text-disabled: var(--stone-2);

  --form-icon-text: var(--stone-2);
  --form-icon-focus: var(--kingfisher);
  --form-icon-error: var(--red-0);

  --form-dropdown-border: var(--kingfisher);
  --form-dropdown-bg: var(--white);
  --form-dropdown-item-text: var(--black);
  --form-dropdown-item-border: var(--stone-0);
  --form-dropdown-item-bg-hover: var(--kingfisher-0);
  --form-dropdown-item-bg-active: var(--kingfisher);
  --form-dropdown-item-text-active: var(--white);
  --form-dropdown-item-bg-selected: var(--kingfisher);
  --form-dropdown-item-text-selected: var(--white);
  --form-dropdown-item-bg-selected-hover: var(--kingfisher-3);

  --form-supporting-text: var(--stone-3);
  --form-supporting-error: var(--red-0);
  --form-supporting-disabled: var(--stone-2);

  --form-validation-fail: var(--red-0);
  --form-validation-pass: var(--green-0);

  --form-charcount-text: var(--stone-2);
  --form-charcount-warn: var(--amber-0);
  --form-charcount-over: var(--red-0);

  /* ── Progress / Loader Tokens ── */
  --progress-track: var(--kingfisher-0);
  --progress-fill: var(--kingfisher);
  --progress-label: var(--stone-4);
}


/* ============================================================
   Buttons (Cyclades) — single source of truth (was inline per page).
   ============================================================ */

    /* Buttons (per Cyclades spec — pill, 2px border, semibold) */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--size-2);
      height: var(--size-8); /* 48px small */
      padding: 0 var(--size-5);
      border-radius: 999px;
      border: 2px solid transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    }

    .btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(74, 73, 188, 0.25);
    }

    .btn-primary-outlined {
      background: transparent;
      color: var(--kingfisher);
      border-color: var(--kingfisher);
    }
    .btn-primary-outlined:hover {
      background: var(--kingfisher);
      color: var(--white);
    }
    .btn-primary-outlined:active {
      background: var(--kingfisher-3);
      border-color: var(--kingfisher-3);
      color: var(--white);
    }

    .btn-primary-filled {
      background: var(--kingfisher);
      color: var(--white);
      border-color: var(--kingfisher);
    }
    .btn-primary-filled:hover {
      background: var(--kingfisher-3);
      border-color: var(--kingfisher-3);
    }
    .btn-primary-filled:active {
      background: var(--kingfisher-4);
      border-color: var(--kingfisher-4);
    }

    /* Inverted-outlined — white border + text over dark backgrounds */
    .btn-inverted-outlined {
      background: transparent;
      color: var(--white);
      border-color: var(--white);
    }
    .btn-inverted-outlined:hover {
      background: var(--white);
      color: var(--kingfisher);
    }
    .btn-inverted-outlined:active {
      background: var(--kingfisher-1);
      border-color: var(--kingfisher-1);
      color: var(--kingfisher);
    }
    .btn-inverted-outlined:focus-visible {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* Inverted-filled button — white on kingfisher backgrounds */
    .btn-inverted-filled {
      background: var(--white);
      color: var(--kingfisher);
      border-color: var(--white);
    }
    .btn-inverted-filled:hover {
      background: var(--kingfisher-0);
      border-color: var(--kingfisher-0);
    }
    .btn-inverted-filled:active {
      background: var(--kingfisher-1);
      border-color: var(--kingfisher-1);
    }
    .btn-inverted-filled:focus-visible {
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    /* Storybook .btn-icon pattern — icon-only square button. Pairs with .btn-sm
       (48px), .btn-md (56px), .btn-lg (72px). All buttons keep the pill radius.
       Source: Carefull design system CYCLADES.md §6 + storybook/styles.css. */
    .btn-icon { padding: 0; }
    .btn-icon.btn-sm { width: var(--size-8); }   /* 48px */
    .btn-icon.btn-md { width: var(--size-9); }   /* 56px */
    .btn-icon.btn-lg { width: var(--size-11); }  /* 72px */

    /* Storybook icon filter: tint black icon SVGs to --kingfisher in default
       state, swap to white on hover/active for outlined buttons or in filled
       buttons. Matches storybook/styles.css. */
    .btn img {
      filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(232deg) brightness(89%) contrast(91%);
      transition: filter 0.15s ease;
    }
    .btn-primary-outlined:hover img,
    .btn-primary-outlined:active img,
    .btn-primary-filled img,
    .btn-inverted-filled img,
    .btn-inverted-simple img,
    .btn-inverted-outlined img {
      filter: brightness(0) invert(1);
    }
    /* inverted-outlined flips to a white/light bg on hover/active, so its icon
       returns to kingfisher (mirrors the text color flip). */
    .btn-inverted-outlined:hover img,
    .btn-inverted-outlined:active img {
      filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(232deg) brightness(89%) contrast(91%);
    }
    /* btn-sm icon sizing — 24px icon with 2px padding inside the 48px button */
    .btn-sm img { width: var(--size-5); height: var(--size-5); padding: 2px; }
    /* Storybook button size modifiers — .btn default is sm (48px); md and lg
       step up. Matches CYCLADES.md §6 + storybook/styles.css. */
    .btn-md { height: var(--size-9); padding: 0 var(--size-4); font-size: 16px; }
    .btn-md img { width: var(--size-6); height: var(--size-6); padding: var(--size-1); }
    .btn-lg { height: var(--size-11); padding: 0 var(--size-5); font-size: 18px; }
    .btn-lg img { width: var(--size-6); height: var(--size-6); padding: var(--size-1); }


/* ============================================================
   Type scale (Cyclades) — single source of truth for the heading
   hierarchy. Per-page class overrides should NOT redeclare
   font-size; size is owned at the element level so swapping a
   heading's level changes its size everywhere automatically.
   ============================================================ */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  /* color is inherited — headings adopt the surrounding section's text
     color (white on dark heroes, stone-4 on stone-1 sections, etc.). */
}
h1 {
  /* Fluid: 40px at narrow viewports → 96px on wide screens. */
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h2 {
  /* Fluid: 32px floor → 56px on wide screens. */
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h3 {
  /* Fluid: 24px floor → 32px on wide screens. */
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 20px;
  line-height: 1.25;
}

/* ============================================================
   Badges (Cyclades) — mirrored from storybook/styles.css.
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 4px; font-family: inherit; font-weight: 600; border-radius: 8px; white-space: nowrap; line-height: 1; }
.badge svg { width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; padding: 2px; }
.badge-lg { height: var(--size-6); padding: 0 var(--size-3); font-size: 14px; }
.badge-sm { height: var(--size-5); padding: 0 var(--size-2); font-size: 12px; }