/** * Asterion Bricks — Design tokens * * Source of truth for the design system. Every component, every utility, * every Bricks override references variables defined here. * * Reference : Design Handoff Specification (livrable 2/2), section 2. * * Hard rule : NEVER hardcode a color, spacing, radius, or duration in any * other file. If it's not yet a token, add it here first, then use it. */ /* ============================================================================ Self-hosted fonts (RGPD — no Google Fonts CDN) Drop the .woff2 files into ../fonts/ and these declarations pick them up. See ../fonts/README.md for download instructions. ============================================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/Inter-Variable.woff2") format("woff2-variations"), url("../fonts/Inter-Variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/Inter-Variable-Italic.woff2") format("woff2-variations"), url("../fonts/Inter-Variable-Italic.woff2") format("woff2"); } /* Inter Display is intentionally NOT registered as its own @font-face here. Since Inter 4.x, "Display" optical sizing is baked into the main variable font via the `opsz` axis. The CSS stack `"Inter Display", "Inter", ...` in --font-display falls through to "Inter" (registered above), so headlines pick up the correct file with no 404 noise. If a separate InterDisplay-Variable.woff2 is dropped into ../fonts/ later (e.g. from the rsms.me extras package), uncomment the block below. @font-face { font-family: "Inter Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/InterDisplay-Variable.woff2") format("woff2-variations"), url("../fonts/InterDisplay-Variable.woff2") format("woff2"); } */ /* ============================================================================ Tokens ============================================================================ */ :root { /* ---- BRAND COLORS ---- */ --color-brand-navy: #0B1F3A; --color-brand-navy-deep: #081427; --color-brand-gold: #C9A45A; --color-brand-gold-soft: #E0C892; --color-alert-red: #C8102E; /* ---- NEUTRALS ---- */ --color-text-primary: #0B1F3A; --color-text-secondary: #3E4C5E; --color-text-muted: #6B7785; --color-text-on-dark: #FFFFFF; --color-text-on-dark-muted: #B6BFCC; --color-bg-default: #FFFFFF; --color-bg-subtle: #F5F7FA; --color-bg-elevated: #FFFFFF; --color-bg-dark: #0B1F3A; --color-bg-dark-elevated: #13294B; --color-border-default: #CCD3DC; --color-border-subtle: #E5E9EE; --color-border-on-dark: #1F3252; /* ---- SEMANTIC COLORS ---- */ --color-success: #1F8B4C; --color-warning: #C29327; --color-error: #C8102E; --color-info: #1E5BA8; /* ---- TYPOGRAPHY: families ---- */ --font-display: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- TYPOGRAPHY: sizes (rem-based, root = 16px) ---- */ --text-overline: 0.75rem; /* 12px */ --text-body-sm: 0.875rem; /* 14px */ --text-body-md: 1rem; /* 16px */ --text-body-lg: 1.25rem; /* 20px */ --text-h4: 1.125rem; /* 18px */ --text-h3: 1.375rem; /* 22px */ --text-h2: 1.75rem; /* 28px */ --text-h1: 2.25rem; /* 36px */ --text-display-md: 2.75rem; /* 44px */ --text-display-lg: 3.5rem; /* 56px */ --text-display-xl: 4.5rem; /* 72px */ /* ---- TYPOGRAPHY: line heights (per Design Handoff section 2.2) ---- */ --leading-display-xl: 1.05; --leading-display-lg: 1.10; --leading-display-md: 1.15; --leading-h1: 1.20; --leading-h2: 1.25; --leading-h3: 1.30; --leading-h4: 1.35; --leading-body-lg: 1.55; --leading-body-md: 1.60; --leading-body-sm: 1.50; --leading-overline: 1.40; /* ---- TYPOGRAPHY: weights ---- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ---- TYPOGRAPHY: tracking ---- */ --tracking-tight: -0.02em; /* display */ --tracking-snug: -0.01em; /* headings */ --tracking-normal: 0; /* body */ --tracking-overline: 0.08em; /* eyebrows, all-caps */ /* ---- SPACING (8-pt grid) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ---- LAYOUT: container & grid ---- */ --container-max: 1280px; --container-padding-mobile: 1.5rem; /* 24px */ --container-padding-tablet: 2rem; /* 32px */ --container-padding-desktop: 4rem; /* 64px */ --gutter-mobile: 1rem; /* 16px */ --gutter-tablet: 1rem; /* 16px */ --gutter-desktop: 1.5rem; /* 24px */ /* ---- BORDER RADIUS ---- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 9999px; --radius-full: 50%; /* ---- BORDER WIDTHS ---- */ --border-thin: 1px; --border-default: 2px; --border-thick: 3px; /* ---- SHADOWS ---- */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(11, 31, 58, 0.05); --shadow-sm: 0 2px 4px rgba(11, 31, 58, 0.08), 0 1px 2px rgba(11, 31, 58, 0.06); --shadow-md: 0 4px 12px rgba(11, 31, 58, 0.10), 0 2px 4px rgba(11, 31, 58, 0.06); --shadow-lg: 0 12px 24px rgba(11, 31, 58, 0.14), 0 4px 8px rgba(11, 31, 58, 0.08); --shadow-glow-gold: 0 0 24px rgba(201, 164, 90, 0.35); /* ---- Z-INDEX SCALE ---- */ --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-fixed: 1200; --z-modal-backdrop: 1300; --z-modal: 1310; --z-popover: 1400; --z-toast: 1500; /* ---- MOTION: easing ---- */ --ease-default: cubic-bezier(0.16, 1, 0.3, 1); /* premium snap */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-linear: linear; /* ---- MOTION: durations ---- */ --duration-instant: 100ms; /* micro-interactions */ --duration-fast: 150ms; /* button hover, focus */ --duration-default: 250ms; /* card hover, accordion */ --duration-slow: 400ms; /* modal, drawer */ --duration-deliberate: 600ms; /* hero animations */ /* ---- A11Y / TOUCH ---- */ --tap-target-min: 44px; /* WCAG AA + Apple HIG */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-info); /* ---- BREAKPOINTS (used in @media; here for reference) ---- xs: 0 — mobile portrait (375px reference) sm: 640px — mobile landscape, small tablets md: 768px — tablet portrait lg: 1024px — tablet landscape, small laptop xl: 1280px — desktop default 2xl: 1536px — large desktop */ } /* ============================================================================ Reduced motion — respect user preference (Design Handoff section 5.5) ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }