/* Parchment / wax-seal design tokens, pulled from the Claude Design "Adventurers Guild wireframe" project's design system (tokens/colors.css, typography.css, spacing.css, shape.css, elevation.css, motion.css). These are the site-wide tokens (site.css consumes them for the shared chrome and the server-page components). head.php loads this file before site.css on every page. The .ag-parchment-scoped primitives further down keep that scope; head.php defaults so they resolve everywhere. */ :root{ /* --- Parchment surfaces --- */ --parchment-50:#FDF8EC;--parchment-100:#F7F0DC;--parchment-200:#EFE4C0; --parchment-300:#E3D3A8;--parchment-400:#C9B46A; /* --- Ink (text/hairlines) --- */ --ink-900:#1C1A14;--ink-700:#3B3628;--ink-500:#6B6047;--ink-400:#8B7F5E;--ink-300:#B0A070; /* --- Gold (insignia only — labels, rules, glyphs, never a large fill) --- */ --gold-700:#8B6508;--gold-600:#B8860B;--gold-500:#D4A017;--gold-300:#E8CC80;--gold-200:#F5E6C0; /* --- Seal (heraldic red-brown — the primary action colour) --- */ --seal-700:#7A2415;--seal-600:#A6321F;--seal-500:#C4513A;--seal-300:#E4A392;--seal-100:#F7E0DB; /* --- Night (hero band only) --- */ --night-900:#17130D;--night-800:#221E16;--night-700:#2E271B; /* --- Semantic aliases --- */ --surface-page:var(--parchment-50); --surface-card:#FFFDF6; --surface-raised:var(--parchment-100); --surface-sunken:var(--parchment-200); --surface-inset:rgba(255,255,255,0.55); --surface-dark:var(--night-900); --surface-dark-card:var(--night-800); --surface-gold-quiet:rgba(184,134,11,0.08); --surface-accent-quiet:var(--seal-100); --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500); /* --text-faint is for LARGE or decorative text only — never below 24px, and never on --surface-inset or --surface-sunken, where it drops to 3.12:1. It used to point at --ink-300, which is 2.44:1 on parchment: below even the 3:1 large-text floor, and it was being used for 11px hints. --ink-400 is 3.74:1, which passes for large text. Anything smaller wants --text-muted (--ink-500, 5.85:1). Disabled controls are exempt under WCAG. */ --text-faint:var(--ink-400); --text-accent:var(--gold-700); --text-action:var(--seal-700); --text-on-dark:var(--parchment-200); /* Text on the seal — i.e. on a primary button. Distinct from --text-on-dark, which is for the night band; the buttons used to borrow that one and came out at 5.34:1 where this is 6.44:1. The name matches the design system's tokens/colors.css exactly, and must keep matching. */ --text-on-accent:#FFF8F0; --border-hairline:rgba(184,134,11,0.18); --border-default:rgba(184,134,11,0.34); --border-rule:var(--parchment-400); --border-strong:var(--gold-600); --border-dashed:var(--parchment-400); --accent-primary:var(--seal-600); --accent-primary-hover:var(--seal-700); --accent-primary-press:#651C10; --accent-secondary:var(--gold-600); --focus-ring:0 0 0 3px rgba(166,50,31,0.28); /* --- Semantic hues, warm-shifted. Clay sits deliberately away from the seal so danger never reads as a primary button. --- */ --moss-600:#4F7A3A;--moss-100:#E6EFDC; --clay-600:#8F3A2E;--clay-100:#F3E2DE; --slate-600:#3E6B7A;--slate-100:#DFEAEE; --status-success:var(--moss-600); --status-danger:var(--clay-600); --status-info:var(--slate-600); /* --- Status (banners). Error borrows the seal ramp; ok is a muted parchment green. --- */ --status-error-bg:var(--seal-100);--status-error-border:var(--seal-300);--status-error-text:var(--seal-700); --status-ok-bg:#E9F1E2;--status-ok-border:#B7CDA6;--status-ok-text:#3F6B3A; /* The meter fill. Was copy-pasted as raw hex into site.css and creation.css, which is exactly the kind of decision this layer exists to hold once. */ --fill-meter:linear-gradient(90deg,var(--gold-600),#E8A33C); --glow-page-top:linear-gradient(to bottom,rgba(184,134,11,0.07) 0%,transparent 220px); --glow-campfire:radial-gradient(ellipse 70% 55% at 50% 100%,rgba(206,138,64,0.15) 0%,rgba(184,134,11,0.09) 45%,transparent 78%); /* --- Type --- */ --font-display:'Marcellus',Georgia,serif; --font-ui:'Source Sans 3','Segoe UI',system-ui,sans-serif; --font-prose:'Crimson Pro',Georgia,serif; --type-flavour:italic 400 var(--fs-md)/1.65 var(--font-prose); --fs-3xs:9px;--fs-2xs:10px;--fs-xs:11px;--fs-sm:13px;--fs-md:15px; --fs-lg:19px;--fs-xl:24px;--fs-2xl:30px;--fs-3xl:40px; --track-title:0.04em;--track-label:0.16em;--track-control:0.02em;--track-none:0; /* --- Spacing / layout --- */ --space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;--space-6:16px; --space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;--space-11:56px; --space-12:80px;--space-13:112px; --gutter-page:24px;--gutter-page-lg:40px; --width-content:860px;--nav-height:60px;--nav-height-mobile:52px; /* --- Breakpoints --- THESE CANNOT BE CUSTOM PROPERTIES. A var() is silently ignored inside a media query — `@media (max-width: var(--bp-sm))` looks correct and simply never matches — so the scale is a convention written down here and spelled literally at each use site. Three steps, and no others: sm 560px phone; single column, nav links collapse md 768px tablet; side rails stack under the main column lg 1080px laptop; the nav sheds the display name There were six ad-hoc values before this (560, 640, 720, 900, 1080, 1280), which is why the same layout broke at different widths on different pages. One deliberate exception survives: creation.css switches between two whole layouts at min-width 900px, and that number is load-bearing — see the comment there. */ /* --- Shape --- */ --radius-xs:3px;--radius-sm:4px;--radius-md:6px;--radius-lg:10px;--radius-xl:16px; --radius-pill:999px;--radius-circle:50%; /* --- Elevation --- */ --shadow-xs:0 1px 2px rgba(60,44,20,0.06); --shadow-sm:0 1px 3px rgba(60,44,20,0.08),0 1px 1px rgba(60,44,20,0.04); --shadow-md:0 4px 12px rgba(60,44,20,0.10); --shadow-lg:0 12px 32px rgba(60,44,20,0.14); --shadow-action:0 2px 10px rgba(122,36,21,0.24); /* --- Motion --- */ --dur-instant:80ms;--dur-fast:150ms;--dur-base:200ms;--dur-slow:320ms;--dur-reveal:900ms; --ease-standard:cubic-bezier(0.32,0.08,0.24,1); --ease-out:cubic-bezier(0.16,0.84,0.44,1); font-family:var(--font-ui); } /* Shared primitives. The buttons that used to live here have moved to components.css, which is now the one place a button is defined; what remains below is genuinely typographic or ornamental rather than a component. */ .ag-parchment .ag-section-label{ font-family:var(--font-display);font-size:var(--fs-2xs);font-weight:600; letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-accent); } .ag-parchment .ag-flavour{font:var(--type-flavour);color:var(--text-muted)} /* Shared dot-pip primitive — used by the landing intro's chapter pips and the creation wizard's mobile step pips. Page-specific colour overrides (e.g. the intro's per-chapter border tint) live in that page's own stylesheet. */ .ag-parchment .ag-pip{ width:7px;height:7px;padding:0;border-radius:999px;cursor:pointer; border:1px solid var(--border-default);background:transparent; transition:background var(--dur-slow) var(--ease-standard),border-color var(--dur-slow) var(--ease-standard); } .ag-parchment .ag-pip.is-active{ background:var(--gold-500);border-color:var(--gold-500) } .ag-parchment :focus-visible{outline:none;box-shadow:var(--focus-ring)}