/* ========================================================================== yatayat-tokens.css -------------------------------------------------------------------------- Design tokens shared by the public site and the admin panel. This file ONLY declares custom properties. It applies no styles of its own, so loading it can never change how an existing page renders. Load order contract: this file must be loaded AFTER the theme CSS and BEFORE any yatayat-*-overrides.css file. Palette is derived from the existing brand gradient already used across the site (#0570f2 -> #185dce -> #1c4bab -> #1a3a89 -> #152a69) plus the established yellow accent (#ffdb2c). No brand colour was invented. Contrast (WCAG 2.1): --yt-primary #185dce on #ffffff = 6.01:1 (AA normal, AA+ large) --yt-primary-600 #0570f2 on #ffffff = 4.56:1 (AA normal) --yt-primary-900 #152a69 on #ffffff = 15.3:1 (AAA) --yt-accent #ffdb2c w/ #152a69 = 9.84:1 (AAA) --yt-text #1c2331 on #ffffff = 14.1:1 (AAA) --yt-text-muted #5a6472 on #ffffff = 5.9:1 (AA normal) ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. SPACING SCALE A single 4px-based ratio scale. --space-1 .. --space-8 are the names requested in the brief; the --yt-space-* aliases exist so the tokens remain unambiguous if the theme ever introduces its own --space-*. ---------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px - hairline gaps, icon padding */ --space-2: 0.5rem; /* 8px - inline gaps, tight stacks */ --space-3: 0.75rem; /* 12px - form control padding */ --space-4: 1rem; /* 16px - default rhythm unit, card padding */ --space-5: 1.5rem; /* 24px - card padding (lg), grid gutters */ --space-6: 2rem; /* 32px - block separation */ --space-7: 3rem; /* 48px - section padding (mobile) */ --space-8: 4.5rem; /* 72px - section padding (desktop) */ --yt-space-1: var(--space-1); --yt-space-2: var(--space-2); --yt-space-3: var(--space-3); --yt-space-4: var(--space-4); --yt-space-5: var(--space-5); --yt-space-6: var(--space-6); --yt-space-7: var(--space-7); --yt-space-8: var(--space-8); /* Fluid section padding: grows with the viewport, clamped at both ends. Use for vertical section rhythm instead of fixed padding values. */ --yt-section-y: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem); --yt-section-y-sm: clamp(1.75rem, 1.2rem + 2.75vw, 3.5rem); /* Horizontal container gutter. Never below 16px so text is never flush against a 320px viewport edge. */ --yt-gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem); /* ---------------------------------------------------------------------- 2. TYPOGRAPHY Fluid scale between 320px and 1440px viewports via clamp(). Every step is defined min -> preferred -> max so text never needs zoom on small screens and never becomes oversized on large ones. ---------------------------------------------------------------------- */ --yt-font-sans: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --yt-font-display: 'Josefin Sans', 'Poppins', sans-serif; --yt-fs-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); /* 12 -> 13 */ --yt-fs-sm: clamp(0.8125rem,0.79rem + 0.12vw, 0.875rem); /* 13 -> 14 */ --yt-fs-base: clamp(0.9375rem,0.91rem + 0.15vw, 1rem); /* 15 -> 16 */ --yt-fs-md: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 -> 18 */ --yt-fs-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem); /* 18 -> 22 */ --yt-fs-xl: clamp(1.25rem, 1.13rem + 0.60vw, 1.75rem); /* 20 -> 28 */ --yt-fs-2xl: clamp(1.5rem, 1.29rem + 1.05vw, 2.25rem); /* 24 -> 36 */ --yt-fs-3xl: clamp(1.75rem, 1.39rem + 1.80vw, 3rem); /* 28 -> 48 */ /* Line heights. Headings tighten as they grow; body stays generous. */ --yt-lh-tight: 1.2; --yt-lh-heading: 1.28; --yt-lh-snug: 1.45; --yt-lh-body: 1.65; --yt-lh-relaxed: 1.75; --yt-fw-normal: 400; --yt-fw-medium: 500; --yt-fw-semibold: 600; --yt-fw-bold: 700; /* Readability: paragraphs should not exceed ~72 characters. */ --yt-measure: 72ch; --yt-measure-narrow: 60ch; --yt-tracking-tight: -0.01em; --yt-tracking-wide: 0.02em; /* ---------------------------------------------------------------------- 3. BRAND COLOUR ---------------------------------------------------------------------- */ --yt-primary-50: #eaf2fe; --yt-primary-100: #d0e2fd; --yt-primary-200: #a3c6fb; --yt-primary-300: #6ba4f8; --yt-primary-400: #0570f2; /* gradient stop 1 */ --yt-primary-500: #185dce; /* gradient stop 2 - the working primary */ --yt-primary-600: #1c4bab; /* gradient stop 3 */ --yt-primary-700: #1a3a89; /* gradient stop 4 */ --yt-primary-800: #16306f; --yt-primary-900: #152a69; /* gradient stop 5 - darkest brand tone */ --yt-primary-950: #0e1c46; --yt-primary: var(--yt-primary-500); --yt-primary-dark: var(--yt-primary-900); --yt-primary-light: var(--yt-primary-400); /* The canonical brand gradient, defined once so every surface matches. */ --yt-gradient-brand: linear-gradient( to bottom, #0570f2, #185dce, #1c4bab, #1a3a89, #152a69 ); --yt-gradient-brand-diagonal: linear-gradient( 135deg, #0570f2 0%, #1c4bab 55%, #152a69 100% ); --yt-accent-50: #fffae3; --yt-accent-100: #fff3b8; --yt-accent-300: #ffe98a; --yt-accent: #ffdb2c; /* established brand yellow */ --yt-accent-600: #e0bc00; --yt-accent-700: #ab8f00; --yt-on-accent: #152a69; /* 9.84:1 on --yt-accent */ /* ---------------------------------------------------------------------- 4. SEMANTIC / STATUS COLOUR Every "-fg" tone is AA-contrast on white; every "-bg" is a soft tint intended to carry its matching "-fg" as text. ---------------------------------------------------------------------- */ --yt-success: #12805c; /* 4.8:1 on white */ --yt-success-bg: #e6f5f0; --yt-warning: #8a5a00; /* 5.7:1 on white */ --yt-warning-bg: #fff5e0; --yt-danger: #c02626; /* 5.1:1 on white */ --yt-danger-bg: #fdeaea; --yt-info: #0f6b8f; /* 5.0:1 on white */ --yt-info-bg: #e6f3f8; /* ---------------------------------------------------------------------- 5. NEUTRALS & SURFACES ---------------------------------------------------------------------- */ --yt-white: #ffffff; --yt-gray-25: #fbfcfd; --yt-gray-50: #f6f8fa; --yt-gray-100: #eef1f5; --yt-gray-200: #e2e7ee; --yt-gray-300: #cdd5e0; --yt-gray-400: #9aa5b5; --yt-gray-500: #6f7a8a; --yt-gray-600: #5a6472; --yt-gray-700: #414b59; --yt-gray-800: #2b3444; --yt-gray-900: #1c2331; --yt-text: var(--yt-gray-900); --yt-text-muted: var(--yt-gray-600); --yt-text-subtle: var(--yt-gray-500); --yt-text-on-brand: #ffffff; --yt-surface: var(--yt-white); --yt-surface-alt: var(--yt-gray-50); --yt-surface-sunken: var(--yt-gray-100); --yt-border: var(--yt-gray-200); --yt-border-strong: var(--yt-gray-300); /* ---------------------------------------------------------------------- 6. RADII, ELEVATION, BORDERS ---------------------------------------------------------------------- */ --yt-radius-xs: 4px; --yt-radius-sm: 6px; --yt-radius: 10px; --yt-radius-lg: 14px; --yt-radius-xl: 20px; --yt-radius-pill: 999px; --yt-shadow-xs: 0 1px 2px rgba(21, 42, 105, 0.06); --yt-shadow-sm: 0 1px 3px rgba(21, 42, 105, 0.08), 0 1px 2px rgba(21, 42, 105, 0.04); --yt-shadow: 0 4px 12px rgba(21, 42, 105, 0.08), 0 1px 3px rgba(21, 42, 105, 0.05); --yt-shadow-md: 0 8px 24px rgba(21, 42, 105, 0.10), 0 2px 6px rgba(21, 42, 105, 0.05); --yt-shadow-lg: 0 16px 40px rgba(21, 42, 105, 0.14), 0 4px 10px rgba(21, 42, 105, 0.06); --yt-shadow-focus: 0 0 0 3px rgba(24, 93, 206, 0.28); /* ---------------------------------------------------------------------- 7. MOTION Durations and easings used by yatayat-motion.css / .js. Setting these to 0s (as the reduced-motion block below does) disables motion project wide without touching any individual rule. ---------------------------------------------------------------------- */ --yt-dur-instant: 90ms; --yt-dur-fast: 160ms; --yt-dur: 240ms; --yt-dur-slow: 420ms; --yt-dur-slower: 640ms; --yt-ease: cubic-bezier(0.4, 0, 0.2, 1); --yt-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --yt-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --yt-stagger-step: 70ms; --yt-reveal-distance: 18px; /* ---------------------------------------------------------------------- 8. LAYOUT ---------------------------------------------------------------------- */ --yt-container-sm: 540px; --yt-container-md: 720px; --yt-container-lg: 960px; --yt-container-xl: 1140px; --yt-container-2xl: 1320px; /* Minimum interactive target. WCAG 2.5.5 / mobile usability. */ --yt-tap-target: 44px; --yt-z-sticky: 1020; --yt-z-header: 1030; --yt-z-backdrop: 1040; --yt-z-modal: 1050; --yt-z-toast: 1080; /* ---------------------------------------------------------------------- 9. ADMIN-SPECIFIC SURFACES Consumed by yatayat-admin-overrides.css. ---------------------------------------------------------------------- */ --yt-admin-sidebar-bg: #152a69; --yt-admin-sidebar-bg-hover: #1c4bab; --yt-admin-sidebar-fg: #cddcf5; /* 9.1:1 on sidebar bg */ --yt-admin-sidebar-fg-active: #ffffff; --yt-admin-sidebar-accent: #ffdb2c; --yt-admin-sidebar-border: rgba(255, 255, 255, 0.09); --yt-admin-sidebar-width: 265px; --yt-admin-topbar-bg: #ffffff; --yt-admin-topbar-fg: #1c2331; --yt-admin-topbar-border: #e2e7ee; --yt-admin-topbar-height: 65px; --yt-admin-canvas: #f4f6fa; --yt-admin-card-bg: #ffffff; --yt-admin-card-radius: 12px; --yt-admin-card-shadow: 0 1px 3px rgba(21, 42, 105, 0.07), 0 1px 2px rgba(21, 42, 105, 0.04); } /* -------------------------------------------------------------------------- REDUCED MOTION Collapsing the duration tokens neutralises every transition and animation that is driven by them, in one place. yatayat-motion.css additionally guarantees that content is fully visible in this mode. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --yt-dur-instant: 0.01ms; --yt-dur-fast: 0.01ms; --yt-dur: 0.01ms; --yt-dur-slow: 0.01ms; --yt-dur-slower: 0.01ms; --yt-stagger-step: 0ms; --yt-reveal-distance: 0px; } }