/* Shared tokens. Five base colours per theme; derived semantic roles below.
   Change palettes here, never in individual page templates. */
:root, [data-theme="site"] {
  --primary-dark: #12372a;
  --primary-light: #d4dda5;
  --secondary-dark: #9a2c4b;
  --secondary-light: #f4b7cc;
  --neutral: #fff8e9;
}
[data-theme="pairwell"] {
  --primary-dark: #442719;
  --primary-light: #f3d9ad;
  --secondary-dark: #9e3517;
  --secondary-light: #ffbe91;
  --neutral: #fff5db;
}
[data-theme="knobelpause"] {
  --primary-dark: #252444;
  --primary-light: #d0d2f1;
  --secondary-dark: #30634d;
  --secondary-light: #bfe3ca;
  --neutral: #fff9e8;
}
[data-theme="varyanz"] {
  --primary-dark: #1b240c;
  --primary-light: #c5ff5c;
  --secondary-dark: #3f5b0b;
  --secondary-light: #a4ff00;
  --neutral: #f8ffe8;
}
[data-theme="gradygen"] {
  --primary-dark: #3c194f;
  --primary-light: #ffce72;
  --secondary-dark: #792354;
  --secondary-light: #f59bbd;
  --neutral: #fff1d9;
}
[data-theme="legal"] {
  --primary-dark: #17191f;
  --primary-light: #e7e9ef;
  --secondary-dark: #315eeb;
  --secondary-light: #ccd2dc;
  --neutral: #ffffff;
}
[data-theme="contact"] {
  --primary-dark: #163a59;
  --primary-light: #cae1f3;
  --secondary-dark: #8a4d12;
  --secondary-light: #ffd477;
  --neutral: #fff7e8;
}
:root {
  color-scheme: light;
  /* TYPE: approved local family; rem respects browser font settings. */
  --font-family: "Noto Sans", system-ui, sans-serif;
  --font-body: 1.125rem;
  --font-control: 1rem;
  --font-small: .875rem;
  --font-title: clamp(2rem, 5.5vw, 3.5rem);
  --font-heading: clamp(1.75rem, 4vw, 3rem);
  --font-wordmark: clamp(3rem, min(15vw, 12svh), 9rem);
  --font-front-title: clamp(2rem, min(5vw, 5.5svh), 4.5rem);
  --font-project-title: clamp(2rem, min(6vw, 7svh), 5.5rem);
  --font-section-title: clamp(1.75rem, min(4vw, 4.5svh), 3rem);
  --weight-body: 400;
  --weight-control: 600;
  --weight-heading: 700;
  --weight-display: 800;
  --weight-project: 750;
  --line-body: 1.65;
  --line-heading: 1.2;
  --font-subheading: 1.25rem;
  --font-document-title: clamp(2rem,4.5vw,3.5rem);
  --font-prose-heading: 1.5rem;
  --line-document-title: 1.12;
  --line-prose-heading: 1.3;
  --line-prose-subheading: 1.4;
  /* SPACING: only three primitives; larger sections use multiples. */
  --space-small: .5rem;
  --space-medium: 1rem;
  --space-large: 2rem;
  /* RADII: outer geometry and inset media frames follow parallel curves.
     For a different actual inset, subtract that inset from the parent radius.
     Compact standalone controls use the third radius; no pill navigation. */
  --radius-outer: clamp(2rem, 4vw, 3rem);
  --radius-control: .75rem;
  /* BUTTONS: minimum heights; wrapping/enlarged text may increase them. */
  --button-height-navigation: 2.5rem;
  --button-height-normal: 3rem;
  /* BORDER: one shared border; outlines remain independent focus indicators. */
  --border: 1px;
  /* LAYOUT: avoid additional spacing scales; keep navigation clear of content. */
  --width-content: 72rem;
  --width-prose: 70ch;
  --width-navigation: min(30rem,480px);
  /* Geometry clearance, updated from the actual bar height for enlarged text. */
  --navigation-clearance: calc(var(--button-height-navigation) + var(--space-large)*2 + env(safe-area-inset-bottom));
  --section-height: calc(100svh - var(--navigation-clearance) - var(--space-large));
  --section-gap: clamp(calc(var(--space-large)*6), 32svh, calc(var(--space-large)*10));
  --page-inset: clamp(calc(var(--space-medium)*1.5), 6vw, calc(var(--space-large)*3));
  --backdrop-shift: 0px;
  /* BACKDROP: five subdivisions per major cell; crosses share its origin. */
  --grid-step: calc(var(--space-large)*1.25);
  --grid-major: calc(var(--grid-step)*5);
  --grid-minor-color: color-mix(in srgb, var(--neutral) 4%, transparent);
  --grid-major-color: color-mix(in srgb, var(--neutral) 8%, transparent);
  --grid-cross-color: color-mix(in srgb, var(--neutral) 30%, transparent);
  --mobile-paper-bleed: calc(var(--space-large)*6);
  --paper-grain-strength: .018;
  --paper-shadow-quiet-strength: .12;
  --paper-shadow-middle-strength: .16;
  --paper-shadow-lift-strength: .28;
  --paper-curl-quiet-strength: .05;
  --paper-curl-middle-strength: .11;
  --paper-curl-lift-strength: .40;
  --paper-contact-strength: .22;
  --nav-accent: var(--secondary-light);
  --nav-surface: transparent;
  --nav-rim: color-mix(in srgb, var(--neutral) 22%, transparent);
  --slant-depth: clamp(.5rem, 2vw, 2rem);
  --section-offset: 0px;
  --shape-top-clearance: 0px;
  /* Shape-derived safe rectangle; updated per section by the outline renderer. */
  --panel-inset-top: calc(clamp(1rem,2.5svh,2rem) + var(--shape-top-clearance));
  --panel-inset-bottom: calc(clamp(1rem,2.5svh,2rem) + var(--slant-depth));
  --panel-inset-left: clamp(2rem,7vw,6rem);
  --panel-inset-right: clamp(2rem,7vw,6rem);
  /* SURFACE LIGHTING: shared intensities, with colours resolved per panel below. */
  --surface-center-strength: .12;
  --surface-edge-strength: .32;
  --surface-bevel-light-strength: .60;
  --surface-bevel-shade-strength: .28;
}

/* Front-page silhouettes have much deeper diagonal edges than reading pages. */
.front-page {
  --slant-depth: clamp(2rem, 10vw, 10rem);
  --shape-top-clearance: clamp(1rem, 4vw, 4rem);
}

/* Resolve derived colours where the palette is declared, so upcoming panels
   already have their own colours before the background theme changes. */
:root, .panel {
  --stroke-color: color-mix(in srgb, var(--primary-dark) 40%, transparent);
  --paper-shadow-color: color-mix(in srgb, var(--primary-dark) 35%, #000);
  --text-muted: color-mix(in srgb, var(--primary-dark) 92%, var(--neutral));
  --field-surface: color-mix(in srgb, var(--neutral) 88%, var(--primary-light));
  --field-border: color-mix(in srgb, var(--primary-dark) 28%, transparent);
  --shadow-media: 0 .4rem .75rem color-mix(in srgb, var(--primary-dark) 32%, transparent), 0 1.25rem 2rem color-mix(in srgb, color-mix(in srgb, var(--primary-dark) 50%, #000) 38%, transparent);
  --shadow-icon: 0 .3rem .4rem color-mix(in srgb,var(--primary-dark) 28%,transparent);
  --surface-light: var(--neutral);
  --surface-shade: var(--primary-dark);
}
/* COMPONENT SURFACES: semantic aliases, not additional palette colours. */
.panel {
  --panel-surface: var(--primary-light);
  --paper-underlay-color: var(--secondary-dark);
  --paper-underlay-light-color: color-mix(in srgb,var(--paper-underlay-color) 72%,#fff);
  --paper-underlay-shade-color: color-mix(in srgb,var(--paper-underlay-color) 82%,#000);
  --surface-center-color: color-mix(in srgb,var(--surface-shade) calc(var(--surface-center-strength)*100%),var(--panel-surface));
  --surface-edge-color: color-mix(in srgb,var(--surface-light) calc(var(--surface-edge-strength)*100%),var(--panel-surface));
}
/* Light foreground paper and a saturated secondary backing share one rule.
   Legal surfaces use neutral paper for quiet reading, with the same backing. */
.legal-links-panel, .document-panel { --panel-surface: var(--neutral); }
.document-panel {
  --paper-grain-strength: .012;
  --surface-center-strength: .025;
  --surface-edge-strength: .04;
  --surface-bevel-light-strength: .35;
  --surface-bevel-shade-strength: .16;
}
.floating-nav {
  --panel-surface: var(--nav-surface);
  --navigation-outline: inset(0 round var(--radius-control));
  --nav-text: var(--neutral);
  --nav-active-color: var(--nav-accent);
}
.nav-link[data-over-paper], :root:not(.shapes-ready) .reading-page~.floating-nav {
  --nav-text: var(--primary-dark);
  --nav-active-color: var(--secondary-dark);
}

/* Native fallback positions; the outline renderer supplies the actual corners. */
.panel-jump {
  --jump-x: 50%;
  --jump-y: var(--space-large);
  --jump-icon-x: 0px;
  --jump-icon-y: 0px;
  --jump-hover: -2px;
}
.panel-jump[data-section-jump="next"] {
  --jump-y: calc(100% - var(--space-large));
  --jump-hover: 2px;
}

/* Project actions share the rear paper colour and a restrained resting tilt. */
.project-link {
  --action-x: 0px;
  --action-y: 0px;
  --action-rotate-x: 0deg;
  --action-rotate-y: 0deg;
  --action-rotate-z: 0deg;
  --action-rest-angle: -1.3deg;
  --action-shadow: 0 .25rem .4rem color-mix(in srgb,var(--primary-dark) 20%,transparent);
  --action-pressed-shadow: inset 0 2px 3px color-mix(in srgb,var(--primary-dark) 32%,transparent);
}

@media screen and (max-height:760px) {
  :root {
    --section-gap: clamp(calc(var(--space-large)*4), 24svh, calc(var(--space-large)*6));
    --font-wordmark: clamp(3rem, min(15vw, 10svh), 7rem);
    --font-front-title: clamp(1.75rem, min(4.5vw, 4.8svh), 3rem);
    --font-project-title: clamp(1.75rem, min(5.5vw, 5.5svh), 3rem);
  }
}

/* Keep the wordmark proportional to the remaining space on very short desktops. */
@media screen and (min-width:801px) and (max-height:560px) {
  .studio-hero { --font-wordmark: clamp(2rem, 7svh, 3rem); }
}

/* Inset media radius follows the actual padding and the shared border width. */
.screenshot-frame { --radius-inner: max(0px,calc(var(--radius-control) - var(--space-small) - var(--border))); }
.showcase-stage .screenshot-frame { --radius-inner: max(0px,calc(var(--radius-control) - var(--space-small)/2 - var(--border))); }
@media (max-width:650px) { :root { --font-prose-heading: 1.375rem; } }