druid/css/tokens.css

/*
 * @file
 * Design tokens for the druid theme.
 *
 * Custom properties live in the `tokens` cascade layer so any later layer
 * (base, layout, components, utilities) can reference them without
 * specificity concerns. To override a token in a narrower scope, re-declare
 * it on a more specific selector inside a later layer — e.g. inside
 * `@layer components { .card { --surface-1: #fafafa; } }`.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * Adding tokens cherry-picked from Open Props
 * ─────────────────────────────────────────────────────────────────────────
 *
 * Open Props (https://open-props.style) is a library of pre-made CSS custom
 * properties. We do NOT import the full library — instead, copy just the
 * individual props we use, here, by hand.
 *
 * Why cherry-pick rather than @import the whole bundle:
 *   - Keeps payload small (the full library is ~20KB of props we'd never use).
 *   - No build step / dependency to manage.
 *   - You can see, in one file, every token the theme actually relies on.
 *
 * Workflow:
 *   1. Browse https://open-props.style and find the token you want
 *      (e.g. `--shadow-3`, `--ease-elastic-1`, `--gray-7`).
 *   2. Copy its declaration line — both the name and the value — into the
 *      appropriate section below. Preserve the Open Props name so you can
 *      look it up again later; rename only when you have a clear reason.
 *   3. If you copy a token that depends on another OP token (e.g. a shadow
 *      that references `--shadow-color`), copy that one too.
 *   4. Save. No build step, no `drush cr` needed for token *value* changes;
 *      a cache rebuild is only needed when adding/removing files or library
 *      entries.
 *
 * Reference for the source values:
 *   - Live docs:   https://open-props.style
 *   - Source CSS:  https://github.com/argyleink/open-props/tree/main/src
 */
@layer tokens {
  :root {
    /* Typography — families registered in css/fonts.css; applied in css/base.css.
       --font-sans   body text (Open Sans, self-hosted variable font, weights 300–800)
       --font-serif  headings (Adelle, self-hosted, Regular/Italic/Bold/BoldItalic)
       System fallbacks ensure usable text before the @font-face files load. */
    --font-sans: "Open Sans", system-ui, sans-serif;
    --font-serif: "Adelle", Georgia, "Times New Roman", serif;

    /* Sizing scale — hand-picked, loosely follows Open Props `--size-N`. */
    --size-1: 0.25rem;
    --size-2: 0.5rem;
    --size-3: 1rem;
    --size-4: 1.5rem;

    /* Layout sizing — shared width caps for centered content rails. */
    --content-max-width: 1180px;
    --sidebar-width: 240px;

    /* Border radius */
    --radius-2: 8px;

    /* Surfaces (backgrounds) */
    --surface-1: #ffffff;
    --surface-2: #f5f5f5;

    /* Text colors */
    --text-1: #111;
    --text-2: #555;

    /* Brand */
    --upei-yellow: #fdc902;
    --upei-green: #5c8727;
    --upei-dark-red: #691803;
    --upei-red: #8c2004;
    --upei-orange: #fbb040;
    --brand: hsl(210 90% 50%);
    --brand: #8c2004;
  }
}