/**
 * Dog Father Pro — Design Tokens + Font Face Declarations
 * All colors, typography, spacing, motion timing centralized here.
 */

/* Self-hosted fonts — latin + latin-ext subsets only (~235KB total) */
@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/bricolagegrotesque-latin.woff2?v=1.0.0') format('woff2');
	font-weight: 200 800;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-007F, U+00A0-00FF, U+0152-0153;
}

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('../fonts/bricolagegrotesque-latin-ext.woff2?v=1.0.0') format('woff2');
	font-weight: 200 800;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0100-024F, U+1E00-1EFF;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin.woff2?v=1.0.0') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0000-007F, U+00A0-00FF, U+0152-0153;
}

@font-face {
	font-family: 'Inter';
	src: url('../fonts/inter-latin-ext.woff2?v=1.0.0') format('woff2');
	font-weight: 100 900;
	font-display: swap;
	font-style: normal;
	unicode-range: U+0100-024F, U+1E00-1EFF;
}

:root {
	/* === Brand palette — refined dark + gold === */
	--df-bg:            #0A0A0B;      /* deep near-black */
	--df-bg-elevated:   #141416;      /* card surfaces */
	--df-bg-subtle:     #1C1C20;      /* subtle band */
	--df-bg-line:       #2A2A30;      /* hairlines */

	--df-fg:            #F5F5F7;      /* primary text on dark */
	--df-fg-muted:      #A1A1AA;      /* secondary text */
	--df-fg-faint:      #71717A;      /* tertiary text */

	--df-gold:          #FEC208;      /* signature brand gold */
	--df-gold-soft:     #FFE066;      /* lighter gold for gradients */
	--df-gold-deep:     #C99600;      /* darker gold for depth */
	--df-gold-glow:     rgba(254, 194, 8, 0.15);

	--df-accent:        #FF6B35;      /* warm accent */
	--df-success:       #4ADE80;
	--df-danger:        #F87171;

	/* === Typography === */
	--df-font-display:  'Bricolage Grotesque', system-ui, sans-serif;
	--df-font-body:     'Inter', system-ui, -apple-system, sans-serif;

	--df-fs-mega:    clamp(3rem, 8vw, 6.5rem);
	--df-fs-h1:      clamp(2.5rem, 6vw, 4.5rem);
	--df-fs-h2:      clamp(2rem, 5vw, 3.25rem);
	--df-fs-h3:      clamp(1.5rem, 3vw, 2.25rem);
	--df-fs-h4:      clamp(1.25rem, 2vw, 1.5rem);
	--df-fs-body:    clamp(1rem, 1.1vw, 1.125rem);
	--df-fs-small:   0.875rem;
	--df-fs-tiny:    0.75rem;

	--df-lh-tight:   1.05;
	--df-lh-snug:    1.2;
	--df-lh-normal:  1.6;
	--df-lh-loose:   1.75;

	--df-ls-tight:   -0.02em;
	--df-ls-normal:  0;
	--df-ls-wide:    0.04em;
	--df-ls-wider:   0.12em;

	/* === Spacing scale === */
	--df-sp-1:  0.25rem;
	--df-sp-2:  0.5rem;
	--df-sp-3:  0.75rem;
	--df-sp-4:  1rem;
	--df-sp-5:  1.5rem;
	--df-sp-6:  2rem;
	--df-sp-7:  3rem;
	--df-sp-8:  4rem;
	--df-sp-9:  6rem;
	--df-sp-10: 8rem;
	--df-sp-11: 12rem;

	/* === Layout === */
	--df-container:   1280px;
	--df-container-narrow: 880px;
	--df-gutter:      clamp(1rem, 4vw, 2.5rem);
	--df-radius-sm:   8px;
	--df-radius:      14px;
	--df-radius-lg:   24px;
	--df-radius-full: 999px;

	/* === Motion === */
	--df-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
	--df-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
	--df-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
	--df-ease-smooth:  cubic-bezier(0.4, 0, 0.1, 1);
	--df-dur-fast:     0.2s;
	--df-dur-base:     0.5s;
	--df-dur-slow:     0.8s;
	--df-dur-slower:   1.2s;

	/* === Effects === */
	--df-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.2);
	--df-shadow:       0 8px 32px rgba(0, 0, 0, 0.35);
	--df-shadow-lg:    0 20px 60px rgba(0, 0, 0, 0.5);
	--df-shadow-gold:  0 8px 40px rgba(254, 194, 8, 0.25);

	--df-blur-card:    blur(20px);

	--df-gold-gradient: linear-gradient(135deg, var(--df-gold-soft) 0%, var(--df-gold) 50%, var(--df-gold-deep) 100%);
}

/* Reduced-motion: clamp all transitions */
@media (prefers-reduced-motion: reduce) {
	:root {
		--df-dur-fast:    0.01ms;
		--df-dur-base:    0.01ms;
		--df-dur-slow:    0.01ms;
		--df-dur-slower:  0.01ms;
	}
}