/* =============================================================
   VISIA — Design Tokens  (ported from _ds/colors_and_type.css)
   Single physical source of truth. theme.json + tailwind.config.js
   both reference these CSS variables.
   Fonts are enqueued in PHP (inc/enqueue.php) — no @import here.
   ============================================================= */

/* Staatliches (display) — self-hosted (latin-ext) */
@font-face {
	font-family: 'Staatliches';
	src: url('../fonts/Staatliches-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/* Inter (body) — self-hosted variable font (latin-ext) */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/Inter.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
/* Instrument Serif (serif) — self-hosted */
@font-face {
	font-family: 'Instrument Serif';
	src: url('../fonts/InstrumentSerif-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Instrument Serif';
	src: url('../fonts/InstrumentSerif-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

:root {
	/* ---------- COLORS — PRIMÁRIAS ---------- */
	--c-pupila: #050404;
	--c-eye:    #fffaf8;
	--c-crea:   #ff6633;
	--c-chuva:  #bb09ff;
	/* ---------- COLORS — SECUNDÁRIAS ---------- */
	--c-sol:     #ffbc00;
	--c-cerebro: #f020d5;
	--c-tegy:    #4f06fe;

	/* ---------- SEMANTIC COLOR TOKENS ---------- */
	--fg:           var(--c-pupila);
	--fg-inverse:   var(--c-eye);
	--fg-muted:     color-mix(in oklab, var(--c-pupila) 60%, var(--c-eye));
	--fg-subtle:    color-mix(in oklab, var(--c-pupila) 30%, var(--c-eye));
	--bg:           var(--c-eye);
	--bg-inverse:   var(--c-pupila);
	--bg-tint:      color-mix(in oklab, var(--c-eye) 92%, var(--c-pupila));
	--accent:       var(--c-crea);
	--accent-2:     var(--c-chuva);
	--border:       var(--c-pupila);
	--border-thin:  color-mix(in oklab, var(--c-pupila) 18%, var(--c-eye));
	--focus-ring:   var(--c-cerebro);

	/* ---------- THEME (LIGHT default) — used by the prototype ---------- */
	--surface:    var(--c-eye);
	--surface-2:  #f4ece7;
	--ink:        var(--c-pupila);
	--ink-soft:   color-mix(in oklab, var(--c-pupila) 62%, var(--c-eye));
	--line:       var(--c-pupila);
	--line-soft:  color-mix(in oklab, var(--c-pupila) 16%, var(--c-eye));
	--glass:      color-mix(in oklab, var(--c-eye) 60%, transparent);
	--glass-line: color-mix(in oklab, var(--c-pupila) 14%, transparent);
	color-scheme: light;

	/* ---------- TYPOGRAPHY — FAMILIES ---------- */
	--font-display: 'Staatliches', sans-serif;
	--font-serif:   'Instrument Serif', 'Times New Roman', serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;

	/* ---------- TYPE SCALE — RAW ---------- */
	--t-display-3xl: clamp(120px, 18vw, 320px);
	--t-display-2xl: clamp(96px, 13vw, 220px);
	--t-display-xl:  clamp(72px, 9vw, 160px);
	--t-display-lg:  clamp(56px, 7vw, 120px);
	--t-display-md:  clamp(40px, 5vw, 84px);
	--t-display-sm:  clamp(28px, 3vw, 56px);
	--t-serif-xl:    clamp(56px, 7vw, 120px);
	--t-serif-lg:    clamp(40px, 4.5vw, 72px);
	--t-serif-md:    clamp(28px, 3vw, 48px);
	--t-serif-sm:    20px;
	--t-body-lg: 18px;
	--t-body:    16px;
	--t-body-sm: 14px;
	--t-caption: 12px;

	/* ---------- SEMANTIC TYPE — composed shorthands ---------- */
	--type-h1:       400 var(--t-display-2xl)/0.88 var(--font-display);
	--type-h2:       400 var(--t-display-xl)/0.9 var(--font-display);
	--type-h3:       400 var(--t-display-lg)/0.92 var(--font-display);
	--type-h4:       400 var(--t-display-md)/0.95 var(--font-display);
	--type-h5:       400 var(--t-display-sm)/1.0 var(--font-display);
	--type-display-hero: 400 var(--t-display-3xl)/0.85 var(--font-display);
	--type-serif-hero:  italic 400 var(--t-serif-xl)/0.95 var(--font-serif);
	--type-serif-lead:  italic 400 var(--t-serif-lg)/1.05 var(--font-serif);
	--type-serif-sub:   italic 400 var(--t-serif-md)/1.1  var(--font-serif);
	--type-tagline:     italic 400 var(--t-serif-sm)/1.3  var(--font-serif);
	--type-body:        400 var(--t-body)/1.5    var(--font-body);
	--type-body-lg:     400 var(--t-body-lg)/1.5 var(--font-body);
	--type-body-sm:     400 var(--t-body-sm)/1.5 var(--font-body);
	--type-label:       500 var(--t-body-sm)/1.2 var(--font-body);
	--type-eyebrow:     500 var(--t-caption)/1.2 var(--font-body);
	--type-footnote:    400 var(--t-caption)/1.4 var(--font-body);
	--type-cta:         400 22px/1 var(--font-display);

	/* ---------- TRACKING ---------- */
	--tracking-tight:   -0.02em;
	--tracking-normal:  0;
	--tracking-wide:    0.08em;
	--tracking-eyebrow: 0.18em;
	--tracking-footnote:0.32em;

	/* ---------- SPACING ---------- */
	--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
	--space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
	--space-24: 96px; --space-32: 128px;

	/* ---------- RADII ---------- */
	--radius-0: 0;
	--radius-input: 0;
	--radius-button: 0;
	--radius-avatar: 50%;

	/* ---------- BORDERS ---------- */
	--border-1: 1px solid var(--c-pupila);
	--border-2: 2px solid var(--c-pupila);

	/* ---------- MOTION ---------- */
	--ease-confident: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 180ms;
	--dur-base: 260ms;
	--dur-slow: 420ms;

	/* ---------- LAYOUT ---------- */
	--grid-thirds: repeat(3, minmax(0, 1fr));
	--grid-12: repeat(12, minmax(0, 1fr));
	--page-max: 1480px;
}

/* ---------- THEME (DARK) — flips semantic tokens under body.dark ---------- */
body.dark {
	--surface:    var(--c-pupila);
	--surface-2:  #141010;
	--ink:        var(--c-eye);
	--ink-soft:   color-mix(in oklab, var(--c-eye) 64%, var(--c-pupila));
	--line:       color-mix(in oklab, var(--c-eye) 22%, var(--c-pupila));
	--line-soft:  color-mix(in oklab, var(--c-eye) 12%, var(--c-pupila));
	--glass:      color-mix(in oklab, var(--c-pupila) 46%, transparent);
	--glass-line: color-mix(in oklab, var(--c-eye) 14%, transparent);
	color-scheme: dark;
}