/* ==================== TOKENS ==================== */
  :root {
    /* Backgrounds */
    --bg: #FAF9FE;            /* very light lavender (page bg) */
    --bg-deep: #E8E4F8;       /* light lavender (section accents) */
    --paper: #FFFFFF;         /* card bg */

    /* Text / ink — Modernize deep purple */
    --ink: #352157;           /* primary text, deep brand purple */
    --ink-soft: #4A2E70;      /* slightly softer */
    --ink-mute: #6B5B8C;      /* muted purple-gray */
    --line: #352157;
    --line-soft: #D6D0E8;     /* lavender border */

    /* Primary accent — Modernize bright purple */
    --copper: #9315F6;        /* primary CTA / accent (was copper, now brand purple) */
    --copper-deep: #6B0FBA;   /* darker purple for hover/depth */
    --copper-soft: #E8DBFE;   /* light purple wash */

    /* Hero / dark sections — purple gradient */
    --purple-deep: #352157;
    --purple-mid: #5D399A;

    /* Secondary accents from brand palette */
    --mint: #C9FCB5;          /* primary mint accent */
    --mint-deep: #A4E68C;
    --teal: #00ADA9;
    --lavender: #B9B1E7;

    /* Status colors */
    --warning: #EE911A;
    --green: #7AC98F;
    --red: #D32F37;
    --sage: #7AC98F;

    --shadow-sm: 0 1px 2px rgba(53, 33, 87, 0.05);
    --shadow-md: 0 4px 16px rgba(53, 33, 87, 0.08), 0 1px 4px rgba(53, 33, 87, 0.04);
    --shadow-lg: 0 24px 48px rgba(53, 33, 87, 0.12), 0 4px 12px rgba(53, 33, 87, 0.06);
  }

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

  html, body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    background-image:
      radial-gradient(circle at 0% 0%, rgba(147, 21, 246, 0.04) 0%, transparent 50%),
      radial-gradient(circle at 100% 100%, rgba(0, 173, 169, 0.03) 0%, transparent 50%);
    min-height: 100vh;
  }