/* ============================================================
PageNet β Design Tokens
System: "Field" (warm stone + teal) Β· Domain: pagenet.app
Hand-off reference. Values are pulled directly from the
PageNet design source, not approximated.
============================================================ */
:root {
/* ---------- CORE PALETTE (Field) ---------- */
--color-ink: #2A2A26; /* near-black text, app-icon glyphs */
--color-primary: #3F7D79; /* teal β nav, buttons, selection, links */
--color-accent: #9B7C52; /* warm brown β secondary highlight */
--color-accent-light: #CBB48F; /* brown on dark/teal grounds (favicons) */
--color-muted: #76705F; /* secondary text on stone */
--color-stone: #ECE6D8; /* primary surface tint, app-icon tiles */
/* ---------- NEUTRALS / SURFACES ---------- */
--color-bg: #FBF9F3; /* warm page background */
--color-surface: #FFFFFF; /* cards / sheets */
--color-border: #E2DCCD; /* stone hairline border */
--color-border-soft: #F0EBE0; /* faint divider on stone */
--color-text: #2A2A26; /* = ink */
--color-text-secondary: #76705F; /* = muted */
--color-text-tertiary: #A59F8E; /* captions, hex labels, timestamps */
/* On-primary (text/icons sitting on teal) */
--color-on-primary: #FFFFFF;
--color-on-primary-muted: rgba(255,255,255,.72);
/* ---------- PEOPLE / IDENTITY ----------
Color is the identity layer ONLY. Always round avatar +
memoji face + personal emoji. Teal is reserved (no person
uses it) so it stays safe for active/selected chrome. */
--person-shared: #676464; /* All / Shared π */
--person-nelson: #71846B; /* Nelson π°οΈ (admin) ~ Field sage */
--person-aubrey: #A6A6A6; /* Aubrey βοΈ (admin) */
--person-kam: #7E6A9B; /* Kam π (admin) */
--person-will: #58748F; /* Will π€ */
--person-jay: #A24646; /* Jay π¬ */
--person-tina: #96B1CB; /* Tina πͺ© */
--person-grins: #CBBB54; /* Grins π§Ά */
--person-grumps: #CB8852; /* Grumps π¦
*/
--person-guest: #A8813E; /* Guest π―οΈ */
/* ---------- STATUS / SEMANTIC SETS ----------
Each status renders as pill = bg + text + 1px border, with
a leading emoji + word. Six tonal families: */
/* Warning / pending (To do, Due today, Due soon) */
--status-warning-bg: #F6EFDA;
--status-warning-text: #876C2A;
--status-warning-border: #ECE0C0;
/* Info / in-progress (In progress, Claimed) */
--status-info-bg: #EAF0F4;
--status-info-text: #456178;
--status-info-border: #D6E1E9;
/* Success (Done, Approved) */
--status-success-bg: #E9F2EA;
--status-success-text: #3F6B46;
--status-success-border: #D2E4D4;
/* Danger (Overdue, Blocked, Changes requested) */
--status-danger-bg: #F6E7E4;
--status-danger-text: #9A4334;
--status-danger-border: #ECD3CD;
/* Review (Needs review) */
--status-review-bg: #EFEAF4;
--status-review-text: #5F4F78;
--status-review-border: #E0D6EA;
/* Neutral (Scheduled, Cancelled, On hold, Snoozed, Draft, Archivedβ¦) */
--status-neutral-bg: #EEF0F1;
--status-neutral-text: #5A6168;
--status-neutral-border: #E0E3E5;
/* Selection tint (teal @ 7%) β selected chips, active rows */
--color-primary-tint: rgba(63,125,121,.07);
/* ---------- TYPOGRAPHY ----------
Four families, each with a clear job. Load via Google Fonts. */
--font-serif: 'IBM Plex Serif', Georgia, serif; /* product headings, wordmark, card titles */
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;/* primary UI / body */
--font-display: 'Newsreader', Georgia, serif; /* editorial / marketing headlines */
--font-label: 'Public Sans', system-ui, sans-serif; /* eyebrows, labels, micro-caps */
--font-family-base: var(--font-sans);
/* Weights actually in use */
--weight-regular: 400;
--weight-medium: 500; /* default for IBM Plex Serif headings */
--weight-semibold: 600; /* emphasis / buttons / labels */
--weight-bold: 700;
/* Type scale (px, as used in the system) */
--text-display: 36px; /* Newsreader 500 β marketing h1 */
--text-h1: 28px; /* Newsreader/Plex Serif 500 β section head */
--text-h2: 22px; /* IBM Plex Serif 500 β card title */
--text-lg: 18px;
--text-body: 15px; /* default body */
--text-sm: 14px; /* dense body / list rows */
--text-xs: 13px; /* secondary / control text */
--text-caption: 12px; /* captions, chips */
--text-label: 11px; /* eyebrow β UPPERCASE, letter-spacing */
--text-micro: 10.5px; /* table micro-headers */
--leading-tight: 1.12; /* headings */
--leading-snug: 1.45;
--leading-body: 1.6; /* paragraphs */
--tracking-label: 0.14em; /* uppercase eyebrows */
--tracking-caps: 0.10em; /* micro-headers */
--tracking-tight: -0.01em;/* large display */
/* ---------- RADIUS ---------- */
--radius-pill: 999px; /* status pills, filter chips, avatars */
--radius-button: 10px; /* primary CTA */
--radius-card: 14px; /* cards, list containers */
--radius-tile-sm: 8px; /* small swatch / inline tile */
--radius-tile: 12px; /* nav header / medium tile */
--radius-icon: 11px; /* favicon / app-icon @48px */
--radius-input: 10px;
/* ---------- SPACING (4px base) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 18px;
--space-6: 22px;
--space-7: 24px;
--space-8: 34px; /* card inner padding */
/* ---------- ELEVATION / SHADOW ---------- */
--shadow-card: 0 1px 3px rgba(0,0,0,.08); /* default card lift */
--shadow-badge: 0 1px 2px rgba(0,0,0,.22); /* emoji badge on avatar */
--ring-avatar: inset 0 0 0 2px rgba(0,0,0,.12); /* memoji inset ring */
--ring-avatar-soft: inset 0 0 0 2px rgba(0,0,0,.07);
/* ---------- ICONOGRAPHY ----------
Custom line set (no third-party kit). Draw on a 24px grid. */
--icon-stroke: 1.6px; /* standard line weight */
--icon-stroke-bold: 2.2px; /* checks / emphasis */
--icon-linecap: round;
--icon-linejoin: round;
--icon-size: 24px;
/* ---------- BRAND / LOGO ---------- */
--logo-word-page: var(--color-ink); /* "Page" */
--logo-word-net: var(--color-primary); /* "Net" */
--logo-font: var(--font-serif); /* IBM Plex Serif Medium */
/* PN-interlock mark: teal P + brown N, joined at one diagonally
split node (white/teal toward P, brown toward N). */
}
/* ============================================================
FONT LOADING (Google Fonts)
============================================================ */
/*
*/
/* ============================================================
COMPONENT RECIPES (built from the tokens above)
============================================================ */
/* Primary button */
.pn-btn-primary {
display: inline-flex; align-items: center; gap: var(--space-2);
background: var(--color-primary); color: var(--color-on-primary);
font-family: var(--font-sans); font-weight: var(--weight-semibold);
font-size: var(--text-xs);
padding: 10px 16px; border-radius: var(--radius-button); border: 0;
}
/* Secondary / ghost button */
.pn-btn-ghost {
display: inline-flex; align-items: center; gap: var(--space-2);
background: transparent; color: var(--color-primary);
font-family: var(--font-sans); font-weight: var(--weight-semibold);
font-size: var(--text-xs);
padding: 10px 16px; border-radius: var(--radius-button);
border: 1.5px solid var(--color-primary);
}
/* Card */
.pn-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
padding: var(--space-5);
}
/* Eyebrow label */
.pn-eyebrow {
font-family: var(--font-label);
font-size: var(--text-label); font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-label); text-transform: uppercase;
color: #8A9097;
}
/* Status pill (set the three vars per state) */
.pn-pill {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-sans); font-weight: var(--weight-semibold);
font-size: var(--text-xs);
padding: 7px 14px; border-radius: var(--radius-pill);
background: var(--status-neutral-bg);
color: var(--status-neutral-text);
border: 1px solid var(--status-neutral-border);
}
/* Avatar β round, always. Memoji sits on the person color. */
.pn-avatar {
width: 46px; height: 46px; border-radius: var(--radius-pill);
display: flex; align-items: center; justify-content: center;
overflow: hidden; color: #fff; font-weight: var(--weight-semibold);
box-shadow: var(--ring-avatar);
}
.pn-avatar > img { width: 72%; height: 72%; object-fit: contain; }
/* App-icon tile β near-black glyph on stone */
.pn-app-tile {
border-radius: var(--radius-card);
background: var(--color-stone);
border: 1px solid var(--color-border);
color: var(--color-ink);
display: flex; align-items: center; justify-content: center;
}