/*
 * Design Tokens
 *
 * theme.json auto-generates --wp--preset--color--*, --wp--preset--font-family--*,
 * --wp--preset--font-size--*, --wp--preset--spacing--*, --wp--custom--border-radius--*.
 *
 * This file provides shorthand aliases for use in patterns and parts,
 * keeping markup readable without long --wp--preset-- chains.
 */

:root {
  /* ── Color aliases ── */
  --color-primary:      var(--wp--preset--color--primary);
  --color-primary-dark: var(--wp--preset--color--primary-dark);
  --color-accent:       var(--wp--preset--color--accent);
  --color-success:      var(--wp--preset--color--success);
  --color-dark:         var(--wp--preset--color--navy); /* alias — brand guide uses one navy */
  --color-navy:         var(--wp--preset--color--navy);
  --color-white:        var(--wp--preset--color--white);
  --color-text-body:    var(--wp--preset--color--text-body);
  --color-text-dark:    var(--wp--preset--color--text-dark);
  --color-border-light: var(--wp--preset--color--border-light);
  --color-divider:      var(--wp--preset--color--divider);

  /* ── Typography aliases ── */
  --font-heading: var(--wp--preset--font-family--heading);
  --font-body:    var(--wp--preset--font-family--body);

  /* ── Border radius aliases ── */
  --radius-sm:         var(--wp--custom--border-radius--sm);
  --radius-md:         var(--wp--custom--border-radius--md);
  --radius-lg:         var(--wp--custom--border-radius--lg);
  --radius-xl:         var(--wp--custom--border-radius--xl);
  --radius-2xl:        var(--wp--custom--border-radius--2xl);
  --radius-pill:       var(--wp--custom--border-radius--pill);
  --radius-section:    var(--wp--custom--border-radius--section);
  --radius-section-sm: var(--wp--custom--border-radius--section-sm);

  /* ── Spacing aliases (Figma: Johannes [size and spacing]) ── */
  --space-none: var(--wp--preset--spacing--none);       /* 0    */
  --space-4xs:  var(--wp--preset--spacing--4-xs);       /* 4px  */
  --space-3xs:  var(--wp--preset--spacing--3-xs);       /* 8px  - label gaps */
  --space-2xs:  var(--wp--preset--spacing--2-xs);       /* 12px - small gaps, paragraphs */
  --space-xs:   var(--wp--preset--spacing--xs);         /* 16px */
  --space-sm:   var(--wp--preset--spacing--sm);         /* 24px - medium gaps */
  --space-md:   var(--wp--preset--spacing--md);         /* 32px */
  --space-lg:   var(--wp--preset--spacing--lg);         /* 40px - large section gaps */
  --space-xl:   var(--wp--preset--spacing--xl);         /* 72px */
  --space-2xl:  var(--wp--preset--spacing--2-xl);       /* 120px */
  --space-3xl:  var(--wp--preset--spacing--3-xl);       /* 160px */

  /* Extras (not in Figma, kept from previous scale) */
  --space-48:   var(--wp--preset--spacing--48);         /* 48px */
  --space-64:   var(--wp--preset--spacing--64);         /* 64px */
  --space-80:   var(--wp--preset--spacing--80);         /* 80px */
  --space-100:  var(--wp--preset--spacing--100);        /* 100px - section inner padding */

  /* ── Font size aliases ── */
  --font-xs: var(--wp--preset--font-size--xs);   /* 13px */
  --font-sm: var(--wp--preset--font-size--sm);   /* 15px */
  --font-md: var(--wp--preset--font-size--md);   /* 17px */
  --font-lg: var(--wp--preset--font-size--lg);   /* 20px */
  --font-xl: var(--wp--preset--font-size--xl);   /* 24px */
  --font-2xl: var(--wp--preset--font-size--2-xl); /* 32px */
  --font-3xl: var(--wp--preset--font-size--3-xl); /* 44px */
  --font-4xl: var(--wp--preset--font-size--4-xl); /* 64px */

  /* ── Font weight tokens ── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Additional color aliases ── */
  --color-black:    var(--wp--preset--color--black);     /* #111111 */
  --color-grey-100: var(--wp--preset--color--grey-100);  /* #F7F7FA */
  --color-grey-200: var(--wp--preset--color--grey-200);  /* #EDEDF3 */
  --color-grey-300: var(--wp--preset--color--grey-300);  /* #D4D2E3 */
  --color-grey-500: var(--wp--preset--color--grey-500);  /* #9795B5 */
  --color-grey-700: var(--wp--preset--color--grey-700);  /* #6B6889 */
  --color-grey-900: var(--wp--preset--color--grey-900);  /* #2A2645 */

  /* ── Layout ── */
  --max-width: 1200px;
}

/* ── Responsive Spacing ── */
@media (max-width: 1024px) {
  :root {
    --space-3xl:  7.5rem;    /* 120px (was 160) */
    --space-2xl:  5rem;      /* 80px (was 120) */
    --space-100:  4rem;      /* 64px (was 100) */
    --space-xl:   3rem;      /* 48px (was 72) */
    --space-80:   3.75rem;   /* 60px (was 80) */
    --space-64:   3rem;      /* 48px (was 64) */
    --space-48:   2.5rem;    /* 40px (was 48) */
    --space-lg:   2rem;      /* 32px (was 40) */
    --space-md:   1.5rem;    /* 24px (was 32) */
  }
}

@media (max-width: 768px) {
  :root {
    --space-3xl:  5rem;      /* 80px (was 160) */
    --space-2xl:  3.75rem;   /* 60px (was 120) */
    --space-100:  3rem;      /* 48px (was 100) */
    --space-xl:   2.5rem;    /* 40px (was 72) */
    --space-80:   3rem;      /* 48px (was 80) */
    --space-64:   2.5rem;    /* 40px (was 64) */
    --space-48:   2rem;      /* 32px (was 48) */
    --space-lg:   1.5rem;    /* 24px (was 40) */
    --space-md:   1.25rem;   /* 20px (was 32) */
  }
}