/** * Rogue Reigns — Design Tokens * * Naming convention aligned with the parent Venn site (public/css/styles.css) * so that a future migration to server-rendered views (Caminho C) is mostly * a path move, not a token rewrite. * * Two layers: * 1. Shared tokens — same names as parent (--bg-primary, --space-1, etc.) * with Rogue-Reigns-appropriate values (dark fantasy palette). * 2. Game-specific tokens — namespaced --rr-* (gold gradients, Cinzel font). * * Spacing is rem-based for accessibility (scales with user font size). * The parent currently uses px; equivalent values, easy aliasing later. */ :root { color-scheme: dark; /* ======================================== PALETTE — dark fantasy, gold accent ======================================== */ --bg-primary: #121212; --bg-secondary: #1A1A1A; --surface: rgba(18, 18, 18, 0.40); --surface-strong: #1E1E1E; --border: rgba(243, 243, 243, 0.08); --border-strong: rgba(243, 243, 243, 0.15); --stroke: #242424; --text-primary: #F3F3F3; --text-secondary: #CBCBCB; --text-muted: rgba(243, 243, 243, 0.5); --accent: #FED687; /* gold — replaces parent's purple */ --accent-deep: #9A7340; --accent-soft: #FFECC7; --accent-glow: rgba(254, 214, 135, 0.3); --success: #A6E3A1; --error: #F38BA8; /* Rogue-Reigns-specific extensions */ --rr-gradient-gold: linear-gradient(1deg, var(--accent-deep) -117.85%, var(--accent) 109.76%); --rr-gradient-gold-alt: linear-gradient(1deg, var(--accent-deep) -117.85%, var(--accent-soft) 109.76%); --rr-news-card-bg: rgba(18, 18, 18, 0.40); /* ======================================== TYPOGRAPHY ======================================== */ --font-display: 'Cinzel', serif; /* headings, eyebrows */ --font-body: 'Lora', serif; /* body copy */ --font-mono: ui-monospace, 'SFMono-Regular', monospace; /* Sizes — rem-based for accessibility */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.5rem; /* 40px */ --text-5xl: 3rem; /* 48px */ /* Line heights */ --leading-tight: 1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.75; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.15em; /* ======================================== SPACING — 8px grid with 4px half-steps Names mirror parent (--space-1, --space-1-5, etc.) ======================================== */ --space-0-5: 0.25rem; /* 4px */ --space-1: 0.5rem; /* 8px */ --space-1-5: 0.75rem; /* 12px */ --space-2: 1rem; /* 16px */ --space-2-5: 1.25rem; /* 20px */ --space-3: 1.5rem; /* 24px */ --space-4: 2rem; /* 32px */ --space-5: 2.5rem; /* 40px */ --space-6: 3rem; /* 48px */ --space-7: 3.5rem; /* 56px */ --space-8: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-12: 6rem; /* 96px */ --space-16: 8rem; /* 128px */ --space-24: 12rem; /* 192px */ /* ======================================== RADIUS, TRANSITIONS ======================================== */ --radius: 8px; --radius-sm: 4px; --radius-lg: 12px; --radius-xl: 16px; --transition-fast: 150ms ease-out; --transition-base: 250ms ease-out; --transition-slow: 400ms ease-out; /* ======================================== LAYOUT CONSTRAINTS ======================================== */ --container-max: 90rem; /* 1440px */ --container-narrow: 71.25rem; /* 1140px */ --content-max: 81.625rem; /* 1306px */ --content-narrow: 54.375rem; /* 870px */ /* ======================================== RESPONSIVE PADDING — mobile-first ======================================== */ --padding-page-x: 1rem; /* 16px */ --padding-section-y: 3rem; /* 48px */ --padding-component: 1.5rem; /* 24px */ /* ======================================== ASPECT RATIOS ======================================== */ --aspect-hero: 16 / 9; --aspect-card: 4 / 3; --aspect-news-banner: 1440 / 465; --aspect-news-image: 922 / 519.09; /* ======================================== Z-INDEX SCALE ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-navbar: 9999; } /* Tablet+ */ @media (min-width: 768px) { :root { --padding-page-x: 4rem; /* 64px */ --padding-section-y: 6rem; /* 96px */ } } /* Desktop */ @media (min-width: 1024px) { :root { --padding-page-x: 8.5rem; /* 136px */ } } /* ======================================== UTILITY CLASSES ======================================== */ .container-responsive { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--padding-page-x); padding-right: var(--padding-page-x); } .container-narrow { width: 100%; max-width: var(--container-narrow); margin-left: auto; margin-right: auto; padding-left: var(--padding-page-x); padding-right: var(--padding-page-x); } .content-max { max-width: var(--content-max); } .content-narrow { max-width: var(--content-narrow); } /* Responsive type — fluid with min/max */ .text-responsive-xs { font-size: clamp(0.75rem, 1vw, 0.875rem); } .text-responsive-sm { font-size: clamp(0.875rem, 1.2vw, 1rem); } .text-responsive-base { font-size: clamp(1rem, 1.5vw, 1.125rem); } .text-responsive-lg { font-size: clamp(1.125rem, 2vw, 1.25rem); } .text-responsive-xl { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } .text-responsive-2xl { font-size: clamp(1.5rem, 3vw, 2rem); } .text-responsive-3xl { font-size: clamp(1.875rem, 4vw, 2.5rem); } .text-responsive-4xl { font-size: clamp(2.5rem, 5vw, 3rem); } .text-responsive-5xl { font-size: clamp(3rem, 6vw, 4rem); } .section-spacing-y { padding-top: var(--padding-section-y); padding-bottom: var(--padding-section-y); } .component-padding { padding: var(--padding-component); } /* ======================================== TYPOGRAPHY UTILITIES — replace inline-style font/color tokens that used to be JSON-bound ======================================== */ .rr-text { font-family: var(--font-body); color: var(--text-primary); font-feature-settings: 'liga' off, 'clig' off; } .rr-link { font-family: var(--font-body); color: var(--text-primary); font-feature-settings: 'liga' off, 'clig' off; } .rr-display { font-family: var(--font-display); color: var(--text-primary); font-feature-settings: 'liga' off, 'clig' off; font-variant: small-caps; } .rr-display-gold { font-family: var(--font-display); font-feature-settings: 'liga' off, 'clig' off; font-variant: small-caps; background: var(--rr-gradient-gold); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 38px 11px rgba(0, 0, 0, 0.00), 0 24px 10px rgba(0, 0, 0, 0.04), 0 14px 8px rgba(0, 0, 0, 0.13), 0 6px 6px rgba(0, 0, 0, 0.21), 0 2px 3px rgba(0, 0, 0, 0.25); } .rr-eyebrow { font-family: var(--font-body); color: var(--accent); letter-spacing: var(--tracking-widest); text-transform: uppercase; font-size: var(--text-sm); font-feature-settings: 'liga' off, 'clig' off; } /* Body-text gold — Lora italic + gradient, no shadow / no small-caps. Distinct from .rr-display-gold which is for Cinzel section titles. */ .rr-text-gold { font-family: var(--font-body); background: var(--rr-gradient-gold); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-feature-settings: 'liga' off, 'clig' off; } /* ======================================== BREAKPOINTS — reference (Tailwind-aligned) sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px ======================================== */