/**
 * @artsdatabanken/tokens — spacing, radius, and typography
 *
 * Spacing follows responsive breakpoints (matching _size.scss):
 *   default (mobile)  = compact  (base unit = 4px)
 *   ≥64em / 1024px   = comfortable
 *   ≥180em / 2880px  = spacious
 *
 * data-density attribute overrides breakpoint behaviour — useful for
 * Storybook, testing, or app-level density control.
 *
 * Breakpoints (matches $media-* Sass variables):
 *   sm   ≥30em  (~480px)
 *   md   ≥48em  (~768px)
 *   lg   ≥64em  (~1024px)  ← comfortable
 *   xl   ≥80em  (~1280px)
 *   2xl  ≥120em (~1920px)
 *   3xl  ≥180em (~2880px)  ← spacious
 *
 * Font sizes use rem so they respect the user's browser font size setting.
 * Base: 1rem = 16px (browser default).
 */

/* ── Font (density-independent) ────────────────────────────────────────── */
:root {
  --adb-font-family-primary:   "Chivo", system-ui, sans-serif;
  --adb-font-family-secondary: "Space Mono", ui-monospace, monospace;

  --adb-font-weight-regular:   400;
  --adb-font-weight-medium:    500;
  --adb-font-weight-bold:      700;

  --adb-font-size-base:        16px;
  --adb-font-size-small:       0.75rem; /* 12px */
  --adb-font-line-height:      1.55;
}

/* ── Border radius — layout scale (density-independent) ────────────────── */
:root {
  --adb-radius-none: 0px;
  --adb-radius-sm:   4px;
  --adb-radius-md:   8px;
  --adb-radius-lg:   16px;
  --adb-radius-xl:   32px;
  --adb-radius-2xl:  128px;
  --adb-radius-3xl:  360px;
}

/* ── Border radius — component scale (cards, inputs, badges, etc.) ──────── */
/* Smaller, softer radii for UI components — distinct from the pill/layout scale above */
:root {
  --adb-border-radius-xs: 3px;
  --adb-border-radius-sm: 5px;
  --adb-border-radius:    10px; /* default component radius */
  --adb-border-radius-lg: 15px;
  --adb-border-radius-xl: 20px;
}

/* ── Layout widths (density-independent) ────────────────────────────────── */
:root {
  --adb-max-content-width:   118rem;  /* 1888px */
  --adb-max-width:           120rem;  /* 1920px */
  --adb-content-width:        60rem;  /*  960px (928 + 16px padding × 2) */
  --adb-wide-hero-width:      78rem;  /* 1248px */
  --adb-landing-page-width:   80rem;  /* 1280px (1248 + 16px padding × 2) */
  --adb-sidebar-width:        28rem;  /*  448px */
  --adb-card-max-width:       24rem;  /*  384px */
}

/* ── Spacing + font-size: compact / mobile (default) ───────────────────── */
:root,
[data-density="compact"] {
  --adb-spacing-none:   0px;
  --adb-spacing-3xsm:   2px;
  --adb-spacing-2xsm:   4px;
  --adb-spacing-1-5sm:  6px;
  --adb-spacing-xsm:    8px;
  --adb-spacing-sm:    12px;
  --adb-spacing-md:    16px;
  --adb-spacing-lg:    24px;
  --adb-spacing-xl:    32px;
  --adb-spacing-2xl:   64px;

  --adb-font-size-1:   0.6875rem; /*  11px */
  --adb-font-size-2:   0.75rem;   /*  12px */
  --adb-font-size-3:   0.8125rem; /*  13px */
  --adb-font-size-4:   0.875rem;  /*  14px */
  --adb-font-size-5:   1rem;      /*  16px */
  --adb-font-size-6:   1.125rem;  /*  18px */
  --adb-font-size-7:   1.3125rem; /*  21px */
  --adb-font-size-8:   1.5rem;    /*  24px */
  --adb-font-size-9:   1.75rem;   /*  28px */
  --adb-font-size-10:  2rem;      /*  32px */
  --adb-font-size-11:  2.25rem;   /*  36px */
  --adb-font-size-12:  2.5rem;    /*  40px */
}

/* ── Spacing + font-size: comfortable (≥64em / 1024px) ─────────────────── */
@media (min-width: 64em) {
  :root:not([data-density="compact"]):not([data-density="spacious"]),
  [data-density="comfortable"] {
    --adb-spacing-sm:    16px;
    --adb-spacing-md:    20px;
    --adb-spacing-lg:    28px;
    --adb-spacing-xl:    40px;
    --adb-spacing-2xl:   80px;

    --adb-font-size-1:   0.75rem;   /*  12px */
    --adb-font-size-2:   0.8125rem; /*  13px */
    --adb-font-size-3:   0.875rem;  /*  14px */
    --adb-font-size-4:   1rem;      /*  16px */
    --adb-font-size-5:   1.125rem;  /*  18px */
    --adb-font-size-6:   1.25rem;   /*  20px */
    --adb-font-size-7:   1.375rem;  /*  22px */
    --adb-font-size-8:   1.625rem;  /*  26px */
    --adb-font-size-9:   2rem;      /*  32px */
    --adb-font-size-10:  2.25rem;   /*  36px */
    --adb-font-size-11:  2.5rem;    /*  40px */
    --adb-font-size-12:  3rem;      /*  48px */
  }
}

/* ── Spacing + font-size: spacious (≥180em / 2880px) ───────────────────── */
@media (min-width: 180em) {
  :root:not([data-density="compact"]):not([data-density="comfortable"]),
  [data-density="spacious"] {
    --adb-spacing-sm:    16px;
    --adb-spacing-md:    24px;
    --adb-spacing-lg:    32px;
    --adb-spacing-xl:    48px;
    --adb-spacing-2xl:  104px;

    --adb-font-size-1:   0.75rem;   /*  12px */
    --adb-font-size-2:   0.8125rem; /*  13px */
    --adb-font-size-3:   0.875rem;  /*  14px */
    --adb-font-size-4:   1rem;      /*  16px */
    --adb-font-size-5:   1.125rem;  /*  18px */
    --adb-font-size-6:   1.3125rem; /*  21px */
    --adb-font-size-7:   1.5rem;    /*  24px */
    --adb-font-size-8:   1.875rem;  /*  30px */
    --adb-font-size-9:   2.25rem;   /*  36px */
    --adb-font-size-10:  2.5rem;    /*  40px */
    --adb-font-size-11:  3rem;      /*  48px */
    --adb-font-size-12:  3.5rem;    /*  56px */
  }
}

