/* ============================================================ shepherd — design tokens (single source of truth) Consumed by BOTH the app (frontend/) and the site (web-site/). App: @import "shepherd-tokens.css"; // before Tailwind layers Site: THIS FILE IS A COPY, NOT A FORK. The same bytes live at `frontend/src/shepherd-tokens.css` and `web-site/publish/assets/shepherd-tokens.css` — same arrangement as `herd-dots.js`. Change one, copy it to the other; never edit one side only. THREE SCOPES ------------ :root / .dark Ridgeline dark — the SITE's default (blue guide accent) .light Ridgeline light — the site's daylight twin .app GRAPHITE — the APP's chrome (direction 9d): zero-chroma surfaces, silver guide, muted decision signal. Never tints photos. .app.light Graphite light — PROPOSED, confirm with the designer. The app shell sets (or "light app"). The site keeps using :root / .light unchanged. Values are raw hex; Tailwind reads them via `var(--…)` (Tailwind v4 @theme inline / v3 `colors: { background: 'var(--background)' }`). ============================================================ */ :root, .dark { /* base surfaces */ --background: #101318; --background-deep: #0a0b0d; /* added: the PAGE sits one step below --background, so panels and cards read as raised on it */ --foreground: #e7eaef; --foreground-soft: #c8ccd2; /* added: a notch below --foreground — feature lists, hero pills, text over a screenshot */ --card: #191e25; --card-foreground: #e7eaef; --popover: #191e25; --popover-foreground: #e7eaef; /* brand + neutrals */ --primary: #5e93e8; --primary-foreground: #0b1220; --primary-hover: #7fa4e8; /* added: link + CTA hover on the site */ --secondary: #222834; --secondary-foreground: #e7eaef; --muted: #222834; --muted-foreground: #8a93a2; --subtle-foreground: #79818d; /* added: mono captions, fineprint, © line, the language switch. Lifted from the design's #5b636e, which measured 3.2:1 on the page and 2.8:1 on a card — under AA everywhere it carried something you read. Now 5.0 / 4.3, matching what the app's tertiary grey does. */ --accent: #222834; --accent-foreground: #e7eaef; /* feedback */ --destructive: #e0556a; --destructive-foreground:#ffffff; /* lines + focus */ --border: #2b323c; --border-strong: #3a4150; /* added: window dots, chevrons, inner dividers */ --border-subtle: #16191e; /* added: the section hairline — DARKER than --border, it separates bands without drawing */ --input: #2b323c; --ring: #5e93e8; /* product-status extension (shadcn ships only destructive) */ --success: #3fb950; --success-foreground: #0b1220; --warning: #f0b429; --warning-foreground: #1a1405; --gold: #f5c518; --gold-foreground: #1a1405; /* brand illustration */ /* on-photo overlays — the chips, pills and scrims that sit ON a frame rather than on a surface. The only tokens in this file that are not raw hex: a scrim is translucent by definition, or it stops being a scrim. */ --overlay: rgba(10, 11, 13, 0.72); --overlay-foreground: #e7eaef; --overlay-border: rgba(255, 255, 255, 0.14); --overlay-glow: #000000; /* the halo that keeps a bare glyph legible */ --sheep: #c8ccd2; /* added: the dot-herd flock. The dog is --primary. */ --display-ghost: #1f242b; /* added: the ghosted 78px display word behind a step number — scenery, one step above the page */ --brand-eye: #5e93e8; /* added: the shepherd blue — the eye in the mark, the dog in the dot-herd, and the cursor ring on a contact sheet. The one hue that never lands on a surface, so it survives the graphite re-skin and cannot be confused with chrome. */ /* geometry — new-york preset */ --radius: 0.5rem; } /* Daylight. The neutrals are the SAME zero-chroma greys the app's .app.light scope uses, so the site and the app read as one product in daylight rather than as a cream page next to a white one. What stays different is the guide: blue here, charcoal in the app. */ .light { --background: #f4f4f4; --background-deep: #ededed; /* the page; panels sit on it in white */ --foreground: #1f1f1f; --foreground-soft: #3a3a3a; --card: #ffffff; --card-foreground: #1f1f1f; --popover: #ffffff; --popover-foreground: #1f1f1f; /* One step deeper than the design's #3f74c9, which measured 3.9:1 on the page: the accent carries the 11px eyebrows, the step numbers and the small links, so it has to clear AA as text and not only as a button fill. */ --primary: #3568bb; --primary-foreground: #ffffff; --primary-hover: #2b579f; --secondary: #e6e6e6; --secondary-foreground: #2f2f2f; --muted: #e6e6e6; /* The same pair the app's daylight scope uses, and darker than a luminance match would give, for the same reason: on paper a tertiary grey cannot be lifted towards the page the way it is lifted towards a dark one, so the pair moves down together and keeps its order. Site and app now read at the same weight. */ --muted-foreground: #5f5f5f; --subtle-foreground: #6a6a6a; --accent: #e6e6e6; --accent-foreground: #2f2f2f; --destructive: #cf4257; --destructive-foreground:#ffffff; --border: #d9d9d9; --border-strong: #c7c7c7; --border-subtle: #e4e4e4; /* on paper the hairline is LIGHTER than --border */ --input: #d9d9d9; --ring: #3568bb; --success: #2f9e44; --success-foreground: #ffffff; --warning: #d99a0b; --warning-foreground: #ffffff; --gold: #caa106; --gold-foreground: #ffffff; --sheep: #909090; --display-ghost: #e4e4e4; --brand-eye: #3f74c9; /* Light overlays on a light page: a white scrim with dark ink, so a chip over a bright frame reads the way the rest of the daylight UI does. */ --overlay: rgba(255, 255, 255, 0.84); --overlay-foreground: #1f1f1f; --overlay-border: rgba(0, 0, 0, 0.14); --overlay-glow: #ffffff; --radius: 0.5rem; } /* ============================================================ .app — GRAPHITE (direction 9d, "crossover / muted signal") Every surface, border and grey at ZERO chroma so a warm frame reads warm and a neutral frame stays neutral. The guide accent (the dog) is silver, not blue. The four decision colours — keeper / rate / gold / reject — survive, dialed halfway to grey: present on 1–2px borders, small text and 15px chips only, never on a surface large enough to tint a photo. ============================================================ */ .app, .dark .app, .app.dark { /* One step down from direction 9d's published values (#141414 / #1d1d1d / #262626). The site's page is #0a0b0d and the app read noticeably lighter beside it; sinking the whole scale evenly keeps 9d's relationships intact, brings the two surfaces into the same register, and buys back roughly a third of a contrast point on every grey at the same time. Reverting is a matter of restoring the five values below. */ --background: #0f0f0f; --background-deep: #080808; --foreground: #ececec; --foreground-soft: #c8c8c8; --card: #181818; --card-foreground: #ececec; --popover: #181818; --popover-foreground: #ececec; --primary: #dcdcdc; /* the silver guide — buttons, active track, dog-dot */ --primary-foreground: #0f0f0f; --primary-hover: #f0f0f0; --secondary: #222222; /* chips, segmented control, raised inline blocks */ --secondary-foreground: #ececec; --muted: #222222; --muted-foreground: #8f8f8f; /* secondary text */ --subtle-foreground: #7d7d7d; /* tertiary text, mono counters. Lifted from #6a6a6a: at 3.1:1 on a card it was under AA wherever it carried something you read, like the new-shoot card's labels. */ --accent: #222222; --accent-foreground: #ececec; --border: #303030; --border-strong: #414141; /* keycaps, dividers on dark chips */ --border-subtle: #222222; /* added: inner hairline, quieter than --border */ --input: #303030; --ring: #dcdcdc; /* decision signal — muted. `-border` = 1–2px outlines, `-foreground` = text/glyph, `-subtle` = the barely-there tinted border on status chips. */ --success: #4aa463; /* keeper / herded */ --success-foreground: #66c67f; --success-subtle: #33513c; --warning: #d7a036; /* 4★ / all-soft flag */ --warning-foreground: #e5b951; --warning-subtle: #4a3f1a; --gold: #dfbf39; /* 5★ */ --gold-foreground: #eacf4b; --destructive: #d35d6c; /* reject / delete */ --destructive-foreground:#dd7b88; /* Text that sits ON a filled decision colour. The `-foreground` pair above is a TINT for outline treatments (9d's destructive button is an outline, not a block), so a filled chip needs its own ink or it disappears. */ --on-success: #08210f; --on-destructive: #1a0508; /* on-photo overlays — the chips, pills and scrims that sit ON a frame rather than on a surface. The only tokens in this file that are not raw hex: a scrim is translucent by definition, or it stops being a scrim. */ --overlay: rgba(8, 8, 8, 0.72); --overlay-foreground: #ececec; --overlay-border: rgba(255, 255, 255, 0.14); --overlay-glow: #000000; /* the halo that keeps a bare glyph legible */ --sheep: #c8c8c8; /* added: the dot-herd flock, zero chroma */ --display-ghost: #202020; --brand-eye: #5e93e8; /* the mark keeps its blue stare, so does the dog, and the contact-sheet cursor borrows it: 9d re-tones the chrome, not the brand */ /* app-only surfaces — no site equivalent */ --thumb: #c8c8c8; /* added: the pale slider handle */ --stage-bg: #080808; /* added: letterbox behind the full-res frame. Darker than --background so the photo leads. */ --radius: 0.5rem; /* 8px cards & buttons; 6–7px chips; 4–5px keycaps */ } /* AWAITING REVIEW — the neutral daylight twin of the graphite app. Every neutral is the zero-chroma value at the SAME luminance as the Ridgeline light palette the app shipped before, so a user switching to daylight lands on the app they know with the blue cast taken out, not on a different app: #eceef1 → #ededed #e2e6ea → #e6e6e6 #1c1f25 → #1f1f1f #727a87 → #767676 #8b93a0 → #909090 #d6dbe1 → #d9d9d9 #c4c9d1 → #c7c7c7 #525963 → #575757 #dde1e6 → #e0e0e0 The one deliberate departure is --primary: the guide is silver on dark, so in daylight it inverts to charcoal rather than staying blue. That is the piece to look at first. */ .app.light { --background: #ededed; --background-deep: #e2e2e2; --foreground: #1f1f1f; --foreground-soft: #3a3a3a; --card: #ffffff; --card-foreground: #1f1f1f; --popover: #ffffff; --popover-foreground: #1f1f1f; --primary: #2f2f2f; /* the guide, inverted — see the note above */ --primary-foreground: #fafafa; --primary-hover: #171717; --secondary: #e6e6e6; --secondary-foreground: #2f2f2f; --muted: #e6e6e6; /* Both text greys are darker than the luminance match would give, because on paper the match ran to 3.9:1 and 2.9:1. In daylight a tertiary grey cannot be lifted towards the page the way it is lifted towards a dark one, so the whole pair moves down instead and keeps its order. */ --muted-foreground: #5f5f5f; --subtle-foreground: #6a6a6a; --accent: #e6e6e6; --accent-foreground: #2f2f2f; --border: #d9d9d9; --border-strong: #c7c7c7; --border-subtle: #e4e4e4; --input: #d9d9d9; --ring: #2f2f2f; --success: #2f7d4a; --success-foreground: #266b3e; --success-subtle: #c3ddcb; --warning: #9a6f14; --warning-foreground: #8a6311; --warning-subtle: #e3d6b4; --gold: #a8850c; --gold-foreground: #96770b; --destructive: #b8434f; --destructive-foreground:#a53a46; --on-success: #ffffff; --on-destructive: #ffffff; --sheep: #909090; --display-ghost: #e4e4e4; --brand-eye: #3665c9; /* the mark's blue, unchanged from Ridgeline light */ /* Light overlays on a light page: a white scrim with dark ink, so a chip over a bright frame reads the way the rest of the daylight UI does. */ --overlay: rgba(255, 255, 255, 0.86); --overlay-foreground: #1f1f1f; --overlay-border: rgba(0, 0, 0, 0.14); --overlay-glow: #ffffff; --thumb: #575757; --stage-bg: #e0e0e0; --radius: 0.5rem; }