/*
 * BCC tokens bridge — maps the theme's legacy Pantone-named color slugs and
 * other ad-hoc design tokens onto the BCC design system tokens shipped in
 * `tokens.css` (vendored from @bcc-code/design-tokens).
 *
 * Why this file exists:
 *   - Existing post content uses Gutenberg classes like
 *     `has-pantone-rust-700-color` / `has-pantone-rust-100-background-color`.
 *     Re-declaring the corresponding CSS variables in terms of BCC tokens
 *     keeps that content working while shifting the visual identity to BCC.
 *   - The BCC system does not ship a static spacing scale (it uses Tailwind v4's
 *     `--spacing` calc base). For non-Tailwind theme SCSS we define a small
 *     `--space-*` scale aligned with the Tailwind defaults.
 *   - All choices below are documented in `THEME_TOKENS_PLAN` notes in
 *     copilot-instructions.md.
 *
 * Edit this file by hand (it is NOT auto-generated). Keep it short — anything
 * theme-specific that grows should move into the main SCSS sweep.
 */

:root {
  /* ──────────────────────────────────────────────────────────────────────────
   * Color aliases — legacy `pantone-*` slugs → BCC tokens.
   * Mapping is the closest semantic match (rust → brown, isbre → bcc-400, etc.)
   * See the table in copilot-instructions.md for the rationale.
   * ────────────────────────────────────────────────────────────────────────── */
  --pantone-3302-c: var(--color-brand-800);         /* mørk grønn  #014d49 */
  --pantone-7485-c: var(--color-brand-200);         /* lys grønn   #d2eeeb */
  --pantone-neutral-black: var(--color-neutral-1000); /* svart      #292a2e */
  --pantone-warm-grey-1-c: var(--color-neutral-300); /* varmgrå    #dddee1 */
  --pantone-sand-500: var(--color-brown-300);       /* sand 500    #d1c5b0 */
  --pantone-rust-700: var(--color-brown-700);       /* rust 700    #6e5232 */
  --pantone-rust-500: var(--color-brown-500);       /* rust 500    #a98c66 */
  --pantone-rust-100: var(--color-brown-200);       /* rust 100    #ece8dc */
  --pantone-isbre: var(--color-bcc-400);            /* isbre        #6fb5ad */
  --background-2: var(--color-neutral-100);         /*              #f8f8f8 */
  --color-white: var(--color-neutral-0);

  /* ──────────────────────────────────────────────────────────────────────────
   * Spacing scale (4px base, aligned with Tailwind v4 defaults used by BCC).
   * Use these in SCSS instead of hard-coded `px` / `rem` values.
   * ────────────────────────────────────────────────────────────────────────── */
  --space-2xs: 0.25rem;  /* 4px  */
  --space-xs:  0.5rem;   /* 8px  */
  --space-sm:  0.75rem;  /* 12px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2rem;     /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */

  /* ──────────────────────────────────────────────────────────────────────────
   * Typography aliases for the theme's existing usage.
   * Archivo is already the only font in use; this just makes it a token.
   * ────────────────────────────────────────────────────────────────────────── */
  --font-family-base: var(--font-family-archivo), system-ui, -apple-system, sans-serif;
}

/* ────────────────────────────────────────────────────────────────────────────
 * Gutenberg color-class re-bindings.
 *
 * Gutenberg generates classes like `.has-pantone-rust-700-color` and
 * `.has-pantone-rust-700-background-color` from the editor palette. Re-point
 * them at the BCC-mapped CSS variables so existing post content updates
 * automatically. New content uses the same slugs (see editor palette in
 * functions.php → bcc_forbund_editor_color_palette).
 * ──────────────────────────────────────────────────────────────────────────── */

.has-pantone-3302-c-color { color: var(--pantone-3302-c); }
.has-pantone-3302-c-background-color { background-color: var(--pantone-3302-c); }
.has-pantone-7485-c-color { color: var(--pantone-7485-c); }
.has-pantone-7485-c-background-color { background-color: var(--pantone-7485-c); }
.has-pantone-neutral-black-color { color: var(--pantone-neutral-black); }
.has-pantone-neutral-black-background-color { background-color: var(--pantone-neutral-black); }
.has-pantone-warm-grey-1-c-color { color: var(--pantone-warm-grey-1-c); }
.has-pantone-warm-grey-1-c-background-color { background-color: var(--pantone-warm-grey-1-c); }
.has-pantone-sand-500-color { color: var(--pantone-sand-500); }
.has-pantone-sand-500-background-color { background-color: var(--pantone-sand-500); }
.has-pantone-rust-700-color { color: var(--pantone-rust-700); }
.has-pantone-rust-700-background-color { background-color: var(--pantone-rust-700); }
.has-pantone-rust-500-color { color: var(--pantone-rust-500); }
.has-pantone-rust-500-background-color { background-color: var(--pantone-rust-500); }
.has-pantone-rust-100-color { color: var(--pantone-rust-100); }
.has-pantone-rust-100-background-color { background-color: var(--pantone-rust-100); }
.has-pantone-isbre-color { color: var(--pantone-isbre); }
.has-pantone-isbre-background-color { background-color: var(--pantone-isbre); }
.has-background-2-color { color: var(--background-2); }
.has-background-2-background-color { background-color: var(--background-2); }
.has-white-color { color: var(--color-white); }
.has-white-background-color { background-color: var(--color-white); }