/* Self-hosted subset (opsz 20, wght 400, FILL 0, GRAD 0) — was a fonts.googleapis.com in index.html, which blocked first paint on a cold mobile connection and leaked a request to a third party. Regenerate by requesting, with a browser User-Agent, the same family/axis query with icon_names=delete_forever,folder,menu,rotate_left,rotate_right,search,share,tune from fonts.googleapis.com/css2, then download the woff2 its `src: url(...)` points at. */ @font-face { font-family: 'Material Symbols Outlined'; src: url('/fonts/MaterialSymbolsOutlined-Subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/fonts/Sora-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/fonts/Sora-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/fonts/Sora-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/fonts/Sora-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } /* frontend/theme.css * Cru Cornerstone Design System — cru-dark theme. * Hand-translated from cornerstone-design-system tokens (ref -> sys -> cmp). * Source: github.com/CruGlobal/cornerstone-design-system @ v0.3.2 * Three tiers: --ref-* primitives -> --sys-* semantic roles -> --cmp-* components. * style.css consumes --sys-* / --cmp-* only; no raw hex outside this file. */ :root { /* ── REFERENCE TIER — primitives (raw cru palette) ───────── */ --ref-yellow-500: #ffd000; --ref-yellow-400: #ffd930; --ref-yellow-200: #ffeb91; --ref-yellow-700: #997d00; --ref-orange-500: #f08020; --ref-orange-400: #f3984a; --ref-orange-600: #c0661a; --ref-orange-700: #904d13; --ref-orange-800: #60330d; --ref-cyan-700: #007382; --ref-cyan-600: #009aad; --ref-cyan-500: #00c0d8; --ref-cyan-900: #00262b; --ref-mint-700: #52896d; --ref-mint-600: #6db692; --ref-mint-800: #365b49; --ref-cerise-700: #74242c; --ref-cerise-600: #9b303a; --ref-cerise-500: #c23c49; --ref-cerise-300: #d9868e; --ref-cerise-800: #4e181d; --ref-sky-300: #b6f5fa; --ref-sky-200: #ccf8fc; --ref-ruby-300: #c06d6d; --ref-graphite-900: #111110; --ref-graphite-800: #222221; --ref-graphite-700: #343431; --ref-graphite-600: #454542; --ref-graphite-500: #565652; --ref-gray-100: #fbfbfb; --ref-gray-400: #f3f2f1; --ref-white: #ffffff; --ref-black: #000000; --ref-white-60: #ffffff99; --ref-white-40: #ffffff66; --ref-white-10: #ffffff1a; --ref-black-50: #00000080; /* ── SYSTEM TIER — semantic roles ────────────────────────── */ --sys-primary: var(--ref-yellow-500); --sys-primary-hover: var(--ref-yellow-400); --sys-primary-pressed: var(--ref-yellow-200); --sys-primary-disabled: var(--ref-graphite-500); --sys-on-primary: var(--ref-black); --sys-primary-container: var(--ref-yellow-700); --sys-secondary: var(--ref-orange-500); --sys-secondary-hover: var(--ref-orange-400); --sys-on-secondary: var(--ref-black); --sys-surface: var(--ref-graphite-900); --sys-surface-variant: var(--ref-graphite-800); --sys-surface-container: var(--ref-graphite-700); --sys-surface-hover: var(--ref-graphite-500); --sys-background: var(--ref-graphite-900); --sys-on-surface: var(--ref-gray-100); --sys-on-surface-variant: var(--ref-gray-400); --sys-text-primary: var(--ref-white); --sys-text-secondary: var(--ref-white-60); --sys-text-disabled: var(--ref-white-40); --sys-outline: var(--ref-graphite-600); --sys-outline-hover: var(--ref-graphite-500); --sys-outline-focus: var(--ref-yellow-500); --sys-divider: var(--ref-white-10); --sys-info: var(--ref-cyan-700); --sys-info-hover: var(--ref-cyan-600); --sys-accent: var(--ref-cyan-500); --sys-success: var(--ref-mint-700); --sys-warning: var(--ref-orange-700); --sys-danger: var(--ref-cerise-700); --sys-danger-hover: var(--ref-cerise-600); --sys-danger-pressed: var(--ref-cerise-500); /* danger as TEXT/icon on a dark surface — the fill-weight --sys-danger (#74242c) fails contrast on dark (ratio ~1.5). Use the lighter cerise.300 for foreground danger; AA-text on surface, AA-large on menu. */ --sys-danger-text: var(--ref-cerise-300); --sys-on-state: var(--ref-white); --sys-link: var(--ref-sky-300); --sys-link-hover: var(--ref-sky-200); --sys-link-visited: var(--ref-ruby-300); --sys-scrim: var(--ref-black-50); --sys-shadow: var(--ref-black); --sys-shadow-rgb: 0, 0, 0; /* channels for elevation rgba() composition */ --sys-photo-backdrop: var(--ref-black); /* letterbox behind a viewed photo */ --sys-on-light: var(--ref-white); /* fg/bg that must stay literal white (e.g. QR quiet zone) */ /* radius / border (Cornerstone: mostly 0; cards 12, inputs/menu 4) */ --sys-radius-none: 0; --sys-radius-input: 4px; --sys-radius-menu: 4px; --sys-radius-card: 12px; --sys-border-thin: 1px; --sys-border-medium: 2px; /* fonts */ --sys-font-display: 'Sora', system-ui, sans-serif; --sys-font-body: 'Sora', system-ui, sans-serif; --sys-font-secondary: 'Inter', system-ui, sans-serif; /* Inter deferred; system fallback */ /* ── COMPONENT TIER ──────────────────────────────────────── */ --cmp-button-bg: var(--sys-primary); --cmp-button-bg-hover: var(--sys-primary-hover); --cmp-button-bg-pressed: var(--sys-primary-pressed); --cmp-button-fg: var(--sys-on-primary); --cmp-button-border: var(--sys-primary); --cmp-button-radius: var(--sys-radius-none); --cmp-button-border-width: var(--sys-border-medium); --cmp-input-bg: var(--sys-surface-container); --cmp-input-fg: var(--sys-text-primary); --cmp-input-outline: var(--sys-outline); --cmp-input-outline-focus: var(--sys-outline-focus); --cmp-input-radius: var(--sys-radius-input); --cmp-input-border-width: var(--sys-border-thin); --cmp-card-surface: var(--sys-surface); --cmp-card-radius: var(--sys-radius-card); --cmp-menu-surface: var(--sys-surface); --cmp-menu-radius: var(--sys-radius-menu); --cmp-menu-item-hover: var(--sys-surface-variant); --cmp-modal-surface: var(--sys-surface-variant); --cmp-modal-radius: var(--sys-radius-card); /* elevation — three depths, all black scrim over the dark cru palette. Replaces the raw rgba(0,0,0,x) box-shadows that used to live in style.css. */ --cmp-elevation-1: 0 2px 8px rgba(var(--sys-shadow-rgb), 0.30); --cmp-elevation-2: 0 4px 16px rgba(var(--sys-shadow-rgb), 0.35); --cmp-elevation-3: 0 6px 20px rgba(var(--sys-shadow-rgb), 0.50); /* DOCUMENTED DEVIATION from Cornerstone (radius 0): photos read harshly with hard-square corners. ~6px rounding is the gallery-UX norm. Single named token, applied ONLY to photo thumbnails, the detail image, and modal photo corners. Do not invent other radii. */ --cmp-photo-radius: 6px; }