/* ==========================================================================
   BonziVan Design Tokens — rediseño premium F0
   One ground (paper), one ink, one accent (brand orange), one contrast field
   (night). Surfaces separate by a tone step (paper → paper-2), never a line
   or a shadow. The old token names further down map onto these roles so the
   WooCommerce / Dokan / My Account / plugin styles keep working.
   ========================================================================== */

/* Self-hosted Inter (SIL OFL 1.1, licence next to the files in assets/fonts/):
   one family for the whole site, headings included. */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter-Variable-latin-ext.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	/* ---- Roles (contrast measured against the ground named) ---- */
	--paper: #FFFFFF;
	--paper-2: #F4F3F0;        /* tone step for panels, cards, secondary buttons */
	--paper-3: #E8E6E1;        /* pressed / hover step on paper-2 */
	--ink: #121820;            /* 17.8:1 on paper, 16.1:1 on paper-2 */
	--ink-soft: #555D69;       /* secondary notes only: 6.7:1 on paper, 6.0:1 on paper-2 */
	--accent: #ED6A1A;         /* brand orange: the action, nothing else */
	--accent-hover: #F28A47;   /* ink on it 7.2:1 */
	--accent-ink: #A6450B;     /* orange as text, when it must be: 6.0:1 on paper, 5.4:1 on paper-2 */
	--on-accent: #121820;      /* ink on accent 5.67:1 — never white on #ED6A1A */
	--night: #121820;          /* contrast field (footer, proof, FAQ) */
	--on-night: #FFFFFF;
	--on-night-soft: #B8BDC4;  /* 9.4:1 on night */
	--field-line: #8E939B;     /* form-field edge, 3.1:1 on paper (WCAG 1.4.11) */
	--focus-ring: 2px solid var(--ink);
	--shadow-float: 0 12px 32px rgba(18, 24, 32, 0.16); /* real overlays only */

	/* ---- Type ---- */
	--font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-display: var(--font-ui); /* headings are Inter too: 700 for h1 and display, 600 for h2–h3 */

	--step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);     /* 13–14px */
	--step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);       /* 17–19px */
	--step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);         /* 20–26px */
	--step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);                /* 32–64px */
	--step-display: clamp(2.5rem, 3.6vw, 3.5rem);                  /* 40–56px */

	--tracking-display: -0.02em;
	--leading-display: 1.1;
	--leading-body: 1.55;
	--measure: 60ch;

	--header-h: 64px;

	/* ---- Legacy names → roles ---- */
	/* Brand */
	--color-primary: var(--accent);
	--color-primary-light: var(--accent-hover);
	--color-primary-dark: var(--accent-ink);
	--color-primary-10: var(--paper-2);
	--color-primary-20: var(--paper-3);

	/* Backgrounds: the cream grounds are gone; warm → neutral tone steps */
	--color-bg: var(--paper);
	--color-bg-warm: var(--paper-2);
	--color-bg-warm-mid: var(--paper-2);
	--color-bg-warm-deep: var(--paper-3);

	/* Dark */
	--color-dark: var(--night);
	--color-dark-soft: #1E2A38;

	/* Text */
	--color-text: var(--ink);
	--color-text-light: var(--ink-soft);
	--color-text-muted: var(--ink-soft);
	--color-text-inverse: var(--on-night);

	/* Borders: fields keep an edge; everything else separates by tone */
	--color-border: var(--field-line);
	--color-border-light: var(--paper-2);
	--color-border-focus: var(--ink);

	/* Status (text-safe on paper) */
	--color-success: #1F7A45;
	--color-warning: #9A5B00;
	--color-error: #B42318;
	--color-info: #1D5FA8;

	/* Typography */
	--font-primary: var(--font-ui);
	--font-heading: var(--font-display);

	--text-xs: var(--step-small);
	--text-sm: var(--step-small);
	--text-base: 1rem;           /* interface text: inputs, buttons, tables */
	--text-lg: var(--step-body);
	--text-xl: var(--step-lead);
	--text-2xl: var(--step-lead);
	--text-3xl: var(--step-head);
	--text-4xl: var(--step-display);
	--text-5xl: var(--step-head);

	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	/* Spacing */
	--space-xs: 0.25rem;   /* 4px */
	--space-sm: 0.5rem;    /* 8px */
	--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 */

	/* Layout */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1200px;
	--container-2xl: 1400px;

	/* Radius: pill for buttons and chips; rounded corners for photographs and
	   the cards that hold them (--radius-card), a larger one for wide banners,
	   ~10px for form fields; the small legacy steps for everything else. */
	--radius-card: 14px;
	--radius-banner: 20px;
	--radius-field: 10px;
	--radius-xs: 2px;
	--radius-sm: 4px;
	--radius-md: 4px;
	--radius-lg: 4px;
	--radius-xl: 4px;
	--radius-full: 9999px;

	/* Shadows: none at rest. Overlays use --shadow-float explicitly. */
	--shadow-sm: none;
	--shadow-md: none;
	--shadow-lg: none;
	--shadow-xl: none;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;

	/* Z-index scale */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 300;
	--z-modal: 400;
	--z-toast: 500;
}

@media (max-width: 768px) {
	:root { --header-h: 56px; }
}