/* ==================================================
   1. MODERN CSS RESET
   ================================================== */

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

html, body {
  height: 100%;
  width: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  border: none;
  outline: none;
  background: none;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ==================================================
   2. DESIGN TOKENS (Converted from tokens.json)
   ================================================== */

:root {

  /* =========================
     COLORS
  ========================= */

  --color-deep-magenta: #B12A6B;
  --color-royal-mauve: #7B5EA7;
  --color-antique-gold: #C9A24D;
  --color-champagne-gold: #E6D3A3;

  --color-charcoal: #2C2C2C;
  --color-midnight-navy: #1F2430;
  --color-ivory-white: #FAF9F7;
  --color-soft-grey: #F1F1F3;
  --color-light-grey: #E2E2E6;
  --color-slate-grey: #6B6F76;

  --color-main-bg: var(--color-ivory-white);
  --color-surface: var(--color-soft-grey);

  --color-text-primary: var(--color-charcoal);
  --color-text-secondary: var(--color-slate-grey);

  --color-primary: var(--color-royal-mauve);
  --color-primary-accent: var(--color-deep-magenta);

  --color-divider: var(--color-light-grey);

  --color-pale-royal-mauve: #e7e0ff;


  /* =========================
     TYPOGRAPHY
  ========================= */

  --font-title: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  --font-size-h1-web: 48px;
  --font-size-h1-mobile: 34px;

  --font-size-h2-web: 36px;
  --font-size-h2-mobile: 26px;

  --font-size-h3-web: 28px;
  --font-size-h3-mobile: 22px;

  --font-size-h4-web: 22px;
  --font-size-h4-mobile: 18px;

  --font-size-body-web: 16px;
  --font-size-body-mobile: 15px;
  --font-size-body-sm: 12px;

  --font-size-nav-label: 14px;
  --font-size-caption-web: 10px;
  --font-size-caption-mobile: 12px;

  --font-size-btn-primary: 16px;
  --font-size-btn-secondary: 14px;

  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-800: 800;

  --letter-spacing-02: 0.2px;
  --letter-spacing-03: 0.3px;
  --letter-spacing-04: 0.4px;


  /* =========================
     SPACING
  ========================= */

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;


  /* =========================
     BORDER
  ========================= */

  --border-width-1: 1px;
  --border-width-2: 2px;

  --radius-xs: 2px;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;


  /* =========================
     ICON / SIZING
  ========================= */

  --icon-sm: 20px;
  --icon-md: 24px;

  --btn-icon-sm: 18px;
  --btn-icon-md: 20px;


  /* =========================
     OPACITY
  ========================= */

  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;


  /* =========================
     BREAKPOINTS
  ========================= */

  --breakpoint-tablet: 768px;
  --breakpoint-laptop: 1024px;
  --breakpoint-desktop: 1440px;
}


/* ==================================================
   3. GLOBAL BASE STYLES USING TOKENS
   ================================================== */

body {
  background: var(--color-main-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body-web);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--color-midnight-navy);
  font-weight: var(--font-weight-600);
}

.card {
  background: var(--color-surface);
  border: var(--border-width-1) solid var(--color-divider);
  border-radius: var(--radius-m);
}

.btn-primary {
  background: var(--color-primary);
  color: white;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-primary);
  font-weight: var(--font-weight-600);
}

.btn-primary:hover {
  background: var(--color-primary-accent);
}

.btn-secondary {
  background: var(--color-midnight-navy);
  color: var(--color-antique-gold) !important;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-secondary);
  font-weight: var(--font-weight-500);
}

.btn-secondary:hover {
  background: var(--color-royal-mauve);
}

.btn-default {
  background: var(--color-midnight-navy);
  color: var(--color-antique-gold) !important;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-secondary);
  font-weight: var(--font-weight-500);
}

.btn-default:hover {
  background: var(--color-charcoal);
}

.btn-outline-dark {
  background: var(--color-light-grey);
  color: var(--color-charcoal) !important;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-secondary);
  font-weight: var(--font-weight-500);
}

.btn-outline-dark:hover {
  background: var(--color-ivory-white);
}

.btn-deepmagenta {
  background: var(--color-deep-magenta);
  color: var(--color-light-grey) !important;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-secondary);
  font-weight: var(--font-weight-500);
}

.btn-deepmagenta:hover {
  background: var(--color-deep-magenta);
}

.btn-royalmauve {
  background: var(--color-royal-mauve);
  color: var(--color-light-grey) !important;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-size: var(--font-size-btn-secondary);
  font-weight: var(--font-weight-500);
}

.btn-royalmauve:hover {
  background: var(--color-royal-mauve);
}

.text-small {
  font-size: var(--font-size-body-sm);
}