/**
 * Blackbird Labs — Design Tokens
 *
 * Fuente: Figma "Blackbird-labs", página "01 - Foundations" (node 27:170).
 * https://www.figma.com/design/CUSPuNFohSKJWnhRRtz7pz/Blackbird-labs?node-id=27-170
 *
 * Cualquier widget nuevo bajo wp-content/angie-snippets/{dev,prod}/snippet-<id>/
 * debe enqueuear este archivo (wp_enqueue_style) ANTES de su propio style.css,
 * y consumir estas variables en vez de hardcodear hex/px sueltos. Ver CLAUDE.md
 * ("Design tokens") para el patrón de enqueue y el checklist de la siguiente
 * sección.
 *
 * Naming: --bb-<categoria>-<slug-de-figma>. El slug de Figma va entre
 * paréntesis en el comentario de cada variable para poder mapear 1:1 contra
 * Foundations cuando se agreguen tokens nuevos.
 */

:root {
	/* ---- Color / Background (bg/*) ---- */
	--bb-color-bg-base: #000000;       /* bg/base */
	--bb-color-bg-elevated: #121212;   /* bg/elevated */
	--bb-color-bg-card: #222222;       /* bg/card */
	--bb-color-bg-card-dark: #252525;  /* bg/card-dark */
	--bb-color-bg-footer-gradient-end: #3F3F3F;

	/*
	 * bg-light: fondo de secciones claras (Portfolio > BUILD, node 190:877).
	 * No está nombrado como token en la página Foundations de Figma.
	 */
	--bb-color-bg-light: #C9C9C9;

	/* ---- Color / Accent (accent/*) ---- */
	--bb-color-accent-primary: #C7FFDF;   /* accent/primary */
	--bb-color-accent-on-accent: #000000; /* accent/on-accent (texto sobre fondo accent/primary) */
	/*
	 * accent/gradient-end: verde lima usado como segundo stop de gradiente junto a
	 * accent-primary (botón "Book a Call", texto destacado de FAQ, blobs decorativos
	 * del Hero). No está nombrado como token en la página Foundations de Figma —
	 * documentado aquí bajo un slug propio hasta que el equipo de diseño lo formalice.
	 */
	--bb-color-accent-gradient-end: #B2EA36;

	/*
	 * neutral-950: negro casi puro con matiz verde, usado como base del fondo
	 * de la Solutions Terminal (snippet-802). Viene del handoff
	 * Media/design_handoff_terminal_hero/Terminal Developer Hero.dc.html
	 * (var(--neutral-950)), no de la página Foundations de Figma.
	 */
	--bb-color-neutral-950: #040803;

	/* ---- Color / Text (text/*) ---- */
	--bb-color-text-primary: #FFFFFF;     /* text/primary */
	--bb-color-text-secondary: #D9D9D9;   /* text/secondary */
	--bb-color-text-muted: #AAAAAA;       /* text/muted */
	--bb-color-text-placeholder: #B6B6B6; /* text/placeholder */
	--bb-color-text-subtle: #6D6D6D;      /* text/subtle */
	--bb-color-text-dark: #252525;        /* text/dark (texto oscuro sobre fondos claros) */

	/*
	 * text-dark-secondary: copy secundario sobre fondos claros (párrafo bajo
	 * un H2 oscuro). No está nombrado como token en la página Foundations —
	 * documentado aquí bajo un slug propio (Social_Proof_Section, node 24:221).
	 */
	--bb-color-text-dark-secondary: #505050;

	/*
	 * text-dark-tertiary: heading-3 de tarjeta y quote sobre fondos claros
	 * (Portfolio > BUILD, node 468:2168). No está nombrado como token en la
	 * página Foundations de Figma.
	 */
	--bb-color-text-dark-tertiary: #3E3E3E;

	/* ---- Color / Border (border/*) ---- */
	--bb-color-border-default: #424355; /* border/default */
	--bb-color-border-subtle: #505050;  /* border/subtle */
	--bb-color-border-muted: #717171;   /* border/muted */
	--bb-color-border-accent: #C7FFDF;  /* border/accent */

	/*
	 * border-stat-card: borde de las tarjetas de estadística (Social_Proof_Section,
	 * node 24:223). No está nombrado como token en la página Foundations, y no
	 * coincide con border/default.
	 */
	--bb-color-border-stat-card: #243146;

	/* ---- Color / Surface (surface/*) ---- */
	--bb-color-surface-card-dark: #222222;  /* surface/card-dark */
	--bb-color-surface-card-light: #E0E0E0; /* surface/card-light */
	--bb-color-surface-accent: #C7FFDF;     /* surface/accent */

	/* ---- Typography / Font families ---- */
	--bb-font-display: 'Montserrat', sans-serif; /* headings, stats, CTAs */
	--bb-font-ui: 'Inter', sans-serif;           /* nav, botones, labels, FAQ */
	--bb-font-mono: 'Roboto Mono', monospace;    /* mockup tipo terminal únicamente */

	/* ---- Typography / Scale (Foundations: nombre → family/weight/size/line-height/letter-spacing) ---- */
	/* Display / H1 — Montserrat SemiBold 60px, LH 120%, LS 0 */
	--bb-font-display-h1-weight: 600;
	--bb-font-display-h1-size: clamp(60px, calc(42.74px + 1.264vw), 67px);
	--bb-font-display-h1-line-height: 1.2;
	--bb-font-display-h1-letter-spacing: 0;

	/* Display / Stat — Montserrat Bold 56px, LH auto, LS -1px */
	--bb-font-display-stat-weight: 700;
	--bb-font-display-stat-size: clamp(56px, calc(38.74px + 1.264vw), 63px);
	--bb-font-display-stat-line-height: normal;
	--bb-font-display-stat-letter-spacing: -1px;

	/* Heading / H2 — Montserrat SemiBold 40px, LH 120%, LS 0 */
	--bb-font-heading-h2-weight: 600;
	--bb-font-heading-h2-size: clamp(40px, calc(27.67px + 0.903vw), 45px);
	--bb-font-heading-h2-line-height: 1.2;
	--bb-font-heading-h2-letter-spacing: 0;

	/* Heading / H3 — Montserrat SemiBold 26px, LH auto, LS 0 */
	--bb-font-heading-h3-weight: 600;
	--bb-font-heading-h3-size: clamp(26px, calc(18.60px + 0.542vw), 29px);
	--bb-font-heading-h3-line-height: normal;
	--bb-font-heading-h3-letter-spacing: 0;

	/* Body / Large — Montserrat Regular 24px, LH 120%, LS 0 */
	--bb-font-body-large-weight: 400;
	--bb-font-body-large-size: clamp(24px, calc(16.60px + 0.542vw), 27px);
	--bb-font-body-large-line-height: 1.2;

	/* Body / Default — Montserrat Medium 19px, LH 120%, LS 0 */
	--bb-font-body-default-weight: 500;
	--bb-font-body-default-size: clamp(19px, calc(14.07px + 0.361vw), 21px);
	--bb-font-body-default-line-height: 1.2;

	/* Body / Small — Montserrat Regular 16px, LH 150%, LS 0 */
	--bb-font-body-small-weight: 400;
	--bb-font-body-small-size: clamp(16px, calc(11.07px + 0.361vw), 18px);
	--bb-font-body-small-line-height: 1.5;

	/* UI / Nav Link — Inter Medium 24px, LH auto, LS 0 */
	--bb-font-ui-nav-link-weight: 500;
	--bb-font-ui-nav-link-size: clamp(24px, calc(16.60px + 0.542vw), 27px);

	/* UI / Button — Inter SemiBold 19px, LH auto, LS 0 */
	--bb-font-ui-button-weight: 600;
	--bb-font-ui-button-size: clamp(19px, calc(14.07px + 0.361vw), 21px);

	/* Caption / Label — Inter Regular 12px, LH auto, LS +1px */
	--bb-font-caption-label-weight: 400;
	--bb-font-caption-label-size: clamp(12px, calc(9.53px + 0.181vw), 13px);
	--bb-font-caption-label-letter-spacing: 1px;

	/* Mono / Code — Roboto Mono Regular 16px, LH 150%, LS 0 */
	--bb-font-mono-code-weight: 400;
	--bb-font-mono-code-size: 16px;
	--bb-font-mono-code-line-height: 1.5;

	/* UI / FAQ Question */
	--bb-font-ui-faq-question-weight: 400;
	--bb-font-ui-faq-question-size: clamp(24px, calc(16.60px + 0.542vw), 27px);
	--bb-font-ui-faq-question-line-height: 1.5;

	/* ---- Spacing scale (Foundations "Spacing Scale") ---- */
	--bb-space-2xs: 4px;
	--bb-space-xs: 8px;
	--bb-space-sm: 12px;
	--bb-space-md: 16px;
	--bb-space-lg: 20px;
	--bb-space-xl: 24px;
	--bb-space-2xl: 32px;
	--bb-space-3xl: 48px;
	--bb-space-4xl: 64px;
	--bb-space-5xl: 96px;

	/* ---- Radius scale (Foundations "Border Radius") ---- */
	--bb-radius-sm: 6px;
	--bb-radius-md: 12px;
	--bb-radius-lg: 16px;
	--bb-radius-xl: 24px;
	--bb-radius-2xl: 32px;
	--bb-radius-pill: 999px;
}