/* =====================================================================
Google theme — the look for personal / GDE guides.
---------------------------------------------------------------------
Load BEFORE shared.css:
This file may contain ONLY token definitions. If a design change here
needs a rule, the rule in shared.css is missing a token — add the token
instead. ../check-theme.sh enforces that shared.css stays structure-only.
===================================================================== */
/* ---------------------------------------------------------------------------
Light scheme — the default. The dark overrides sit at the bottom of the file.
These are ROLE names, not brand names: no rule anywhere consumes "Google
blue" because it is Google's blue, only because it is the accent slot.
--------------------------------------------------------------------------- */
:root {
/* Accent + semantic roles */
--accent: #1A73E8; /* Blue 600 — the blue Google uses for interactive
elements. Blue 500 (#4285F4) gives white text only
3.56:1; this gives 4.51:1. */
--accent-hover: #1557B0; /* Blue 800 */
--danger: #EA4335; /* Red 600 */
--warning: #FBBC04;
--success: #34A853;
--on-accent: #FFFFFF; /* text/icons on an --accent fill; inverts in dark
mode, because --accent itself does */
--on-dark: #FFFFFF; /* text/icons on a surface that is dark in BOTH
schemes — the code block and the featured tile.
Deliberately absent from the dark block below:
not inverting is the whole point of the token. */
/* Typography */
--font-body: 'Google Sans Text', 'Roboto', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
/* One display stack, not two. Before tokenizing, h1/h3 carried an extra
-apple-system fallback that the other seven display rules lacked — an
accident, not a decision. Unified on the fuller stack: it only matters
when both Google Sans and Roboto fail to load, where falling back to the
system UI font beats generic sans-serif. */
--font-display: 'Google Sans Display', 'Google Sans', 'Roboto', -apple-system, sans-serif;
--font-mono: 'Google Sans Code', 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Letter spacing. Google Sans is drawn to sit at its natural spacing, so
both are `normal`. The tokens exist because Speed Kit's dictionary
specifies tightened tracking, and that has to be expressible without
either theme touching a rule. */
--tracking-heading: normal;
--tracking-body: normal;
/* Themed surfaces */
--code-bg: #202124; /* dark in both schemes — see shared.css */
--code-fg: #E8EAED;
--featured-bg: linear-gradient(135deg, #1A73E8 0%, #1557B0 100%);
/* was #1A73E8 -> #4285F4; the light end put white
tile text at 3.56:1. Now dark across the ramp. */
/* Low-alpha derivations. Each is an existing token at reduced opacity;
they are spelled out rather than computed because a theme may want a
different tint than its own accent (Speed Kit's 4% blue on white is
heavier than Google's). Keep them in sync with the tokens they derive
from — check-theme.sh cannot verify that for you. */
--scrim: rgba(32, 33, 36, 0.45); /* --grey-900 @ 45%, sidebar backdrop */
--accent-tint: rgba(26, 115, 232, 0.04); /* --accent @ 4%, tab hover */
--warning-rule: rgba(163, 90, 0, 0.18); /* --yellow-text @ 18%, hairline */
--warning-border: rgba(163, 90, 0, 0.25); /* --yellow-text @ 25% */
/* The reading-progress fill. Google gets the four-colour brand stripe;
other themes set a solid colour. The track stays --grey-300 and the
height stays 6px in shared.css — both are load-bearing, see README. */
--progress-fill: linear-gradient(
to right,
var(--accent) 0%, var(--accent) 25%,
var(--danger) 25%, var(--danger) 50%,
var(--warning) 50%, var(--warning) 75%,
var(--success) 75%, var(--success) 100%
);
/* Deprecated brand aliases. Six guide pages outside this repo still say
var(--google-blue) etc. Retiring those is a retrofit that was not scoped,
so the old names stay as aliases under the Google theme. Do not use them
in new work — they resolve to nothing under any other theme. */
--google-blue: var(--accent);
--google-red: var(--danger);
--google-yellow: var(--warning);
--google-green: var(--success);
/* Neutrals */
--grey-900: #202124;
--grey-700: #5F6368;
--grey-500: #9AA0A6;
--grey-300: #DADCE0;
--grey-200: #E8EAED;
--grey-100: #F1F3F4;
--surface: #FFFFFF;
--surface-alt: #F8F9FA;
/* Semantic shades for callouts */
--blue-bg: #E8F0FE;
--blue-text: #1967D2;
--yellow-bg: #FEF7E0;
--yellow-text: #A35A00; /* darkened; was 4.33:1 on --yellow-bg, now 4.88:1 */
--green-bg: #E6F4EA;
--green-text: #137333; /* Green 800; was 3.70:1 on --green-bg, now 5.24:1 */
--red-bg: #FCE8E6;
--red-text: #C5221F;
/* Radii + elevation */
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--shadow-card: 0 1px 2px rgba(60,64,67,.08), 0 1px 3px rgba(60,64,67,.10);
--shadow-lift: 0 4px 8px rgba(60,64,67,.10), 0 8px 24px rgba(60,64,67,.15);
}
/* ---------------------------------------------------------------------------
Dark scheme — follows the reader's OS/browser setting automatically.
Only the values that must change are repeated; everything else inherits
from the block above. Values are Google's published dark palette.
--------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root {
/* On a dark surface the light-mode blue fails contrast, so the accent
moves UP the ramp rather than down, and text on it becomes dark. */
--accent: #8AB4F8;
--accent-hover: #AECBFA;
--on-accent: #202124;
--danger: #F28B82;
--warning: #FDD663;
--success: #81C995;
/* The neutral ramp inverts: 900 is the *text* end, 100 the *fill* end. */
--grey-900: #E3E3E3; /* body text */
--grey-700: #C4C7C5; /* secondary text */
--grey-500: #9AA0A6; /* muted — legible on both, unchanged */
--grey-300: #5F6368; /* borders, progress track */
--grey-200: #3C4043; /* hairlines */
--grey-100: #2D2F31; /* hover fills */
--surface: #131314; /* page */
--surface-alt: #1E1F20; /* sidebar */
/* Callout tints go dark-with-light-text rather than light-with-dark. */
--blue-bg: #1F2A3D; --blue-text: #A8C7FA;
--yellow-bg: #3A2F14; --yellow-text: #FDD663;
--green-bg: #1B2E20; --green-text: #81C995;
--red-bg: #3B1F1D; --red-text: #F28B82;
--featured-bg: linear-gradient(135deg, #1A73E8 0%, #174EA6 100%);
--scrim: rgba(0, 0, 0, 0.6);
--accent-tint: rgba(138, 180, 248, 0.08);
--warning-rule: rgba(253, 214, 99, 0.20);
--warning-border: rgba(253, 214, 99, 0.28);
/* Shadows read as almost nothing on dark; deepen them to keep cards
separated from the page. */
--shadow-card: 0 1px 2px rgba(0,0,0,.40), 0 1px 3px rgba(0,0,0,.50);
--shadow-lift: 0 4px 8px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.55);
}
}