/* ============================================================
   OTA Playhouse — Design Tokens
   Source of truth: analysis/design-research/10-design-guide.md
   See also: .claude/skills/ota-playhouse-design/SKILL.md
   ============================================================ */

/* --------------- FONT FACES (self-hosted, PDPD-safe) --------------- */

@font-face {
	font-family: "Sugo Display";
	src: url("../fonts/Sugo-Pro-Display-Regular-trial.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sugo Display";
	src: url("../fonts/Sugo-Pro-Display-Bold-trial.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Agrandir";
	src: url("../fonts/Agrandir-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Agrandir";
	src: url("../fonts/Agrandir-Medium.otf") format("opentype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Agrandir";
	src: url("../fonts/Agrandir-Bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/Agrandir-GrandBold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Agrandir Grand";
	src: url("../fonts/Agrandir-GrandHeavy.otf") format("opentype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* --------------- TOKENS --------------- */

:root {
	/* Backgrounds / surfaces */
	--ota-bg:         #0A0A0A;
	--ota-surface:    #151515;
	--ota-surface-2:  #1E1E1E;
	--ota-overlay:    rgba(10, 10, 10, 0.85);

	/* Foregrounds */
	--ota-fg:         #F4F3F0;
	--ota-fg-muted:   #B5B2AA;
	--ota-fg-dim:     #6F6D68;

	/* Primary accent */
	--ota-accent:       #F61B48;
	--ota-accent-hover: #D01637;

	/* Secondary (brewery block ONLY) */
	--ota-accent-green:    #226E44;
	--ota-accent-yellow:   #FCB000;
	--ota-accent-deep-red: #8B192A;

	/* Short aliases — used by legacy mockup CSS */
	--ota-green:    #226E44;
	--ota-yellow:   #FCB000;
	--ota-deep-red: #8B192A;

	/* Structure */
	--ota-border:   rgba(244, 243, 240, 0.12);
	--ota-border-2: rgba(244, 243, 240, 0.24);

	/* Type */
	--font-display:  "Sugo Display", "Arial Black", sans-serif;
	--font-headline: "Agrandir Grand", "Helvetica Neue", Arial, sans-serif;
	--font-body:     "Agrandir", "Helvetica Neue", Arial, sans-serif;

	/* Spacing */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 72px;
	--s-9: 120px;

	/* Radii */
	--radius-sm:   12px;
	--radius-md:   16px;
	--radius-lg:   24px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-card: 0 2px 16px rgba(0, 0, 0, 0.4);
	--shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.55);

	/* Motion */
	--ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-fast:  150ms;
	--dur-med:   250ms;
	--dur-slow:  400ms;

	/* Layout */
	--wrap:      1440px;
	--pad-x:     24px;
}

@media (min-width: 768px)  { :root { --pad-x: 48px; } }
@media (min-width: 1024px) { :root { --pad-x: 80px; } }

/* --------------- BASE RESET (light — Bricks handles component styling) --------------- */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
	margin: 0;
	background: var(--ota-bg);
	color: var(--ota-fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s-5);
}

a { color: var(--ota-accent); text-decoration: none; }
a:hover { color: var(--ota-accent-hover); }
a:focus-visible { outline: 3px solid rgba(246, 27, 72, 0.45); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}