/*
  tokens.css -- the design tokens for this template. These are the
  defaults; to customize the site, override any variable in
  src/styles/theme.css rather than editing this file. Declarations in
  theme.css are unlayered, so they always beat these @layer base
  defaults -- no specificity tricks needed.

  Colors use light-dark(): the first value applies in light mode, the
  second in dark mode. Overriding a color with a plain value changes
  both modes at once; use light-dark(<light>, <dark>) in an override to
  keep them distinct.

  The palette is warm off-white and ink. Ink is the brand: --color-brand
  follows --color-text and fills the primary buttons. The amber
  --color-accent is for small marks only, such as the featured
  testimonial's quote mark. Large rounded panels ("sheets") give the
  page its structure: the sunken features panel is lit by
  --glow-daylight and the dark --color-night panels by --glow-dusk. Set
  a glow to none for a flat panel.

  --font-body (Inter) and --font-display (Instrument Serif, for
  headlines) are defined by the font pipeline in astro.config.mjs, not
  here. To swap a loaded webfont, edit its fonts entry there. To use a
  system font, or a different face for card titles and small headings,
  override --font-body / --font-heading in theme.css.
*/

@layer base {
	:root {
		color-scheme: light;

		/* Colors */
		--color-bg: #fafaf9; /* page canvas */
		--color-surface: #ffffff; /* cards, secondary buttons, menus */
		--color-sunken: #f2f1ee; /* features panel, icon tiles, toggles */
		--color-text: #141312;
		--color-text-secondary: #57534e; /* leads, nav and footer links */
		--color-muted: #78716c; /* the muted half of a headline, meta text */
		--color-border: rgb(20 19 18 / 0.08); /* card rings */
		--color-border-strong: rgb(20 19 18 / 0.16);
		--color-brand: var(--color-text);
		--color-brand-strong: color-mix(in srgb, var(--color-brand) 84%, var(--color-bg)); /* hover */
		--color-brand-soft: var(--color-text-secondary);
		--color-on-brand: #fafaf9; /* text and icons on brand surfaces */
		--color-brand-ring: color-mix(in srgb, var(--color-brand) 14%, transparent);
		--color-accent: #d97706;
		--color-accent-soft: color-mix(in srgb, var(--color-accent) 22%, transparent);
		--color-success: #22c55e;
		--color-warning: #f59e0b;
		--color-danger: #dc2626;

		/* Night panels: stats, a closing call to action, the highlighted plan */
		--color-night: #141312;
		--color-on-night: #f3f2ef;
		--color-on-night-muted: rgb(243 242 239 / 0.64);

		/* Frosted glass: the floating header and photo captions */
		--glass-bg: rgb(255 255 255 / 0.78);
		--chip-bg: rgb(250 250 249 / 0.78);
		--chip-text: #141312;

		/* Glows, layered over a panel's background color */
		--glow-daylight:
			radial-gradient(
				60% 70% at 100% 0%,
				rgb(255 205 150 / 0.5),
				transparent 70%
			),
			radial-gradient(
				40% 50% at 0% 100%,
				rgb(255 255 255 / 0.7),
				transparent 70%
			);
		--glow-dusk:
			radial-gradient(55% 90% at 88% 0%, rgb(255 166 87 / 0.24), transparent 65%),
			radial-gradient(45% 70% at 0% 100%, rgb(140 160 255 / 0.1), transparent 70%);

		/* Typography */
		--font-heading: var(--font-body); /* h1-h6, card titles */
		--font-weight-heading: 500;
		--font-weight-display: 400; /* serif headlines, set in --font-display */
		--font-size-display: clamp(54px, 8.4vw, 120px); /* hero headline */
		--font-size-h2: clamp(38px, 4.4vw, 60px); /* section headlines */

		/* Type scale */
		--font-size-xs: 0.75rem;
		--font-size-sm: 0.875rem;
		--font-size-base: 1rem;
		--font-size-lg: 1.125rem;
		--font-size-xl: 1.25rem;
		--font-size-2xl: 1.5rem;
		--font-size-3xl: 2rem;
		--font-size-4xl: 2.5rem;
		--font-size-5xl: 3.5rem;
		--font-size-6xl: 4.5rem;

		/* Line heights */
		--leading-tight: 0.95; /* hero headline */
		--leading-snug: 1.04; /* section headlines */
		--leading-normal: 1.6; /* body copy */
		--leading-relaxed: 1.7; /* long-form */

		/* Letter spacing */
		--tracking-tight: -0.03em; /* hero headline */
		--tracking-snug: -0.02em; /* serif headlines */

		/* Spacing */
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.5rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		--spacing-2xl: 3rem;
		--spacing-3xl: 4rem;
		--spacing-4xl: 6rem;
		--spacing-5xl: 8rem;

		/* Layout */
		--max-width: 720px; /* reading column */
		--wide-width: 1440px; /* content container */
		--gutter: 24px; /* container edge on narrow screens */
		--sheet-inset: clamp(8px, 1vw, 16px); /* viewport edge to sheet */
		--sheet-max: 1680px;
		--section-space: clamp(80px, 9vw, 128px); /* between two blocks */

		/* Radius */
		--radius-sm: 8px;
		--radius: 12px; /* icon tiles */
		--radius-lg: 18px;
		--radius-xl: 22px; /* cards */
		--radius-media: 28px; /* photos */
		--radius-sheet: clamp(20px, 2.2vw, 32px);
		--radius-full: 9999px; /* pills: buttons, chips, the header */

		/* Motion */
		--ease-out: cubic-bezier(0.2, 0, 0, 1);
		--transition-fast: 150ms var(--ease-out);
		--transition-base: 200ms var(--ease-out);
		--transition-slow: 300ms var(--ease-out);

		/* Shadows */
		--shadow-card:
			0 0 0 1px var(--color-border), 0 1px 2px rgb(20 19 18 / 0.04),
			0 10px 28px -12px rgb(20 19 18 / 0.12);
		--shadow-card-hover:
			0 0 0 1px var(--color-border-strong),
			0 2px 4px rgb(20 19 18 / 0.05),
			0 18px 40px -14px rgb(20 19 18 / 0.2);
		--shadow-glass:
			inset 0 0 0 1px rgb(255 255 255 / 0.7),
			0 0 0 1px var(--color-border),
			0 12px 32px -12px rgb(20 19 18 / 0.18);
		--shadow-sm: 0 1px 2px rgb(20 19 18 / 0.05);
		--shadow: var(--shadow-card);
		--shadow-lg: var(--shadow-card-hover);
		--shadow-xl:
			0 0 0 1px var(--color-border),
			0 24px 56px -16px rgb(20 19 18 / 0.24);
	}

	@media (max-width: 640px) {
		:root {
			--radius-media: 22px;
		}
	}
}