/* Deep Cut design tokens (PLAN 20b: field-guide topo). * * Every colour, type step, space, radius, shadow and duration the UI uses is * a custom property here. Components (components.css) reference tokens only. * All tokens are namespaced --dc-* so they never collide with page-local * variables (the map page still carries its own until its restyle pass). * * Themes * light "field guide": warm paper, warm ink, brown contour lines. * dark "night field guide": a deep spruce-black page with paper-coloured * ink, as if reading the guide by headlamp. Not an inverted page. * Dark applies via prefers-color-scheme unless ; * forces it. data-theme also works on any element * (the styleguide renders light and night side by side); give that element * .dc-theme-scope so it repaints its own background and text. The two dark blocks below MUST stay * identical (scripts/check_contrast.py verifies both themes). * * Contrast: every text/background pair listed in scripts/check_contrast.py * meets WCAG AA (4.5:1 body text, 3:1 large text and UI boundaries) in both * themes; tests/test_contrast.py runs it. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/fraunces-latin-var.069cb90e11a3.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-latin-italic.a2e8d8a2c0aa.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/public-sans-latin-var.e4c9b081863a.woff2") format("woff2"); } @font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/public-sans-latin-italic.3cbca8221b55.woff2") format("woff2"); } :root, [data-theme="light"] { color-scheme: light; /* ---------------------------------------------------------------- colour: neutrals (paper + ink) */ --dc-paper: #f5f0e4; /* page */ --dc-paper-raised: #fbf8f1; /* cards, panels, inputs */ --dc-paper-sunk: #ebe4d3; /* wells, table stripes, skeletons */ --dc-ink: #23211c; /* body text */ --dc-ink-muted: #5b5446; /* hints, meta */ --dc-ink-inverse: #fbf8f1; /* text on ink fills */ --dc-rule: #d8cfbb; /* hairlines, dividers (decorative) */ --dc-border: #857a64; /* input + control boundaries (>= 3:1 on paper) */ --dc-contour: #b98a5b; /* topo contour lines (decorative only) */ --dc-contour-faint: #e3d6bf; /* background contour motif */ --dc-overlay: rgb(35 33 28 / 0.45); /* ---------------------------------------------------------------- colour: brand + interaction */ --dc-primary: #23211c; /* ink-filled primary buttons: printed, not "app blue" */ --dc-primary-hover: #3d3a31; --dc-on-primary: #fbf8f1; --dc-link: #23211c; --dc-link-underline: #b98a5b; /* contour-brown underline */ --dc-accent: #8a5a2b; /* umber: wordmark cut, small emphasis (text-safe) */ --dc-focus: #863acd; /* violet focus ring: a hue no activity or error uses (PLAN 20c P1-8) */ --dc-selection: #f1d9b5; /* ---------------------------------------------------------------- colour: activities -base = marker/chip fill (pairs with --dc-on-activity text) -ink = text-safe on paper -tint = soft background for chips/cards */ /* Activity hues were re-picked in PLAN 20c (P0-5) so every pair stays apart under protanopia, deuteranopia and tritanopia simulation (dE76 >= 20, dE00 >= 10; scripts/check_cvd.py). Markers use the base; text, pills and solid chips use -ink (>= 4.5:1 with white). */ --dc-fishing: #688454; /* sage trout green */ --dc-fishing-ink: #526d3f; --dc-fishing-tint: #dcead1; --dc-ski: #235884; /* snow blue (deep enough to carry white text) */ --dc-ski-ink: #235884; --dc-ski-tint: #d6e7fe; --dc-climbing: #862113; /* oxblood */ --dc-climbing-ink: #862113; --dc-climbing-tint: #fddfd7; --dc-camping: #966a09; /* ochre (darkened so white text passes) */ --dc-camping-ink: #875e00; --dc-camping-tint: #f5e3cb; --dc-on-activity: #ffffff; /* ---------------------------------------------------------------- colour: semantic */ --dc-success-ink: #2d5a27; --dc-success-bg: #e3ecd9; --dc-success-border: #8fae80; --dc-warn-ink: #674600; --dc-warn-bg: #f6e8c3; --dc-warn-border: #c9a34a; --dc-danger-ink: #8c1d17; --dc-danger-bg: #f7ddd6; --dc-danger-border: #cf8a7e; --dc-danger: #a3261d; /* danger button fill */ --dc-on-danger: #ffffff; --dc-info-ink: #22486a; --dc-info-bg: #dfe8ef; --dc-info-border: #8eaac2; /* ---------------------------------------------------------------- colour: badges EXPERIMENTAL = lab plum, dashed. float-only = water blue. park rules = park-sign brown. ATES = ONE cool slate ramp + shape glyphs, deliberately unlike the CAIC danger scale (green/yellow/orange/red/black): we never show danger ratings, so no badge may look like one. */ --dc-badge-experimental-ink: #5a2a6b; --dc-badge-experimental-bg: #efe3f2; --dc-badge-experimental-border: #9a6fab; --dc-badge-float-ink: #1d4a6c; --dc-badge-float-bg: #dbe8f1; --dc-badge-float-border: #7fa3c0; --dc-badge-park-ink: #5a3d12; --dc-badge-park-bg: #ecdfc4; --dc-badge-park-border: #b0925e; --dc-ates-simple-ink: #2e3b57; --dc-ates-simple-bg: #e4e8f0; --dc-ates-simple-border: #8a97b3; --dc-ates-challenging-ink: #1b2438; --dc-ates-challenging-bg: #b3bed4; --dc-ates-challenging-border: #5c6b8c; --dc-ates-complex-ink: #f2f4f8; --dc-ates-complex-bg: #2e3b57; --dc-ates-complex-border: #2e3b57; /* ---------------------------------------------------------------- type Display: Fraunces (variable, optical size axis): a soft, old-style serif with real character at headline sizes that still reads cleanly small -- the printed-field-guide voice. Body: Public Sans (the USWDS face, designed for public-service UI): neutral, very legible, tabular figures for coordinates, and it nods to the public-land data this app is built on. Both OFL-1.1, self-hosted (static/fonts/): no third-party font requests from a privacy-sensitive app. */ --dc-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --dc-font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --dc-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* modular scale, ratio 1.25 (major third), fluid between 390 and 1440 px */ --dc-step--2: 0.8rem; --dc-step--1: 0.889rem; --dc-step-0: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem); --dc-step-1: clamp(1.2rem, 1.13rem + 0.3vw, 1.33rem); --dc-step-2: clamp(1.44rem, 1.32rem + 0.5vw, 1.66rem); --dc-step-3: clamp(1.73rem, 1.52rem + 0.85vw, 2.07rem); --dc-step-4: clamp(2.07rem, 1.74rem + 1.35vw, 2.59rem); --dc-step-5: clamp(2.49rem, 1.97rem + 2.1vw, 3.24rem); --dc-leading-tight: 1.15; --dc-leading-snug: 1.3; --dc-leading-body: 1.6; --dc-measure: 65ch; --dc-weight-regular: 400; --dc-weight-medium: 520; --dc-weight-semibold: 620; --dc-weight-bold: 700; --dc-tracking-caps: 0.08em; /* ---------------------------------------------------------------- space (4 px base, 8 px rhythm) */ --dc-space-1: 0.25rem; --dc-space-2: 0.5rem; --dc-space-3: 0.75rem; --dc-space-4: 1rem; --dc-space-5: 1.5rem; --dc-space-6: 2rem; --dc-space-7: 3rem; --dc-space-8: 4rem; --dc-space-9: 6rem; --dc-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem); --dc-content-max: 72rem; --dc-prose-max: 44rem; --dc-target: 44px; /* WCAG 2.5.5 touch target */ /* ---------------------------------------------------------------- radii */ --dc-radius-sm: 4px; --dc-radius-md: 8px; --dc-radius-lg: 14px; --dc-radius-pill: 999px; /* ---------------------------------------------------------------- elevation (warm, low shadows: paper on a desk) */ --dc-shadow-1: 0 1px 0 rgb(80 60 30 / 0.06), 0 1px 3px rgb(80 60 30 / 0.10); --dc-shadow-2: 0 1px 0 rgb(80 60 30 / 0.05), 0 4px 12px rgb(80 60 30 / 0.12); --dc-shadow-3: 0 2px 4px rgb(80 60 30 / 0.08), 0 14px 36px rgb(80 60 30 / 0.18); /* ---------------------------------------------------------------- focus */ --dc-focus-width: 3px; --dc-focus-offset: 2px; --dc-focus-ring: 0 0 0 var(--dc-focus-offset) var(--dc-paper), 0 0 0 calc(var(--dc-focus-offset) + var(--dc-focus-width)) var(--dc-focus); /* ---------------------------------------------------------------- motion */ --dc-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dc-dur-1: 120ms; --dc-dur-2: 200ms; --dc-dur-3: 320ms; /* ---------------------------------------------------------------- z */ --dc-z-header: 1000; --dc-z-sheet: 1100; --dc-z-tooltip: 1200; --dc-z-skip: 10000; /* ---------------------------------------------------------------- texture (decorative, tiny inline SVG) */ --dc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.2 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ================================================================== night field guide */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --dc-paper: #121814; --dc-paper-raised: #1a211c; --dc-paper-sunk: #0d120f; --dc-ink: #ece5d3; --dc-ink-muted: #b4ab96; --dc-ink-inverse: #121814; --dc-rule: #2d372f; --dc-border: #7d8a7e; --dc-contour: #8a6a48; --dc-contour-faint: #1f2a22; --dc-overlay: rgb(0 0 0 / 0.6); --dc-primary: #ece5d3; --dc-primary-hover: #fffaf0; --dc-on-primary: #121814; --dc-link: #ece5d3; --dc-link-underline: #c79a68; --dc-accent: #d9a86f; --dc-focus: #a478fa; --dc-selection: #4a3a22; --dc-fishing: #bae3a8; --dc-fishing-ink: #bae3a8; --dc-fishing-tint: #222d1d; --dc-ski: #83b6de; --dc-ski-ink: #83b6de; --dc-ski-tint: #182c3a; --dc-climbing: #d87e69; --dc-climbing-ink: #d87e69; --dc-climbing-tint: #3a251f; --dc-camping: #dcb75d; --dc-camping-ink: #dcb75d; --dc-camping-tint: #312919; --dc-on-activity: #121814; --dc-success-ink: #b3d8a3; --dc-success-bg: #1c2b1a; --dc-success-border: #4f7445; --dc-warn-ink: #eccb7d; --dc-warn-bg: #2e2612; --dc-warn-border: #86692a; --dc-danger-ink: #f3aa9e; --dc-danger-bg: #331a17; --dc-danger-border: #8f4a40; --dc-danger: #f09a8c; --dc-on-danger: #121814; --dc-info-ink: #a9cbe6; --dc-info-bg: #172433; --dc-info-border: #4c6d8a; --dc-badge-experimental-ink: #dcbfe6; --dc-badge-experimental-bg: #2b1f31; --dc-badge-experimental-border: #8a67a0; --dc-badge-float-ink: #a9cbe6; --dc-badge-float-bg: #172433; --dc-badge-float-border: #4c6d8a; --dc-badge-park-ink: #e0c79b; --dc-badge-park-bg: #2c2415; --dc-badge-park-border: #7d6639; --dc-ates-simple-ink: #d3dbeb; --dc-ates-simple-bg: #1e2433; --dc-ates-simple-border: #56627f; --dc-ates-challenging-ink: #e6ebf5; --dc-ates-challenging-bg: #3a4661; --dc-ates-challenging-border: #7d8aa8; --dc-ates-complex-ink: #141a26; --dc-ates-complex-bg: #c3cde2; --dc-ates-complex-border: #c3cde2; --dc-shadow-1: 0 1px 0 rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.4); --dc-shadow-2: 0 1px 0 rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.45); --dc-shadow-3: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.55); --dc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } } [data-theme="dark"] { color-scheme: dark; --dc-paper: #121814; --dc-paper-raised: #1a211c; --dc-paper-sunk: #0d120f; --dc-ink: #ece5d3; --dc-ink-muted: #b4ab96; --dc-ink-inverse: #121814; --dc-rule: #2d372f; --dc-border: #7d8a7e; --dc-contour: #8a6a48; --dc-contour-faint: #1f2a22; --dc-overlay: rgb(0 0 0 / 0.6); --dc-primary: #ece5d3; --dc-primary-hover: #fffaf0; --dc-on-primary: #121814; --dc-link: #ece5d3; --dc-link-underline: #c79a68; --dc-accent: #d9a86f; --dc-focus: #a478fa; --dc-selection: #4a3a22; --dc-fishing: #bae3a8; --dc-fishing-ink: #bae3a8; --dc-fishing-tint: #222d1d; --dc-ski: #83b6de; --dc-ski-ink: #83b6de; --dc-ski-tint: #182c3a; --dc-climbing: #d87e69; --dc-climbing-ink: #d87e69; --dc-climbing-tint: #3a251f; --dc-camping: #dcb75d; --dc-camping-ink: #dcb75d; --dc-camping-tint: #312919; --dc-on-activity: #121814; --dc-success-ink: #b3d8a3; --dc-success-bg: #1c2b1a; --dc-success-border: #4f7445; --dc-warn-ink: #eccb7d; --dc-warn-bg: #2e2612; --dc-warn-border: #86692a; --dc-danger-ink: #f3aa9e; --dc-danger-bg: #331a17; --dc-danger-border: #8f4a40; --dc-danger: #f09a8c; --dc-on-danger: #121814; --dc-info-ink: #a9cbe6; --dc-info-bg: #172433; --dc-info-border: #4c6d8a; --dc-badge-experimental-ink: #dcbfe6; --dc-badge-experimental-bg: #2b1f31; --dc-badge-experimental-border: #8a67a0; --dc-badge-float-ink: #a9cbe6; --dc-badge-float-bg: #172433; --dc-badge-float-border: #4c6d8a; --dc-badge-park-ink: #e0c79b; --dc-badge-park-bg: #2c2415; --dc-badge-park-border: #7d6639; --dc-ates-simple-ink: #d3dbeb; --dc-ates-simple-bg: #1e2433; --dc-ates-simple-border: #56627f; --dc-ates-challenging-ink: #e6ebf5; --dc-ates-challenging-bg: #3a4661; --dc-ates-challenging-border: #7d8aa8; --dc-ates-complex-ink: #141a26; --dc-ates-complex-bg: #c3cde2; --dc-ates-complex-border: #c3cde2; --dc-shadow-1: 0 1px 0 rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.4); --dc-shadow-2: 0 1px 0 rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.45); --dc-shadow-3: 0 2px 4px rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.55); --dc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.85 0 0 0 0 0.75 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* motion: everything collapses to instant for people who ask for less motion */ @media (prefers-reduced-motion: reduce) { :root { --dc-dur-1: 0ms; --dc-dur-2: 0ms; --dc-dur-3: 0ms; } }