/* ============================================================
   DEFUSION — Design Tokens
   tokens.css
   ============================================================ */

:root {

  /* ── COLOUR PALETTE ─────────────────────────────────────── */
  --c-black:       #1C1B19;   /* primary text, hero bg */
  --c-carbon:      #3A3835;   /* body text */
  --c-mid:         #C2BFB9;   /* muted text, borders hover */
  --c-light:       #EDEBE8;   /* borders, dividers */
  --c-offwhite:    #F7F6F4;   /* surface, section bg */
  --c-white:       #FFFFFF;   /* cards */
  --c-gold:        #C8A96E;   /* accent — CTAs, tags, highlights */
  --c-gold-dark:   #8B7355;   /* accent hover / dark accent */

  /* Semantic aliases */
  --bg-page:       var(--c-offwhite);
  --bg-dark:       var(--c-black);
  --bg-tinted:     #EEEBE6;
  --bg-card:       var(--c-white);
  --text-primary:  var(--c-black);
  --text-body:     var(--c-carbon);
  --text-muted:    #888880;
  --text-faint:    #5A5855;
  --border:        var(--c-light);
  --border-hover:  var(--c-mid);
  --accent:        var(--c-gold);
  --accent-hover:  var(--c-gold-dark);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', Georgia, serif;  /* headlines */
  --font-body:     'DM Sans', system-ui, sans-serif;      /* ui + body */

  --text-xs:    0.625rem;   /*  10px */
  --text-sm:    0.75rem;    /*  12px */
  --text-base:  0.8125rem;  /*  13px */
  --text-md:    0.9375rem;  /*  15px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.375rem;   /*  22px */
  --text-2xl:   1.75rem;    /*  28px */
  --text-3xl:   2.25rem;    /*  36px */
  --text-4xl:   3rem;       /*  48px */
  --text-hero:  clamp(2.5rem, 6vw, 4.5rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  --leading-tight:  1.1;
  --leading-snug:   1.35;
  --leading-body:   1.7;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;
  --tracking-hero:  -0.02em;

  /* ── SPACING ────────────────────────────────────────────── */
  --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 */
  --space-8:   3rem;      /* 48px */
  --space-10:  4rem;      /* 64px */
  --space-12:  5rem;      /* 80px */
  --space-16:  7.5rem;    /* 120px */

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --container:     1200px;
  --container-sm:  880px;
  --gutter:        clamp(1rem, 4vw, 3rem);

  /* ── BORDERS & RADII ────────────────────────────────────── */
  --radius-sm:  2px;    /* buttons, cards — almost square */
  --radius-md:  4px;
  --radius-lg:  8px;
  --radius-pill: 999px;
  --border-width: 0.5px;

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 500ms;

  /* ── SHADOWS (minimal — only for cards on light bg) ─────── */
  --shadow-card: 0 1px 3px rgba(28, 27, 25, 0.06);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-nav:     100;
  --z-overlay: 200;
  --z-modal:   300;

}