/* =========================================================================== SILVER PRINT — Design Tokens --------------------------------------------------------------------------- ONE token namespace for the whole public site. Every name here begins with the two letters s and a hyphen; nothing else in the codebase uses that prefix, so there is no collision with the four systems that grew over time (--c- in style.css, --ph- in photo-page.css, --sp- in search-page.css and --page- in cms-page.css). Those four are re-pointed instead of replaced — --c- in section E below, the other three in the matching page files. Everything is scoped to body[data-skin="silver"] (specificity 0-1-1) so it outranks every :root declaration, including the critical inline style block in inc/header.php that no external :root could ever beat. THE ONE RULE OF THIS SKIN: every colour value below is neutral. Red, green and blue are equal in every hex, and every rgba is built from pure black or pure white. The only colour that reaches the screen comes from photographs and from the colour-search swatches on search.php, whose backgrounds are inline styles written by PHP and are deliberately left alone. =========================================================================== */ body[data-skin="silver"] { /* ---- A. Primitives ---------------------------------------------------- */ /* Paper ramp — the canvas. paper-0 is the page, higher numbers sink back. */ --s-paper-0: #FFFFFF; --s-paper-1: #FAFAFA; --s-paper-2: #F4F4F4; --s-paper-3: #EDEDED; --s-paper-4: #E4E4E4; /* Ink ramp — contrast measured against paper-0 */ --s-ink-0: #0A0A0A; /* 19.8:1 — headings, primary action, "the colour" */ --s-ink-1: #3F3F3F; /* 10.5:1 — body copy */ --s-ink-2: #6B6B6B; /* 5.3:1 — muted text, labels */ --s-ink-3: #A1A1A1; /* 2.6:1 — decorative only, NEVER text */ /* Hairlines. Built from pure black so they tint nothing. */ --s-line: rgba(0, 0, 0, .08); --s-line-strong: rgba(0, 0, 0, .16); --s-line-heavy: rgba(0, 0, 0, .28); /* On an ink surface the hairlines invert. */ --s-line-on-ink: rgba(255, 255, 255, .14); --s-line-on-ink-strong: rgba(255, 255, 255, .28); /* There is no accent. These three names exist because the legacy sheets ask for them; all three resolve to ink so nothing can leak a hue. */ --s-accent: var(--s-ink-0); --s-accent-hover: var(--s-ink-1); --s-accent-soft: var(--s-paper-2); --s-accent-ring: rgba(0, 0, 0, .22); /* Status colours are monochrome too — meaning is carried by the icon and the wording, never by hue. */ --s-danger: var(--s-ink-0); --s-success: var(--s-ink-0); --s-warning: var(--s-ink-0); /* ---- B. Semantic ------------------------------------------------------ */ --s-bg: var(--s-paper-0); --s-surface: var(--s-paper-0); --s-surface-2: var(--s-paper-1); --s-surface-sunk: var(--s-paper-2); --s-surface-hover: var(--s-paper-2); --s-elev: var(--s-paper-0); /* popovers, dropdowns, modals */ --s-text: var(--s-ink-1); --s-text-head: var(--s-ink-0); --s-text-muted: var(--s-ink-2); --s-text-dim: var(--s-ink-3); /* Ink bands: the photo hero, the footer, the tag strip above the banner. */ --s-ink-bg: var(--s-ink-0); --s-on-ink: var(--s-paper-0); --s-on-ink-muted: #A1A1A1; --s-on-ink-dim: #6B6B6B; --s-on-accent: var(--s-paper-0); /* text sitting ON a black fill */ --s-border: var(--s-line); --s-border-strong: var(--s-line-strong); --s-focus: var(--s-ink-0); --s-scrim: rgba(0, 0, 0, .62); /* ---- C. Geometry, type, motion ---------------------------------------- */ /* Sharp. A museum wall does not have rounded corners, and this is the one decision that most separates the skin from noir, which rounds 12 to 26px. The pill token stays because two controls in the legacy sheets force 999px and the skin answers them explicitly rather than silently. */ --s-r-none: 0; --s-r-xs: 0; --s-r-sm: 0; --s-r-md: 0; --s-r-lg: 0; --s-r-xl: 0; --s-r-pill: 0; /* 4-pt spacing scale — same eight steps as noir, so switching skins never requires re-thinking a layout. */ --s-s1: 4px; --s-s2: 8px; --s-s3: 12px; --s-s4: 16px; --s-s5: 24px; --s-s6: 32px; --s-s7: 48px; --s-s8: 72px; /* Fluid type — there is no per-breakpoint font-size override anywhere in this skin. */ --s-fz-xs: .6875rem; --s-fz-sm: .8125rem; --s-fz-base: 1rem; --s-fz-lg: 1.0625rem; --s-fz-xl: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); --s-fz-2xl: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); --s-fz-3xl: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); --s-fz-4xl: clamp(2.25rem, 1.4rem + 4vw, 4.25rem); --s-lh-tight: 1.08; --s-lh-snug: 1.32; --s-lh-body: 1.7; --s-lh-read: 1.85; --s-fw-reg: 400; --s-fw-med: 500; --s-fw-semi: 600; --s-fw-bold: 700; --s-fw-black: 900; --s-tracking-wide: .18em; --s-tracking-mid: .08em; /* Shadows are almost absent by design: on white paper a drop shadow reads as grubby, and depth comes from the hairline instead. The three that remain are for things that genuinely float above the page. */ --s-sh-0: none; --s-sh-1: 0 1px 2px rgba(0, 0, 0, .04); --s-sh-2: 0 6px 20px rgba(0, 0, 0, .07); --s-sh-3: 0 20px 48px rgba(0, 0, 0, .11); /* The focus ring is the load-bearing affordance of a skin with no accent colour. Two solid pixels of ink with two pixels of paper behind them, so it survives on white AND on top of a photograph. */ --s-ring: 2px solid var(--s-ink-0); --s-ring-offset: 2px; --s-dur-fast: 110ms; --s-dur: 200ms; --s-dur-slow: 380ms; --s-ease: cubic-bezier(.2, .7, .2, 1); --s-ease-emph: cubic-bezier(.16, 1, .3, 1); /* Frank Ruhl Libre is a Hebrew-first serif; Assistant is a Hebrew-first grotesque. Both carry Latin. A Latin-only display face would silently drop every Hebrew heading back to the body font on a Hebrew-first site, which is exactly the failure that is invisible in a Latin preview. */ --s-font-display: 'Frank Ruhl Libre', 'Times New Roman', Georgia, serif; --s-font-body: 'Assistant', 'Heebo', system-ui, -apple-system, sans-serif; --s-font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace; /* ---- D. Layout -------------------------------------------------------- */ --s-header-h: 72px; --s-bottomnav-h: 66px; --s-maxw: 1600px; --s-maxw-read: 68ch; --s-gutter: clamp(16px, 3vw, 40px); --s-safe-top: env(safe-area-inset-top, 0px); --s-safe-bottom: env(safe-area-inset-bottom, 0px); --s-safe-left: env(safe-area-inset-left, 0px); --s-safe-right: env(safe-area-inset-right, 0px); /* ---- E. Compatibility bridge ------------------------------------------ */ /* The existing page stylesheets consume var(--c-...) heavily. Re-pointing those names turns most of the site monochrome for free; only rules that hard-code a hex need an explicit override in global.css or a page file. --mr- is deliberately NOT bridged: mobile-redesign.css is not loaded for this skin, so a bridge would be dead weight and would mask a mistake if the legacy layer ever leaked back in. */ --c-bg: var(--s-bg); --c-surface: var(--s-surface); --c-text: var(--s-text); --c-text-muted: var(--s-text-muted); --c-primary: var(--s-ink-0); --c-primary-hover: var(--s-ink-1); --c-danger: var(--s-danger); --c-success: var(--s-success); --c-border: var(--s-border); --c-input-bg: var(--s-surface-sunk); --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0; --shadow-sm: var(--s-sh-1); --shadow-md: var(--s-sh-1); --shadow-lg: var(--s-sh-2); --shadow-xl: var(--s-sh-3); --font-main: var(--s-font-body); --max-w: var(--s-maxw); --header-h: var(--s-header-h); /* Native form controls, scrollbars and select popups render light. This is an unconditional declaration, not a prefers-color-scheme rule, because the skin opts out of the legacy mobile layer and therefore also out of the inline colour-scheme block that layer carried in inc/header.php. */ color-scheme: light; }