/*
 * Design tokens for the bfc theme.
 *
 * DO NOT EDIT BY HAND. This file is a copy of the Penpot tokens in
 * BrightFutureWebsite_v02 (sets: Colors, Typography, Spacing and sizing).
 * To change a value, change it in Penpot, then re-sync this whole file.
 * Last synced: 2026-10-04 (added color.amber.light and color.bg.reading).
 *
 * How names and units are made: planning/decisions/decisions_archive.md, Decision 006.
 *   - Penpot name color.text.default becomes --bfc-color-text-default.
 *   - Base tokens name values. Role tokens name jobs and point to a base token.
 *     Page CSS uses role tokens only.
 *   - rem for font sizes, spacing and sizing (px / 16); px for radius and borders.
 *
 * Added at sync, not stored in Penpot:
 *   - Fallback fonts after each family.
 *   - Font sizes from 24px up shrink on phones (Decision 013): each grows
 *     smoothly from its phone size at a 360px-wide window to its Penpot size
 *     at 1280px. Phone sizes: 3xl 40px, 2xl 32px, xl 28px, l 20px.
 */

:root {

	/* ==== Colours: base ==================================================== */

	--bfc-color-black: #000000;            /* Pure black. Main dark background. */
	--bfc-color-white: #ffffff;            /* Pure white. Main light background. */
	--bfc-color-neutral-darkest: #0d0d0d;  /* Softened black, text on light backgrounds. 19.4:1 on white. */
	--bfc-color-neutral-darker: #202020;   /* Near-black for small details, e.g. slider dots. */
	--bfc-color-neutral-dark: #404040;     /* Dark grey, e.g. form field borders. 10.4:1 on white. */
	--bfc-color-neutral-light: #c3c3c3;    /* Muted text on dark. 11.9:1 on black, 1.8:1 on white: never on light. */
	--bfc-color-neutral-lighter: #f5f5f5;  /* Softened white, text on dark backgrounds. 16.5:1 on black. */

	/* Gradient corners, measured from gradient_test_01 and _02 on Page 4.
	   Order: 1 top-left, 2 top-right, 3 bottom-left, 4 bottom-right. */
	--bfc-color-gradient-soft-1: #fdd7ff;  /* pink */
	--bfc-color-gradient-soft-2: #ebede3;  /* pale grey */
	--bfc-color-gradient-soft-3: #fbfeba;  /* yellow */
	--bfc-color-gradient-soft-4: #ab91ea;  /* violet */
	--bfc-color-gradient-vivid-1: #f2c976; /* amber */
	--bfc-color-gradient-vivid-2: #bbf593; /* green */
	--bfc-color-gradient-vivid-3: #f48880; /* coral */
	--bfc-color-gradient-vivid-4: #a372cd; /* purple */

	--bfc-color-amber-light: #f5d697;      /* Light amber between the frame gradient's ambers. 13.8:1 under text.default. */

	/* ==== Colours: roles =================================================== */

	--bfc-color-bg-default: var(--bfc-color-white);                     /* Main page background. */
	--bfc-color-bg-inverse: var(--bfc-color-black);                     /* The opposite background, for contrasting sections. */
	--bfc-color-text-default: var(--bfc-color-neutral-darkest);         /* Text on bg.default. */
	--bfc-color-text-muted: var(--bfc-color-neutral-dark);              /* Quieter text on bg.default. 10.4:1 on white. */
	--bfc-color-text-inverse-default: var(--bfc-color-neutral-lighter); /* Text on bg.inverse. */
	--bfc-color-text-inverse-muted: var(--bfc-color-neutral-light);     /* Quieter text on bg.inverse. Never on bg.default. */
	--bfc-color-border-default: var(--bfc-color-neutral-dark);          /* Form field borders and dividers. */
	--bfc-color-bg-reading: var(--bfc-color-amber-light);              /* A calm ground for text on the vivid gradient, e.g. behind the home pillars. */

	/* ==== Typography: base ================================================= */

	--bfc-font-family-primary: "Montserrat", system-ui, sans-serif;     /* Body text, subheadings, buttons. */
	--bfc-font-family-display: "Bebas Neue", Impact, sans-serif;        /* Large headings only. All caps by design. */

	--bfc-font-size-2xs: 0.875rem;  /* 14px */
	--bfc-font-size-xs: 1rem;       /* 16px */
	--bfc-font-size-s: 1.125rem;    /* 18px */
	--bfc-font-size-m: 1.25rem;     /* 20px */
	--bfc-font-size-l: clamp(1.25rem, 1.1522rem + 0.4348vw, 1.5rem);  /* 20px phone, 24px desktop */
	--bfc-font-size-xl: clamp(1.75rem, 1.5543rem + 0.8696vw, 2.25rem); /* 28px phone, 36px desktop */
	--bfc-font-size-2xl: clamp(2rem, 1.6087rem + 1.7391vw, 3rem);      /* 32px phone, 48px desktop */
	--bfc-font-size-3xl: clamp(2.5rem, 1.7174rem + 3.4783vw, 4.5rem);  /* 40px phone, 72px desktop */

	--bfc-font-weight-regular: 400;
	--bfc-font-weight-semibold: 600;
	--bfc-font-weight-extrabold: 800;
	--bfc-font-weight-black: 900;

	--bfc-font-leading-tight: 1;     /* Large display text. */
	--bfc-font-leading-snug: 1.25;   /* Headings and short labels. */
	--bfc-font-leading-normal: 1.5;  /* Running text. */

	/* ==== Typography: roles ================================================ */
	/* One variable per property (Decision 006). */

	/* text.display: largest heading, e.g. "Some of our projects". */
	--bfc-text-display-family: var(--bfc-font-family-display);
	--bfc-text-display-size: var(--bfc-font-size-3xl);
	--bfc-text-display-weight: var(--bfc-font-weight-regular);
	--bfc-text-display-line-height: var(--bfc-font-leading-tight);
	--bfc-text-display-letter-spacing: 0em;

	/* text.heading.1: section heading, e.g. "Credits". */
	--bfc-text-heading-1-family: var(--bfc-font-family-display);
	--bfc-text-heading-1-size: var(--bfc-font-size-2xl);
	--bfc-text-heading-1-weight: var(--bfc-font-weight-regular);
	--bfc-text-heading-1-line-height: var(--bfc-font-leading-tight);
	--bfc-text-heading-1-letter-spacing: 0em;

	/* text.heading.2: sub-section heading, e.g. "Installative". */
	--bfc-text-heading-2-family: var(--bfc-font-family-display);
	--bfc-text-heading-2-size: var(--bfc-font-size-xl);
	--bfc-text-heading-2-weight: var(--bfc-font-weight-regular);
	--bfc-text-heading-2-line-height: var(--bfc-font-leading-tight);
	--bfc-text-heading-2-letter-spacing: 0em;

	/* text.heading.3: small heading in Montserrat, e.g. project titles. */
	--bfc-text-heading-3-family: var(--bfc-font-family-primary);
	--bfc-text-heading-3-size: var(--bfc-font-size-l);
	--bfc-text-heading-3-weight: var(--bfc-font-weight-semibold);
	--bfc-text-heading-3-line-height: var(--bfc-font-leading-snug);
	--bfc-text-heading-3-letter-spacing: 0em;

	/* text.body.default: running text. */
	--bfc-text-body-default-family: var(--bfc-font-family-primary);
	--bfc-text-body-default-size: var(--bfc-font-size-m);
	--bfc-text-body-default-weight: var(--bfc-font-weight-regular);
	--bfc-text-body-default-line-height: var(--bfc-font-leading-normal);
	--bfc-text-body-default-letter-spacing: 0em;

	/* text.body.small: secondary text, excerpts, reviews. */
	--bfc-text-body-small-family: var(--bfc-font-family-primary);
	--bfc-text-body-small-size: var(--bfc-font-size-s);
	--bfc-text-body-small-weight: var(--bfc-font-weight-regular);
	--bfc-text-body-small-line-height: var(--bfc-font-leading-normal);
	--bfc-text-body-small-letter-spacing: 0em;

	/* text.caption: smallest text, footer, legal, credits lines. */
	--bfc-text-caption-family: var(--bfc-font-family-primary);
	--bfc-text-caption-size: var(--bfc-font-size-2xs);
	--bfc-text-caption-weight: var(--bfc-font-weight-regular);
	--bfc-text-caption-line-height: var(--bfc-font-leading-normal);
	--bfc-text-caption-letter-spacing: 0em;

	/* text.label.default: buttons and menu items. */
	--bfc-text-label-default-family: var(--bfc-font-family-primary);
	--bfc-text-label-default-size: var(--bfc-font-size-s);
	--bfc-text-label-default-weight: var(--bfc-font-weight-regular);
	--bfc-text-label-default-line-height: var(--bfc-font-leading-snug);
	--bfc-text-label-default-letter-spacing: 0em;
	--bfc-text-label-default-text-transform: capitalize;

	/* text.label.strong: prominent short labels, e.g. Instagram, Email, Phone. */
	--bfc-text-label-strong-family: var(--bfc-font-family-primary);
	--bfc-text-label-strong-size: var(--bfc-font-size-s);
	--bfc-text-label-strong-weight: var(--bfc-font-weight-black);
	--bfc-text-label-strong-line-height: var(--bfc-font-leading-snug);
	--bfc-text-label-strong-letter-spacing: 0em;

	/* text.emphasis: stressed text at body size, e.g. credit names. */
	--bfc-text-emphasis-family: var(--bfc-font-family-primary);
	--bfc-text-emphasis-size: var(--bfc-font-size-m);
	--bfc-text-emphasis-weight: var(--bfc-font-weight-extrabold);
	--bfc-text-emphasis-line-height: var(--bfc-font-leading-normal);
	--bfc-text-emphasis-letter-spacing: 0em;

	/* text.callout: short, loud line, e.g. the "SAVE THE DATE" bar. */
	--bfc-text-callout-family: var(--bfc-font-family-primary);
	--bfc-text-callout-size: var(--bfc-font-size-l);
	--bfc-text-callout-weight: var(--bfc-font-weight-black);
	--bfc-text-callout-line-height: var(--bfc-font-leading-snug);
	--bfc-text-callout-letter-spacing: 0em;

	/* ==== Spacing and sizing: base ========================================= */

	--bfc-space-2xs: 0.5rem;   /* 8px */
	--bfc-space-xs: 0.75rem;   /* 12px */
	--bfc-space-s: 1rem;       /* 16px */
	--bfc-space-m: 1.25rem;    /* 20px */
	--bfc-space-l: 1.5rem;     /* 24px */
	--bfc-space-xl: 2rem;      /* 32px */
	--bfc-space-2xl: 3rem;     /* 48px */
	--bfc-space-3xl: 4rem;     /* 64px */
	--bfc-space-4xl: 5rem;     /* 80px */

	--bfc-radius-none: 0px;    /* Square corners, the design default. */
	--bfc-radius-s: 4px;
	--bfc-radius-m: 8px;
	--bfc-radius-full: 9999px; /* Pill or circle. */

	--bfc-border-width-thin: 1px;   /* Default border and divider width. */
	--bfc-border-width-thick: 2px;  /* Emphasised borders. */

	--bfc-size-content: 80rem; /* 1280px. Maximum content width. */

	/* ==== Spacing: roles =================================================== */

	--bfc-space-section-y: var(--bfc-space-3xl);     /* Top and bottom padding of a page section. */
	--bfc-space-gutter: var(--bfc-space-s);          /* Minimum side padding on small screens. */
	--bfc-space-gap-block: var(--bfc-space-2xl);     /* Between big blocks inside a section. */
	--bfc-space-gap-group: var(--bfc-space-xl);      /* Between groups, e.g. footer link groups. */
	--bfc-space-gap-content: var(--bfc-space-m);     /* Between content items. The most common gap. */
	--bfc-space-gap-grid: var(--bfc-space-s);        /* Between items in a grid: gallery, project cards. */
	--bfc-space-gap-related: var(--bfc-space-xs);    /* Between closely related bits: icon and label. */
	--bfc-space-control-y: var(--bfc-space-xs);      /* Top and bottom padding of buttons and fields. */
	--bfc-space-control-x: var(--bfc-space-m);       /* Side padding of buttons and fields. */
}