/* ============================================================
   UOB design tokens — branch appointment booking
   Colour aliases: assets/iwov-resources/css/theme.css
   Fonts: assets/iwov-resources/css/en-font.css
   ============================================================ */
:root {
  /* Brand colours — aliased to theme.css */
  --uob-primary: var(--primary);
  --uob-primary-dark: var(--primary-dark);
  --uob-accent-blue: var(--primary-darker);
  --uob-hover-blue: var(--primary-light);

  /* Semantic colours */
  --uob-red: var(--asean-red);
  --uob-green: var(--green);
  --uob-orange: var(--custom-3);
  --uob-amber-soft: var(--element-warning-0);
  --uob-blue-soft: var(--custom-6);
  --uob-green-soft: var(--element-success-0);

  /* Neutral palette */
  --uob-black: var(--text-primary);
  --uob-grey-50: var(--black-6);
  --uob-grey-40: var(--gray-600);
  --uob-grey-30: var(--light-24);
  --uob-grey-20: var(--light-9);
  --uob-grey-10: var(--gray-100);
  --uob-white: var(--white);
  --uob-page-bg: var(--light-5);
  --uob-border: var(--light-9);

  /* Font faces — from en-font.css */
  --uob-font-regular: var(--font-primary);
  --uob-font-bold: var(--font-primary-bold);
  --uob-font-light: var(--font-primary-light);

  /* Heading scale — main.min.css .uob-h* */
  --uob-h1-size: 32px;
  --uob-h1-weight: 400;
  --uob-h2-size: 28px;
  --uob-h2-weight: 300;
  --uob-h2-lh: 1.36;
  --uob-h3-size: 20px;
  --uob-h3-weight: 400;
  --uob-h4-size: 16px;
  --uob-h4-weight: 500;
  --uob-h5-size: 16px;
  --uob-h5-weight: 400;
  --uob-h6-size: 14px;
  --uob-h6-weight: 700;
  --uob-h6-lh: 1.57;
  --uob-body-size: 14px;
  --uob-body-weight: 400;
  --uob-caption-size: 12px;

  /* Typography shorthand scale */
  --uob-font-xs: 12px;
  --uob-font-sm: 14px;
  --uob-font-base: 16px;
  --uob-font-md: 20px;
  --uob-font-lg: 24px;
  --uob-font-xl: 28px;

  /* Line heights */
  --uob-lh-tight: 1.2;
  --uob-lh-normal: 1.54;
  --uob-lh-relaxed: 1.75;
  --uob-lh-body: 1.57;

  /* Weights */
  --uob-fw-light: 300;
  --uob-fw-regular: 400;
  --uob-fw-medium: 500;
  --uob-fw-bold: 700;

  /* Computed colours (no exact theme.css token) */
  --rsvp-focus-ring: color-mix(in srgb, var(--primary) 15%, transparent);
  --rsvp-focus-ring-soft: color-mix(in srgb, var(--primary) 10%, transparent);
  --rsvp-focus-border: color-mix(in srgb, var(--primary) 18%, transparent);
  --rsvp-overlay-scrim: color-mix(
    in srgb,
    var(--text-primary) 45%,
    transparent
  );
  --rsvp-header-ghost-hover: color-mix(in srgb, var(--white) 12%, transparent);
  --rsvp-pulse-ring: color-mix(in srgb, var(--primary-light) 55%, transparent);
  --rsvp-footer-bg: color-mix(in srgb, var(--light-5) 35%, transparent);
  --rsvp-border-faint: color-mix(in srgb, var(--black) 8%, transparent);
  --rsvp-success-border: color-mix(in srgb, var(--green) 25%, transparent);

  /* Border radius */
  --uob-radius-sm: 4px;
  --uob-radius-md: 6px;
  --uob-radius-lg: 8px;
  --uob-radius-xl: 12px;
  --uob-radius-full: 9999px;

  /* Elevation */
  --uob-shadow-1: 0 1px 2px color-mix(in srgb, var(--black) 6%, transparent);
  --uob-shadow-2: 0 4px 8px color-mix(in srgb, var(--black) 10%, transparent);
  --uob-shadow-3: 0 8px 24px color-mix(in srgb, var(--black) 12%, transparent);

  /* Layout */
  --rsvp-content-width: 720px;
  --rsvp-page-pad-x: 24px;
  --rsvp-section-gap: 28px;
  --rsvp-card-pad: 24px;

  /* Motion */
  --uob-motion-fast: 0.15s;
  --uob-motion-base: 0.2s;
}

@media (min-width: 768px) {
  :root {
    --uob-h1-size: 48px;
    --uob-h2-size: 34px;
    --uob-h2-lh: 1.29;
    --uob-h3-size: 22px;
    --uob-h4-size: 18px;
    --uob-h5-size: 17px;
    --uob-h6-size: 15px;
  }
}

@media (min-width: 992px) {
  :root {
    --uob-h1-size: 54px;
    --uob-h2-size: 40px;
    --uob-h2-lh: 1.25;
    --uob-h3-size: 24px;
    --uob-h4-size: 20px;
    --uob-h5-size: 18px;
    --uob-h6-size: 16px;
    --uob-body-size: 15px;
    --uob-caption-size: 13px;
  }
}

@media (min-width: 1200px) {
  :root {
    --uob-body-size: 16px;
  }
}

/* ── RESET ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family:
    var(--font-primary),
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  font-size: var(--uob-body-size);
  font-weight: var(--uob-body-weight);
  line-height: var(--uob-lh-body);
  background: var(--white);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--uob-primary);
}
a:hover {
  color: var(--uob-primary-dark);
}

ul,
ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}