/* ==========================================================================
   Intergalva design tokens
   Single source of truth for colour, type and spacing.

   Two brand tiers. EGGA blue is the permanent Intergalva identity; year red is
   the current edition. Both are lifted from the client's own assets:
   IG-GENERAL.svg carries the blues, IG-27-Date.svg the gold-to-red ramp, and
   the seven homepage icons are drawn in #ae1e26.
   ========================================================================== */

@font-face {
	font-family: 'Interphases';
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/TTInterphasesRegular.woff') format('woff');
}
@font-face {
	font-family: 'Interphases';
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url('../fonts/TTInterphasesItalic.woff') format('woff');
}
@font-face {
	font-family: 'Interphases';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/TTInterphasesBold.woff') format('woff');
}
@font-face {
	font-family: 'Interphases';
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	src: url('../fonts/TTInterphasesBoldItalic.woff') format('woff');
}

:root {
	/* --- Palette ---------------------------------------------------------- */
	--egga-blue: #06364b;
	--egga-blue-mid: #0067b1;
	--ig-blue: #29abe2;
	/* Málaga motifs, from ATEG's exhibition scheme.
	   Sun: Costa del Sol. Red: earth and iron. Blue: the Alboran Sea.
	   Greys: the crystallised spangle of a galvanized surface.
	   sRGB values are derived from the artwork and need confirming against
	   ATEG's own specification before they are treated as brand colours. */
	--sand: #ece6e2;
	--sand-deep: #ded7d2;
	--galv-blue: #7e94a2;
	--galv-blue-deep: #5c7180;
	--spangle-light: #cfd3d6;
	--spangle-mid: #adb4b9;
	--iron-deep: #7d1a20;
	--iron-face: #9e1c24;

	/* Galvanized grain. Kept fine: at a facet-sized frequency it reads as
	   staining rather than texture. The gradient below carries the depth, the
	   grain only adds tooth. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

	--year-red: #ae1e26;
	--year-gold: #fcb823;

	--ink: #14191f;
	--ink-2: #46535f;
	--ink-3: #6f7d8a;
	--rule: #dfe5ea;
	--rule-soft: #edf1f4;
	--paper: #ffffff;
	--paper-2: #f6f8fa;

	/* --- Themed roles ----------------------------------------------------- */
	--heading: var(--egga-blue);
	--accent: var(--egga-blue-mid);

	/* The ink a light ground wants, kept addressable by name so a block that
	   lays its own light tile inside a dark band can ask for it back. Both
	   tiers set these, so the answer is right in red as well as blue. */
	--heading-on-light: var(--egga-blue);
	--accent-on-light: var(--egga-blue-mid);
	--accent-2: var(--ig-blue);
	--tint: #f1f8fc;
	--on-accent: #ffffff;

	/* Rules and accent bars. The event tier uses the mark's own blend, a
	   straight yellow into red, per the Intergalva 2027 brand sheet. */
	--brand-ramp: linear-gradient(90deg, var(--egga-blue-mid) 0%, var(--ig-blue) 100%);
	--surface-accent: linear-gradient(165deg, #075070 0%, #04222f 100%);

	/* --- Type scale, 320 to 1440 ------------------------------------------ */
	--step--3: clamp(0.625rem, 0.6rem + 0.11vw, 0.6875rem);
	--step--2: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
	--step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
	--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
	--step-2: clamp(1.3125rem, 1.19rem + 0.61vw, 1.625rem);
	--step-3: clamp(1.5rem, 1.25rem + 1.25vw, 2.125rem);
	--step-4: clamp(1.875rem, 1.42rem + 2.27vw, 3rem);
	--step-5: clamp(2.375rem, 1.66rem + 3.57vw, 4.125rem);
	--step-6: clamp(2.875rem, 1.78rem + 5.45vw, 5.5rem);

	/* --- Spacing scale ---------------------------------------------------- */
	--space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem);
	--space-2xs: clamp(0.5rem, 0.48rem + 0.11vw, 0.5625rem);
	--space-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.875rem);
	--space-s: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--space-m: clamp(1.5rem, 1.43rem + 0.36vw, 1.75rem);
	--space-l: clamp(2rem, 1.82rem + 0.91vw, 2.5rem);
	--space-xl: clamp(3rem, 2.55rem + 2.27vw, 4.25rem);
	--space-2xl: clamp(4rem, 3.09rem + 4.55vw, 6.5rem);
	--space-3xl: clamp(5.5rem, 3.86rem + 8.18vw, 10rem);

	/* --- Measure and layout ----------------------------------------------- */
	--gutter: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);
	--masthead-h: clamp(4.5rem, 3.7rem + 3.9vw, 6.75rem);
	--grid-gap: clamp(1rem, 0.7rem + 1.5vw, 2rem);
	--container: 78rem;
	--container-narrow: 46rem;
	--measure: 68ch;
	--radius: 4px;

	/* --- Motion ----------------------------------------------------------- */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-fast: 140ms;
	--dur-ui: 220ms;
	--dur-panel: 320ms;
}

/* The event tier. One attribute switches every themed role. */
[data-theme='event'] {
	--heading: var(--year-red);
	--accent: var(--year-red);
	--heading-on-light: var(--year-red);
	--accent-on-light: var(--year-red);
	--accent-2: var(--year-gold);
	--tint: #fdf6f2;
	--brand-ramp: linear-gradient(90deg, #fcb823 0%, #ae1e26 100%);
	/* The red planes in ATEG's artwork have a light face and a dark one. */
	--surface-accent: linear-gradient(165deg, #b32028 0%, #7d1a20 100%);

	/* The event tier drops the cool grey surface for ATEG's sand ground, so the
	   red palette sits on a warm neutral rather than a blue one. */
	--paper-2: var(--sand);
	--tint: #f7f0ec;
	--rule: #ded7d1;
	--rule-soft: #e8e1dc;
}

/* Path to ATEG's hero artwork. One line to repoint it. */
:root {
	--hero-art: url('../img/hero.png');
}

/* --------------------------------------------------------------------------
   Chassis surfaces. The block machinery reads these so accent and secondary
   text follow whichever ground a block sits on. Mapped onto the design's
   palette rather than left at the scaffold's black and white.
   -------------------------------------------------------------------------- */

.block--light {
	--block-bg: var(--paper);
	--block-fg: var(--ink);
	--block-heading: var(--heading);
	--block-muted: var(--ink-2);
}

.block--dark {
	--block-bg: var(--ink);
	--block-fg: rgba(255, 255, 255, 0.78);
	--block-heading: #ffffff;
	--block-muted: rgba(255, 255, 255, 0.62);
}