/* Gdwyn AI — desys.css
   Single source of styling for imp-templates. See usage.md. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..800&display=swap');

/* 01 Tokens */
:root{
  --font-sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --mesh-a:oklch(0.58 0.11 45);--mesh-b:oklch(0.42 0.07 350);--mesh-c:oklch(0.36 0.05 320);--mesh-base:#7a4a42;
  --ink:#fbefe6;
  --space-1:8px;--space-2:14px;--space-tag:18px;--space-3:24px;--space-4:36px;--space-dock:44px;--space-5:56px;
  --gutter:30px;--page-max:480px;
  --radius-pill:999px;--radius-card:24px;
  --text-label:12px;--text-small:14px;--text-tagline:26px;--text-wordmark:72px;
  --weight-medium:500;--weight-semibold:600;--weight-bold:700;
  --track-tight:-.05em;--track-snug:-.025em;--track-label:.06em;
  --mark-unit:1.8px;
  --border-hair:1.5px;
}

/* 02 Themes — swap on <body>: app app--{theme} */
.app--rust-plum,.swatch--rust-plum{--mesh-a:oklch(0.58 0.11 45);--mesh-b:oklch(0.42 0.07 350);--mesh-c:oklch(0.36 0.05 320);--mesh-base:#7a4a42;--ink:#fbefe6}
.app--wine-blush,.swatch--wine-blush{--mesh-a:oklch(0.66 0.08 20);--mesh-b:oklch(0.4 0.08 5);--mesh-c:oklch(0.3 0.05 345);--mesh-base:#5e2f3a;--ink:#fcece8}
.app--ember-ink,.swatch--ember-ink{--mesh-a:oklch(0.62 0.12 48);--mesh-b:oklch(0.34 0.04 275);--mesh-c:oklch(0.26 0.03 265);--mesh-base:#2f2c3a;--ink:#f7ecdf}
.app--moss-copper,.swatch--moss-copper{--mesh-a:oklch(0.64 0.09 58);--mesh-b:oklch(0.42 0.05 128);--mesh-c:oklch(0.32 0.04 115);--mesh-base:#4b4a36;--ink:#f6efdc}
.app--cocoa-ochre,.swatch--cocoa-ochre{--mesh-a:oklch(0.72 0.1 75);--mesh-b:oklch(0.45 0.06 40);--mesh-c:oklch(0.34 0.04 30);--mesh-base:#6b4a38;--ink:#fcf1e2}

.app--paper-fizz,.swatch--paper-fizz{--paper:#faf6ef;--fizz:rgba(70,58,46,.05);--ink:oklch(0.3 0.02 60)}

/* 03 Base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
.app,.swatch{background:
  radial-gradient(circle at 20% 15%,var(--mesh-a) 0,transparent 55%),
  radial-gradient(circle at 85% 45%,var(--mesh-b) 0,transparent 55%),
  radial-gradient(circle at 30% 95%,var(--mesh-c) 0,transparent 60%),
  var(--mesh-base)}
.app{min-height:100dvh;background-attachment:fixed;font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased}
/* Paper theme: replaces mesh with paper + faint fizz bubbles */
.app--paper-fizz,.swatch--paper-fizz{background-color:var(--paper);background-image:
  radial-gradient(circle at 20% 30%,transparent 22px,var(--fizz) 22.5px 23.5px,transparent 24px),
  radial-gradient(circle at 70% 70%,transparent 9px,var(--fizz) 9.5px 10.5px,transparent 11px),
  radial-gradient(circle at 60% 20%,var(--fizz) 3px,transparent 3.5px);
  background-size:130px 130px,70px 70px,46px 46px}
.app a{color:inherit}
.app a:hover{opacity:.75}

/* 04 Layout */
.page{max-width:var(--page-max);min-height:100dvh;margin:0 auto;padding:0 var(--gutter);display:flex;flex-direction:column}
.topbar{min-height:var(--space-5);display:flex;align-items:center;justify-content:space-between}
.screen{flex:1;display:flex;flex-direction:column}
.dock{position:sticky;bottom:0;padding:var(--space-3) 0 calc(var(--space-dock) + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}

/* 05 Brand */
.brandmark{--u:var(--mark-unit);position:relative;flex:none;width:calc(44 * var(--u));height:calc(60 * var(--u));color:var(--ink)}
.brandmark--sm{--u:1px}
.brandmark__bowl,.brandmark__loop,.brandmark__ear{position:absolute;border-radius:50%}
.brandmark__bowl{left:calc(2 * var(--u));top:calc(6 * var(--u));width:calc(32 * var(--u));height:calc(32 * var(--u));background:currentColor}
.brandmark__loop{left:calc(6 * var(--u));top:calc(32 * var(--u));width:calc(28 * var(--u));height:calc(28 * var(--u));border:calc(3.5 * var(--u)) solid currentColor}
.brandmark__ear{left:calc(31 * var(--u));top:0;width:calc(11 * var(--u));height:calc(11 * var(--u));background:currentColor}
.wordmark{margin:0;font-weight:var(--weight-bold);font-size:var(--text-wordmark);line-height:.9;letter-spacing:var(--track-tight)}
.tagline{margin:var(--space-tag) 0 0;font-size:var(--text-tagline);font-weight:var(--weight-medium);letter-spacing:var(--track-snug);line-height:1.15}

/* 06 Components */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-5) 0;text-align:center}
.hero__title{display:flex;flex-direction:column;align-items:center}
.status{margin:0;font-size:var(--text-small);font-weight:var(--weight-medium)}
.pill{display:inline-flex;align-items:center;font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:var(--track-label);text-transform:uppercase;border:var(--border-hair) solid currentColor;padding:var(--space-1) var(--space-2);border-radius:var(--radius-pill)}

/* 07 Utilities */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 90 Specimens — design-system pages only, never in imp-templates */
.specimens{max-width:960px;margin:0 auto;padding:var(--space-5) var(--gutter);display:flex;flex-direction:column;gap:var(--space-4)}
.specimens__title{margin:0;font-size:40px;font-weight:var(--weight-bold);letter-spacing:var(--track-tight)}
.specimen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3);margin:0;padding:0;list-style:none}
.specimen{border-radius:var(--radius-card);padding:var(--space-3);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-3);color:var(--ink)}
.specimen__label{font-size:var(--text-label);font-weight:var(--weight-semibold);letter-spacing:var(--track-label);text-transform:uppercase;opacity:.85}
.swatch{border-radius:var(--radius-card)}