/* ========================================================================== ATA OA — Design tokens -------------------------------------------------------------------------- Canonical CSS custom properties. Every other stylesheet MUST consume these via var(--...) and MUST NOT hardcode hex values or spacing pixels. Source of truth: oa.ataasia.com/ATA/docs/design/ATA-OA-DESIGN-SYSTEM.md Version: 6.0 (2026-07-07) — "Gold-Forward, Website-Unified". Warm neutrals restored (sand borders #e6e1d6, warm off-white page #faf9f6) to match the public ATA website; gold is promoted from accent-only to the primary interactive surface (light sidebar + gold active states, gold-tint table headers, gold buttons with dark gold-brown text). Charcoal is now reserved for body text and headings only. Aligns OA with the future unified platform. (v5.0 2026-07-06 "Clean & Bright" used cool neutrals + charcoal chrome — superseded. v4.0 2026-06-10 was the first Warm Gold & Charcoal unification.) ========================================================================== Load order (in Common/page/header.php): 1. bootstrap.min.css 2. ata-tokens.css <- THIS FILE (must come before any brand CSS) 3. app.css 4. icons.css 5. ata-brand.css 6. ata-tables.css 7. ata-forms.css 8. dark-theme.css (optional override) v3.2 readability targets (audience: theological administrators 50-75 yrs): - Base body text 16 px (was 15 px) - Form labels 15 px / 600 - Form controls 48 px tall, 16 px text, 11/14 px padding - Primary buttons 48 px tall, 16 px text - Action icon buttons 40 x 40 px hit area - Line height (body) 1.65 - Focus ring 4 px Navy (was 3 px) for visibility ========================================================================== */ :root { /* ------------------------------------------------------------------------ Color: Primary brand (§2.1) 2026-06-10: Rebranded Emerald → Warm Charcoal + Amber-Gold to match the public ATA website (ata-secure-site, June 9 palette: gold accents over warm charcoal/ink). Token NAMES are retained (--ata-navy*) for backward compatibility with every consumer; only the VALUES changed. "--ata-navy" now holds the warm-charcoal brand primary. Use --ata-primary (aliased below) in new code. ------------------------------------------------------------------------ */ --ata-navy: #2b2620; /* brand primary — warm charcoal (was emerald #14463a) */ --ata-navy-light: #3a3128; /* deep gold-brown — hovers, links (was #1f5145) */ --ata-navy-dark: #161616; /* ink — active/pressed (was #122019) */ --ata-gold: #d18f12; /* amber-gold, matches website Option A 2026-06-11 (was #e8a21f) */ --ata-gold-bright: #e0ac00; /* bright gold — highlights / CTAs (matches website site.css) */ --ata-gold-light: #fdf4dd; /* pale gold tint (was #fbf3dc) */ --ata-gold-strong: #a8730a; /* deep amber — hovers, borders, on-gold text */ --ata-gold-deep: #7a5600; /* deep gold-brown — readable text on gold surfaces */ --ata-on-gold: #2a1d00; /* v6: near-black gold-brown — button/label text on solid gold (AA on #d18f12) */ /* Brand-neutral aliases — prefer these in new code. */ --ata-primary: var(--ata-navy); --ata-primary-light: var(--ata-navy-light); --ata-primary-dark: var(--ata-navy-dark); /* ------------------------------------------------------------------------ Color: Neutrals (§2.2) — v4: warm neutrals matching the public website (was the cool slate family #1e293b/#334155/#64748b/#e2e8f0/#f4f6f9/#f8fafc) ------------------------------------------------------------------------ */ --ata-ink: #161616; /* headings */ --ata-body: #222222; /* body text */ --ata-muted: #555555; /* captions, placeholder, metadata */ --ata-border: #e6e1d6; /* form borders, card outlines (v6: warm sand, unified with public website --ata-border) */ --ata-surface: #ffffff; /* cards, modals, panels */ --ata-page: #faf9f6; /* app page background (v6: warm off-white, matches website --ata-soft) */ --ata-subtle: #f7f5f0; /* zebra rows, disabled input bg (v6: warm, matches website warm-neutral) */ /* ------------------------------------------------------------------------ Color: Semantic status (§2.3) One family per accreditation status code. Never mix. ------------------------------------------------------------------------ */ --ata-success-bg: #d1fae5; --ata-success-text: #065f46; --ata-success-border: #7abf8d; --ata-info-bg: #dbeafe; --ata-info-text: #1e40af; --ata-info-border: #93c5fd; --ata-warning-bg: #fef3c7; --ata-warning-text: #92400e; --ata-warning-border: #fcd34d; --ata-danger-bg: #fee2e2; --ata-danger-text: #991b1b; --ata-danger-border: #fca5a5; --ata-neutral-bg: #f1f5f9; --ata-neutral-text: #475569; --ata-neutral-border: #cbd5e1; --ata-teal-bg: #ccfbf1; --ata-teal-text: #065f46; --ata-teal-border: #5eead4; --ata-violet-bg: #ede9fe; --ata-violet-text: #5b21b6; --ata-violet-border: #c4b5fd; /* ------------------------------------------------------------------------ Typography (§3) ------------------------------------------------------------------------ */ --ata-font-sans: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --ata-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", "Courier New", monospace; --ata-font-pdf: Helvetica, Arial, sans-serif; /* Type scale — v3 senior-friendly (root html font-size stays 16 px). Bumped one step for body, labels and helper text so 50–75 yr-old administrators do not have to lean in. Headings ride the same scale so the visual hierarchy still reads as institutional, not bloated. */ --ata-fs-display: 2.75rem; /* 44 px — PDF cover only */ --ata-fs-h1: 2.25rem; /* 36 px — page title */ --ata-fs-h2: 1.625rem; /* 26 px — section heading */ --ata-fs-h3: 1.25rem; /* 20 px — subsection / card title */ --ata-fs-body-lg: 1.125rem; /* 18 px — lead paragraph, dashboard cards */ --ata-fs-body: 1rem; /* 16 px — standard body, inputs, buttons */ --ata-fs-small: 0.9375rem; /* 15 px — labels, helper text */ --ata-fs-xs: 0.8125rem; /* 13 px — uppercase labels, table headers */ --ata-fs-code: 0.9375rem; /* Line heights — looser for readability at distance */ --ata-lh-heading: 1.20; --ata-lh-body: 1.65; --ata-lh-tight: 1.40; /* Weights */ --ata-fw-regular: 400; --ata-fw-medium: 500; --ata-fw-semibold: 600; --ata-fw-bold: 700; /* ------------------------------------------------------------------------ Spacing — 4 px base grid (§4) — v3 bumped one step for breathing room ------------------------------------------------------------------------ */ --ata-space-xxs: 4px; --ata-space-xs: 8px; --ata-space-sm: 12px; --ata-space-md: 18px; /* was 16 — base card / form rhythm */ --ata-space-lg: 28px; /* was 24 — section gap */ --ata-space-xl: 40px; /* was 32 */ --ata-space-2xl: 56px; /* was 48 */ --ata-space-3xl: 72px; /* was 64 */ /* Form grid */ --ata-grid-gap-y: 20px; --ata-grid-gap-x: 28px; /* Card padding */ --ata-card-pad: 24px; /* ------------------------------------------------------------------------ Control sizing tokens (v3) — single source of truth so every input, select, button, and icon-button is the same height. ------------------------------------------------------------------------ */ --ata-control-h: 48px; /* inputs, selects, primary buttons */ --ata-control-h-sm: 40px; /* small / table-action buttons */ --ata-control-pad-y: 11px; --ata-control-pad-x: 14px; --ata-control-icon-btn: 40px; /* square hit area for action icons */ /* ------------------------------------------------------------------------ Radius (§6) ------------------------------------------------------------------------ */ --ata-radius-sm: 8px; /* buttons, inputs (v4: 6 → 8, website softness) */ --ata-radius-md: 14px; /* cards, panels (v4: 10 → 14, matches website --ata-radius) */ --ata-radius-pill: 20px; /* status pills */ /* ------------------------------------------------------------------------ Shadows (§6.3) ------------------------------------------------------------------------ */ --ata-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06), 0 4px 16px rgba(16, 24, 40, 0.04); /* v5: cool neutral shadows */ --ata-shadow-card-hover: 0 4px 12px rgba(16, 24, 40, 0.10), 0 8px 24px rgba(16, 24, 40, 0.06); --ata-shadow-focus: 0 0 0 4px rgba(43, 38, 32, 0.25); /* v3: thicker for low-vision users (v4: warm charcoal) */ /* ------------------------------------------------------------------------ Layout (§5) ------------------------------------------------------------------------ */ --ata-container-max: 1200px; --ata-sidebar-w: 250px; --ata-sidebar-w-collapsed: 56px; --ata-topbar-h: 60px; /* ------------------------------------------------------------------------ Transitions ------------------------------------------------------------------------ */ --ata-transition-fast: 150ms ease; --ata-transition: 200ms ease; /* ------------------------------------------------------------------------ Z-index scale ------------------------------------------------------------------------ */ --ata-z-sticky: 100; --ata-z-overlay: 900; --ata-z-modal: 1000; --ata-z-toast: 1100; } /* ========================================================================== Dark mode overrides (§2.4) Only the neutrals + primary shift. Brand accent stays. ========================================================================== */ [data-theme="dark"], body.dark-theme { --ata-ink: #f5f3ef; --ata-body: #e8e5e0; --ata-muted: #a8a299; --ata-border: rgba(255, 255, 255, 0.10); --ata-surface: #1c1a17; --ata-page: #161513; --ata-subtle: #262420; --ata-navy: #8a6d3b; /* raised warm bronze for contrast on dark (was raised emerald) */ --ata-navy-light: #a9854a; } /* ========================================================================== Reusable utility classes (consume tokens) Keep this section minimal — prefer Bootstrap utilities where they match. ========================================================================== */ /* Status pills — v3: bumped to 14 px so they remain readable inside dense table rows without truncating the accreditation status string. */ .pill { display: inline-flex; align-items: center; gap: var(--ata-space-xxs); padding: 6px var(--ata-space-sm); border-radius: var(--ata-radius-pill); font-size: var(--ata-fs-small); font-weight: var(--ata-fw-semibold); line-height: 1.2; white-space: nowrap; } .pill-success { background: var(--ata-success-bg); color: var(--ata-success-text); } .pill-info { background: var(--ata-info-bg); color: var(--ata-info-text); } .pill-warning { background: var(--ata-warning-bg); color: var(--ata-warning-text); } .pill-danger { background: var(--ata-danger-bg); color: var(--ata-danger-text); } .pill-neutral { background: var(--ata-neutral-bg); color: var(--ata-neutral-text); } .pill-teal { background: var(--ata-teal-bg); color: var(--ata-teal-text); } .pill-violet { background: var(--ata-violet-bg); color: var(--ata-violet-text); } /* Focus ring — v3: thicker outline + larger offset so keyboard navigation is obvious to low-vision users. Never override or remove this. */ :focus-visible { outline: 4px solid var(--ata-navy); outline-offset: 2px; box-shadow: var(--ata-shadow-focus); } /* ========================================================================== v3 Senior-mode override — opt-in via . Bumps the type scale one more notch (≈12.5%) without touching color, spacing, or layout, so any user can switch their session into "comfortable reading" mode from the user menu without a page rebuild. ========================================================================== */ body.ata-large-text { --ata-fs-display: 3.0rem; --ata-fs-h1: 2.5rem; --ata-fs-h2: 1.875rem; --ata-fs-h3: 1.4375rem; --ata-fs-body-lg: 1.25rem; --ata-fs-body: 1.125rem; /* 18 px */ --ata-fs-small: 1.0625rem; /* 17 px */ --ata-fs-xs: 0.9375rem; /* 15 px */ --ata-control-h: 52px; --ata-control-h-sm: 44px; --ata-control-icon-btn: 44px; } /* Empty state */ .empty-state { padding: var(--ata-space-xl) var(--ata-space-lg); text-align: center; color: var(--ata-muted); } .empty-state__title { font-size: var(--ata-fs-h3); font-weight: var(--ata-fw-semibold); color: var(--ata-body); margin-bottom: var(--ata-space-xs); } /* Required field indicator */ .required-marker { color: var(--ata-danger-text); margin-left: var(--ata-space-xxs); }