/* ========================================================== CDS Journey — Redesign design tokens (Student Portal namespace) Namespace: --rd-* This file is independent of static/components/tokens.css (the existing production token file, left untouched). SOURCE OF TRUTH: the official "CDS Journey — Brand Color System" reference sheet (Primary Brand Colors / Neutral Shades / Semantic Colors / Gradients / UI Usage Examples / Typography Pairing). Every hex value below is taken directly from that sheet, not re-derived or guessed. Where this sheet's neutral scale differs from values this file used before (e.g. a slightly different grey), the sheet wins — component CSS (student.css, dashboard.css, typography.css) reads these tokens by NAME, never a literal hex, so this file is the only place a future palette correction needs to happen. PRIMARY BRAND COLORS (Core Identity): Tactical Navy #1A2B4C — primary brand: navigation, headers, key UI Olive Drab #4B5320 — secondary brand: active states, progress Valor Gold #D4AF37 — CTA/accent: buttons, key actions Uniform White #FFFFFF — main surface/background Midnight Slate #343A40 — supporting text/icons Black #1D1D1F — logo / high-contrast utility ONLY (never a general text or CTA color — Dark Text below is the general dark-text neutral) Live #A73B2E — alert/urgent: live classes, errors Lavender (#8B7FB3 / #51439A) does not appear on the official sheet above -- it is NOT a core brand color. It remains in this file only because it was explicitly kept as a MINOR, OPT-IN supporting accent carried over from the previous CDS Journey site (see section A2). Do not reach for it as a default for navigation, links, or CTAs. BREAKPOINT SCALE — two documented tracks: A) Student portal / historical redesign reference (tokens @media for type scale): <576 / 576–767 / 768–1023 / 1024–1279 / 1280+ B) Public Homepage Phase 1 lock (section CSS + .rd-container): <768 mobile | 768–1199 tablet | >=1200 desktop Intermediate 820 / 900 / 1024 / 1100 allowed sparingly. CSS custom properties cannot be referenced inside a media-query condition, so these are documented here as the canonical reference rather than defined as variables. ========================================================== */ :root { /* ================================================ A. PRIMARY BRAND COLORS (Core Identity) ================================================ */ --rd-color-navy: #1A2B4C; /* Tactical Navy — PRIMARY BRAND */ --rd-color-olive: #4B5320; /* Olive Drab — SECONDARY BRAND */ --rd-color-gold: #D4AF37; /* Valor Gold — CTA / ACCENT */ --rd-color-white: #FFFFFF; /* Uniform White — BACKGROUND */ --rd-color-slate: #343A40; /* Midnight Slate — SUPPORTING TEXT/ICONS */ --rd-color-black: #1D1D1F; /* Black — LOGO / HIGH-CONTRAST UTILITY ONLY */ --rd-color-live: #A73B2E; /* Live — ALERT / URGENT */ /* ------------------------------------------------ A1. SEMANTIC BRAND TOKENS Prefer these over the raw --rd-color-* values in component CSS — they name the ROLE a color plays, so a future palette correction only ever touches this file, never every component that used a color. ------------------------------------------------ */ --rd-brand-primary: var(--rd-color-navy); --rd-brand-secondary: var(--rd-color-olive); --rd-brand-accent: var(--rd-color-gold); --rd-color-olive-hover: #3C4319; /* darker olive for :hover on olive-filled buttons */ /* ------------------------------------------------ A2. SUPPORTING ACCENT — RETIRED for public Homepage Lavender tokens remain defined ONLY for possible student- portal / legacy bridges. Do NOT use on redesigned public Homepage sections, CTAs, links, or borders. ------------------------------------------------ */ --rd-color-lavender: #8B7FB3; --rd-color-lavender-deep: #51439A; /* ================================================ B. SURFACE COLORS B1-B2 (canvas, surface-light, surface) are the official sheet's Neutral Shades; everything else is a brand-tinted surface derived for a specific component context. ================================================ */ --rd-surface-canvas: var(--rd-color-white); /* Uniform White — main surface */ --rd-surface-default: #F8F9FB; /* Surface Light — secondary surface (body bg, subtle fills) */ --rd-surface-muted: #E9ECEF; /* Surface — a step deeper than Surface Light (dividers-adjacent fills) */ --rd-surface-brand: #F7F5FA; --rd-surface-lavender-soft: #F1EEF7; --rd-surface-gold-soft: #F5F0DF; --rd-surface-navy: var(--rd-color-navy); --rd-surface-olive-soft: #EEF1EA; /* derived: low-saturation tint of olive, for subtle badges/backgrounds */ --rd-surface-live-soft: #F6EBEA; /* derived subtle tint of Live, for the "LIVE NOW" badge treatment */ /* ================================================ C. TEXT COLORS Muted Text / Secondary Text / Dark Text are the official sheet's Neutral Shades. Dark Text (#212529) is the general body/heading text color -- distinct from --rd-color-black (#1D1D1F), which the brand sheet reserves for the logo/ high-contrast utility role only. ================================================ */ --rd-text-primary: #212529; /* Dark Text */ --rd-text-secondary: #6C757D; /* Secondary Text */ --rd-text-muted: #ADB5BD; /* Muted Text */ --rd-text-inverse: var(--rd-color-white); --rd-text-olive: var(--rd-color-olive); --rd-text-gold: var(--rd-color-gold); --rd-text-live: var(--rd-color-live); /* Heading/body color roles (used by typography.css). Named --rd-text-body-COLOR rather than --rd-text-body because --rd-text-body already exists below (section F) as the 16px body FONT-SIZE token — two different --rd-text-body customs properties can't coexist, so the color one gets a distinct name. */ --rd-text-heading: var(--rd-color-navy); --rd-text-body-color: var(--rd-color-slate); /* ================================================ D. BORDER COLORS ================================================ */ --rd-border-subtle: #DDE2E6; /* Border (official Neutral Shades) */ --rd-border-default: #CBD2D8; /* a step stronger than Border, for emphasis-but-not-brand borders */ --rd-border-lavender: #E5E1EA; --rd-border-strong: var(--rd-color-black); /* ================================================ E. STATUS COLORS (content/domain status — distinct from the generic UI feedback colors in E2 below) ================================================ */ --rd-status-live: var(--rd-color-live); --rd-status-progress: var(--rd-color-olive); --rd-status-highlight: var(--rd-color-gold); --rd-status-neutral: var(--rd-color-slate); /* ------------------------------------------------ E1. CTA / ACTION SYSTEM The official sheet's UI Usage Examples confirm this exact pairing: "Primary Button — Gold background, Navy text/icon" and "Active Navigation — Olive background, White text/icon". ------------------------------------------------ */ --rd-action-primary-bg: var(--rd-color-gold); --rd-action-primary-text: var(--rd-color-black); /* locked CTA text: #1D1D1F */ --rd-action-secondary-bg: var(--rd-color-navy); --rd-action-secondary-text: var(--rd-color-white); /* ------------------------------------------------ E2. SEMANTIC FEEDBACK COLORS (official sheet's "Semantic Colors — State colors for consistent UX"). These are GENERIC UI feedback states (form validation, alerts/toasts) — do not confuse with E's content-status tokens above (live class, progress, highlight are domain concepts, not generic feedback). Not wired into any component yet; available for when a real success/info/warning/error UI is built. ------------------------------------------------ */ --rd-color-success: #198754; --rd-color-info: #0D6EFD; --rd-color-warning: #FFC107; --rd-color-error: #DC3545; /* ------------------------------------------------ E3. INTERACTION STATES (links, focus rings, disabled) Hover ≠ Focus. Gold CTA hover/active locked to approved hex. ------------------------------------------------ */ --rd-interactive-default: var(--rd-color-navy); --rd-interactive-hover: var(--rd-color-olive); --rd-interactive-active: var(--rd-color-olive-hover); --rd-focus-ring-color: var(--rd-color-navy); --rd-focus-ring-width: 2px; --rd-focus-ring-offset: 2px; --rd-cta-focus-offset: 3px; /* primary/secondary CTA focus-visible only */ --rd-action-primary-hover-bg: #C49F28; /* locked gold hover */ --rd-action-primary-active-bg: #B08D1F; /* locked gold active */ --rd-disabled-opacity: 0.5; --rd-disabled-bg: var(--rd-border-subtle); --rd-disabled-text: var(--rd-text-muted); /* ================================================ F. TYPOGRAPHY ================================================ */ /* Font families — the official sheet's "Typography Pairing" confirms Fraunces (headings) + Inter (body), matching what this file already specified. Do not substitute (no Poppins/ Roboto/Montserrat/Arial). */ --rd-font-display: "Fraunces", Georgia, serif; --rd-font-body: "Inter", Arial, sans-serif; --rd-font-mono: "IBM Plex Mono", monospace; --rd-font-hindi: "Noto Serif Devanagari", serif; /* Font weights — semantic names so heading/body classes reference a role instead of a raw number. */ --rd-weight-regular: 400; --rd-weight-medium: 500; --rd-weight-semibold: 600; --rd-weight-bold: 700; /* Type scale — LOCKED (design-system-lock phase). --rd-text-display-xl is Hero H1, --rd-text-display-lg is H2, --rd-text-heading-xl is H3, --rd-text-heading-md is H4 (unchanged from before this phase — it already matched the locked H4 spec exactly: 18px/1.3/600). H1-H3 are genuinely RESPONSIVE tokens: mobile-first base values here, redefined inside the @media blocks at the bottom of this file for the tablet/laptop/desktop tiers. typography.css reads these tokens directly (font-size: var(--rd-text-display-xl)) and carries no breakpoint logic of its own for these three levels -- the responsive stepping lives in exactly one place. */ --rd-text-display-xl: 36px; /* H1 mobile */ --rd-text-display-xl-leading: 1.1; --rd-text-display-xl-tracking: -0.03em; --rd-text-display-lg: 30px; /* H2 mobile */ --rd-text-display-lg-leading: 1.2; --rd-text-display-lg-tracking: -0.025em; --rd-text-heading-xl: 20px; /* H3 mobile */ --rd-text-heading-xl-leading: 1.25; --rd-text-heading-xl-tracking: -0.015em; --rd-text-heading-lg: 22px; --rd-text-heading-lg-leading: 1.25; --rd-text-heading-lg-tracking: -0.01em; --rd-text-heading-md: 18px; /* H4 -- fixed at every tier */ --rd-text-heading-md-leading: 1.3; --rd-text-heading-md-tracking: 0; --rd-text-body-lg: 18px; /* Body Large -- fixed at every tier */ --rd-text-body-lg-leading: 1.6; --rd-text-body: 16px; --rd-text-body-leading: 1.6; --rd-text-body-sm: 14px; --rd-text-body-sm-leading: 1.5; --rd-text-label: 12px; --rd-text-label-leading: 1.4; --rd-text-label-tracking: 0.06em; --rd-text-caption: 12px; /* Caption: 12px/1.4/500 */ --rd-text-caption-leading: 1.4; --rd-text-meta: 13px; --rd-text-meta-leading: 1.4; /* ================================================ G. SPACING (index-based, 1 unit = 4px — aligned to the approved system's own 4/8/12/16... pixel scale) ================================================ */ --rd-space-1: 4px; --rd-space-2: 8px; --rd-space-3: 12px; --rd-space-4: 16px; --rd-space-5: 20px; --rd-space-6: 24px; --rd-space-8: 32px; --rd-space-10: 40px; --rd-space-12: 48px; --rd-space-14: 56px; --rd-space-16: 64px; --rd-space-20: 80px; --rd-space-24: 96px; --rd-space-30: 120px; /* ================================================ H. BORDER RADIUS ================================================ */ --rd-radius-sm: 8px; --rd-radius-md: 12px; /* Phase 1 lock: medium = 12px (was 14) */ --rd-radius-lg: 16px; --rd-radius-xl: 20px; --rd-radius-btn: 11px; /* primary/secondary CTA ~10–12px */ --rd-radius-pill: 999px; /* ================================================ I. SHADOWS Phase 1: prefer border + subtle elevation over heavy float. ================================================ */ --rd-shadow-sm: 0 1px 2px rgba(29, 29, 31, 0.04); --rd-shadow-subtle: 0 4px 16px rgba(26, 43, 76, 0.06); --rd-shadow-medium: 0 8px 28px rgba(26, 43, 76, 0.08); --rd-shadow-card: var(--rd-shadow-medium); --rd-shadow-elevated: 0 12px 36px rgba(29, 29, 31, 0.09); /* ================================================ J. LAYOUT DIMENSIONS ================================================ */ --rd-header-height: 64px; /* Public/marketing site header (templates/redesign/components/ public_header.html) -- a separate, taller header than the student-portal shell's --rd-header-height above; kept as its own token rather than changing the shared one, since the student-portal header was already reviewed/approved at 64px. */ --rd-public-header-height: 80px; /* Phase 1D: matches approved header reference (80px normal) */ --rd-public-header-height-scrolled: 64px; /* Phase 1D: header shrinks to this once the page is scrolled */ --rd-announcement-bar-height: 40px; --rd-sidebar-width: 240px; --rd-sidebar-width-tablet: 208px; /* ---- Canonical container (.rd-container, shared/layout.css) ---- Phase 1 homepage lock: <768px 20px 768–1199px 32px >=1200px 32px (whitespace grows; max-width stays 1280) Student/other consumers that still expect 24px tablet should migrate to this value — alignment > historical 24px. */ --rd-content-max-width: 1280px; --rd-content-padding-mobile: 20px; /* <768px */ --rd-content-padding-tablet: 32px; /* 768–1199px */ --rd-content-padding: 32px; /* >=1200px */ /* ---- Homepage section vertical rhythm (base; sections may intentionally deviate for Hero / Final CTA / Trust) ---- */ --rd-section-pad-mobile: 56px; /* ~52–68 */ --rd-section-pad-tablet: 72px; /* ~64–80 */ --rd-section-pad-desktop: 96px; /* ~88–112 */ /* Homepage public breakpoints (documented; applied in CSS @media): <768 mobile | 768–1199 tablet | >=1200 desktop Intermediate 820/900/1024/1100 allowed sparingly. */ /* ================================================ K. TRANSITIONS ================================================ */ --rd-transition-fast: 120ms ease; --rd-transition-base: 180ms ease; /* ================================================ L. GRADIENTS (official sheet marks these OPTIONAL — not currently applied by any component; available for hero sections/banners and premium CTA accents if/when a page calls for one). ================================================ */ --rd-gradient-hero: linear-gradient(135deg, var(--rd-color-navy) 0%, var(--rd-color-olive) 100%); --rd-gradient-cta: linear-gradient(135deg, var(--rd-color-gold) 0%, #E5CF87 100%); } /* ========================================================== RESPONSIVE TOKEN OVERRIDES Custom properties CAN be redefined inside a @media block (unlike inside a media-query CONDITION, which is not possible) -- this is the one place breakpoint-dependent token values live, so every consuming stylesheet stays free of duplicated breakpoint logic for these values. Only the H1/H2/H3 type-scale tokens are handled this way. The container's three padding tiers deliberately are NOT folded into one responsive token here: --rd-content-padding-mobile is read, unwrapped in a plain (non-media-query) declaration, by several existing components (announcement-bar.css, disclaimer.css) that are not part of this design-system-lock phase -- redefining the token itself per breakpoint would silently change their output too. Instead .rd-container (shared/layout.css) reads all three --rd-content-padding-* tokens directly inside its own @media blocks, so only a component that actually opts into .rd-container gets the responsive step. ========================================================== */ @media (min-width: 768px) { :root { /* H1 -- tablet */ --rd-text-display-xl: 42px; /* H2 -- tablet */ --rd-text-display-lg: 36px; /* H3 -- tablet and up */ --rd-text-heading-xl: 24px; } } @media (min-width: 1024px) { :root { /* H1 -- "smaller desktop" tier */ --rd-text-display-xl: 48px; /* H2 -- desktop (the locked spec gives H2 only 3 tiers -- mobile/tablet/desktop, no separate laptop value -- so the 40px desktop value takes over from the 1024px laptop tier rather than waiting for 1280px). */ --rd-text-display-lg: 40px; --rd-text-display-lg-leading: 1.15; } } @media (min-width: 1280px) { :root { /* H1 -- full desktop: also tightens leading 1.1 -> 1.05. */ --rd-text-display-xl: 56px; --rd-text-display-xl-leading: 1.05; } }