/* ========================================================================== RMDS — Rokas Medical Design System tokens.css — the single source of truth. Nothing below this file should contain a raw hex, a raw px spacing value, or a raw duration. ========================================================================== */ :root { /* --- 1. COLOR: Ocean (primary — knowledge, stability, surgery) ---------- */ --ocean-950: #04101E; /* hero ground — measured from mockup 1 */ --ocean-900: #05192A; /* footer, dark bands — measured from mockup 1 */ --ocean-800: #0C2438; /* display headings on dark */ --ocean-700: #17384F; /* secondary buttons, icon strokes */ --ocean-600: #2C5470; /* links */ --ocean-500: #4A7691; /* interactive / focus ring */ --ocean-400: #7FA3B9; /* hover states on dark */ --ocean-300: #B3C8D6; /* dividers on cool ground */ --ocean-200: #D6E2EA; /* panel fills */ --ocean-100: #E9EDEE; /* cool section ground — measured from mockup 1 */ --ocean-50: #F4F6F7; /* cool canvas */ /* --- 2. COLOR: Oxblood (memory token — "this matters") ----------------- Never a large surface. Never a paragraph. Never a card fill. Budget: max 5% of any viewport. */ --ox-900: #3A0E18; /* signature */ --ox-800: #4A1220; /* pressed */ --ox-700: #521522; /* primary CTA — measured from mockup 1 */ --ox-600: #6C1326; /* accent italic, active nav — measured */ --ox-500: #6E2939; /* eyebrows — measured from mockup 1 */ --ox-400: #8E4A57; /* accent on dark grounds */ --ox-300: #D5B9BF; /* timeline rules */ --ox-100: #F4E8EA; /* whisper backgrounds — measured */ /* --- 3. COLOR: Verdigris — RETIRED in v1.1 ------------------------------ Kept only so nothing breaks. It appears nowhere in the mockup you chose, and a third accent family is what made the earlier drafts read as a template. Do not reintroduce without a semantic reason. */ --green-700: #2E6F68; --green-500: #4FA89A; --green-100: #E7F2F0; /* --- 4. COLOR: Warm neutrals (paper) ----------------------------------- */ --n-0: #FFFFFF; --n-50: #F4F4F2; /* paper ground — measured from mockup 1 */ --n-100: #EDEDEA; /* second paper tone */ --n-200: #E2E2DE; /* panels */ --n-300: #D2D2CC; /* dividers, hairlines */ --n-400: #ADADA6; /* disabled */ --n-500: #85857E; /* captions */ --n-600: #66665F; --n-700: #474742; --n-800: #31312D; --n-900: #1E1E1B; /* --- 5. COLOR: Semantic ------------------------------------------------ */ --text-display: #202A36; /* headings — measured ink from mockup 1 */ --text-body: #454F5A; --text-muted: #6E7880; --text-onDark: #F2F4F5; --text-onDarkMuted: #A6B4BF; --canvas: var(--n-50); --ground-warm: var(--n-100); --ground-cool: var(--ocean-100); --ground-dark: var(--ocean-950); --surface: var(--n-0); --line-hair: rgba(30, 30, 27, 0.10); --line-soft: rgba(30, 30, 27, 0.15); --line-onDark: rgba(232, 238, 242, 0.16); --focus-ring: var(--ocean-500); /* --- 6. TYPE: families ------------------------------------------------- Both faces ship real Greek. That is not a preference, it is the entry requirement for this project. */ --font-display: "EB Garamond", "Georgia", "Times New Roman", serif; --font-ui: "Commissioner", "Helvetica Neue", Arial, sans-serif; /* --- 7. TYPE: scale (px values kept as the spec, expressed in rem) ------ */ --t-display-xxl: 4.5rem; /* 72 */ --t-display-xl: 3.625rem; /* 58 */ --t-display-l: 3rem; /* 48 */ --t-h1: 2.5rem; /* 40 */ --t-h2: 2rem; /* 32 */ --t-h3: 1.75rem; /* 28 */ --t-h4: 1.5rem; /* 24 */ --t-body-l: 1.25rem; /* 20 */ --t-body: 1.125rem; /* 18 */ --t-body-s: 1rem; /* 16 */ --t-caption: 0.875rem; /* 14 */ --t-micro: 0.75rem; /* 12 */ --lh-display: 1.14; --lh-heading: 1.26; --lh-body: 1.66; --measure: 64ch; /* hard cap on line length */ --track-eyebrow: 0.16em; --track-display: -0.012em; /* --- 8. SPACE ---------------------------------------------------------- */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 2.5rem; /* 40 */ --s-8: 3.5rem; /* 56 */ --s-9: 4.5rem; /* 72 */ --s-10: 6rem; /* 96 */ --s-11: 8rem; /* 128 */ --s-12: 11.25rem; /* 180 */ --s-13: 15rem; /* 240 */ /* --- 9. GRID ----------------------------------------------------------- */ --container: 82.5rem; /* 1320 */ --container-narrow: 46rem; --gutter: var(--s-6); --margin-desktop: var(--s-10); --margin-tablet: var(--s-7); --margin-mobile: var(--s-5); /* --- 10. RADIUS -------------------------------------------------------- */ --r-xs: 4px; --r-sm: 8px; --r-md: 16px; /* cards */ --r-lg: 24px; /* images */ --r-xl: 32px; --r-pill: 999px;/* buttons*/ /* --- 11. ELEVATION — layered only, never a single shadow --------------- */ --shadow-1: 0 1px 2px rgba(4,16,30,.04), 0 2px 8px rgba(4,16,30,.045); --shadow-2: 0 1px 2px rgba(4,16,30,.04), 0 4px 10px rgba(4,16,30,.05), 0 12px 28px rgba(4,16,30,.05); --shadow-3: 0 2px 4px rgba(4,16,30,.05), 0 10px 24px rgba(4,16,30,.07), 0 28px 60px rgba(4,16,30,.08); --shadow-float: 0 2px 6px rgba(4,16,30,.05), 0 18px 40px rgba(4,16,30,.10), 0 44px 90px rgba(4,16,30,.09); --shadow-overlay: 0 1px 0 rgba(4,16,30,.05), 0 20px 50px rgba(4,16,30,.12), 0 60px 120px rgba(4,16,30,.10); /* --- 12. BLUR ---------------------------------------------------------- */ --blur-xs: 4px; --blur-sm: 8px; --blur-md: 14px; --blur-lg: 22px; --blur-xl: 40px; /* --- 13. MOTION -------------------------------------------------------- */ --m-fast: 150ms; --m-normal: 280ms; --m-gentle: 500ms; --m-story: 900ms; --m-ambient: 20000ms; --ease-precision: cubic-bezier(.20, 0, 0, 1); --ease-human: cubic-bezier(.32, .72, 0, 1); --ease-editorial: cubic-bezier(.16, 1, .30, 1); --ease-neural: cubic-bezier(.65, 0, .35, 1); /* --- 14. OPACITY ------------------------------------------------------- */ --o-4: .04; --o-8: .08; --o-12: .12; --o-20: .20; --o-40: .40; --o-60: .60; --o-80: .80; /* --- 15. LAYERS -------------------------------------------------------- */ --z-thread: 20; --z-header: 60; --z-mega: 55; --z-drawer: 80; --z-overlay:90; /* --- 16. SIGNATURE ----------------------------------------------------- */ --thread-w: 0.75px; --thread-idle: rgba(30,30,27,.22); --thread-live: var(--ox-700); } @media (max-width: 60rem) { :root { --t-display-xxl: 3rem; --t-display-xl: 2.5rem; --t-display-l: 2.125rem; --t-h1: 1.875rem; --t-h2: 1.625rem; --t-h3: 1.375rem; --t-h4: 1.25rem; --t-body-l: 1.125rem; --t-body: 1.0625rem; } }