/* ==========================================================================
   00 — Design tokens
   Palette, fonts and shell metrics taken from live's :root / .dark blocks.
   Values are bare HSL triples so they can be used with alpha:
   hsl( var( --jn-primary ) / .2 ).
   ========================================================================== */

:root {
	/* Light palette — live's :root */
	--jn-background: 0 0% 98%;
	--jn-background-secondary: 0 0% 95%;
	--jn-foreground: 0 0% 8%;
	--jn-card: 0 0% 100%;
	--jn-card-foreground: 0 0% 8%;
	--jn-popover: 0 0% 100%;
	--jn-primary: 45 76% 50%;
	--jn-primary-foreground: 0 0% 100%;
	--jn-primary-muted: 45 76% 40%;
	--jn-secondary: 0 0% 90%;
	--jn-secondary-foreground: 0 0% 8%;
	--jn-muted: 0 0% 92%;
	--jn-muted-foreground: 0 0% 40%;
	--jn-accent: 45 76% 50%;
	--jn-destructive: 0 84.2% 60.2%;
	--jn-border: 0 0% 85%;
	--jn-input: 0 0% 95%;
	--jn-ring: 45 76% 50%;

	/* Gold as a *text* colour. The fill gold (--jn-primary) is far too light
	   to read on a near-white ground; this is the same hue taken dark enough
	   to clear AA. Dark mode has no such problem, so there it is the same
	   value as --jn-primary. */
	--jn-primary-text: 45 76% 28%;

	--jn-gradient-gold: linear-gradient( 135deg, #d4aa37 0%, #e8bd4b 50%, #d4aa37 100% );
	--jn-shadow-luxury: 0 20px 40px rgba( 212, 170, 55, .15 ), 0 8px 16px rgba( 0, 0, 0, .08 );
	--jn-shadow-card: 0 8px 32px rgba( 0, 0, 0, .08 ), 0 2px 8px rgba( 212, 170, 55, .1 );

	/* The utility bar and footer keep live's near-black in both themes. */
	--jn-luxury-dark: #0f0f0f;
	--jn-luxury-darker: #1c1c1c;
	--jn-navrow: #262626;

	/* Gold scale, lifted from live's Tailwind config. */
	--jn-gold-50: #fefdf2;
	--jn-gold-100: #fdf8d8;
	--jn-gold-200: #fbeea6;
	--jn-gold-300: #f8e074;
	--jn-gold-400: #f4d03f;
	--jn-gold-500: #e8bd4b;
	--jn-gold-600: #d4aa37;
	--jn-gold-700: #b8941f;
	--jn-gold-800: #9c7e19;

	/* Lucide circle-check-big, as a mask so it takes the current gold. */
	--jn-tick: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.801 10A10 10 0 1 1 17 3.335'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E" );

	/* Lucide chevron-down, masked so it takes the current colour. */
	--jn-chevron: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E" );

	/* Lucide chevron-right, for the breadcrumb separator. */
	--jn-chevron-right: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E" );

	--jn-radius: 1rem;
	--jn-radius-sm: .5rem;

	/* Shell metrics, measured off live: 1400px container, 16px gutter. */
	--jn-shell: 1400px;
	--jn-gutter: 1rem;

	/* Header rows: utility 52 + main 72 + nav 65 = 189, +1px border. */
	--jn-utilbar-h: 3.25rem;
	--jn-mainrow-h: 4.5rem;
	--jn-navrow-h: 4.0625rem;
	--jn-header-h: calc( var( --jn-utilbar-h ) + var( --jn-mainrow-h ) + var( --jn-navrow-h ) );

	--jn-adminbar: 0px;
	--jn-transition: all .3s cubic-bezier( .4, 0, .2, 1 );
}

/* Dark palette — live's .dark, and this theme's default. */
:root.dark {
	--jn-background: 0 0% 6%;
	--jn-background-secondary: 0 0% 11%;
	--jn-foreground: 0 0% 100%;
	--jn-card: 0 0% 8%;
	--jn-card-foreground: 0 0% 100%;
	--jn-popover: 0 0% 8%;
	--jn-primary: 45 76% 60%;
	--jn-primary-foreground: 0 0% 0%;
	--jn-primary-muted: 45 76% 40%;
	--jn-secondary: 0 0% 15%;
	--jn-secondary-foreground: 0 0% 100%;
	--jn-muted: 0 0% 15%;
	--jn-muted-foreground: 0 0% 60%;
	--jn-accent: 45 76% 60%;
	--jn-border: 0 0% 20%;
	--jn-input: 0 0% 15%;
	--jn-ring: 45 76% 60%;
	--jn-primary-text: 45 76% 60%;

	--jn-gradient-gold: linear-gradient( 135deg, #e8bd4b 0%, #f4d03f 50%, #e8bd4b 100% );
	--jn-shadow-luxury: 0 20px 40px rgba( 232, 189, 75, .15 ), 0 8px 16px rgba( 0, 0, 0, .4 );
	--jn-shadow-card: 0 8px 32px rgba( 0, 0, 0, .3 ), 0 2px 8px rgba( 232, 189, 75, .1 );
}

/* Admin bar height must be declared on :root as well as body — html is body's
   parent, so a body-only value never reaches scroll-padding-top. */
:root:has( body.admin-bar ) {
	--jn-adminbar: 32px;
}

body.admin-bar {
	--jn-adminbar: 32px;
}

@media screen and ( max-width: 782px ) {
	:root:has( body.admin-bar ) {
		--jn-adminbar: 46px;
	}

	body.admin-bar {
		--jn-adminbar: 46px;
	}
}

/* Every in-page anchor must clear the sticky header. */
html {
	scroll-padding-top: calc( var( --jn-header-h ) + var( --jn-adminbar ) + 1rem );
}