@layer reset,tokens,typography,themes,glass,components,utilities,pages;
/**
* ██████╗ ██████╗ ███████╗██╗ ██╗███████╗ ██╗ ██╗██████╗
* ██╔════╝██╔═══██╗██╔════╝██║ ██║██╔════╝ ██║ ██║╚════██╗
* ██║ ██║ ██║█████╗ ██║ ██║███████╗ ██║ ██║ █████╔╝
* ██║ ██║ ██║██╔══╝ ██║ ██║╚════██║ ╚██╗ ██╔╝██╔═══╝
* ╚██████╗╚██████╔╝███████╗╚██████╔╝███████║ ╚████╔╝ ███████╗
* ╚═════╝ ╚═════╝ ╚══════╝ ╚═════╝ ╚══════╝ ╚═══╝ ╚══════╝
*
* COEUS DESIGN SYSTEM V2.0 - CONSOLIDATED MASTER CSS
* Data-driven consolidation reducing 150+ classes to 60 core classes
*
* VERSION: 2.0.0
* CREATED: 2025-11-17
* PURPOSE: Consolidated, performant CSS architecture
*
* IMPROVEMENTS OVER V1:
* - 60% fewer CSS classes (150+ → 60)
* - 65% smaller file size (470KB → 180KB)
* - Container-aware automatic scaling
* - 5 complete theme definitions
* - Noto JP/KR fonts for CJK support
* - Semantic class naming
*
* ARCHITECTURE:
* 1. Reset - Browser normalization
* 2. Variables - Design tokens
* 3. Typography - 6 consolidated classes
* 4. Themes - 5 complete themes
* 5. Glass System - Depth-aware glassmorphism
* 6. Container - Depth-aware scaling
* 7. Backgrounds - Theme background images
* 8. Components - Reusable UI components
* 9. Utilities - Single-purpose helpers
* 10. Pages - Page-specific overrides
*
* USAGE:
* Replace coeus-master.css with this file:
*
*/
/* ============================================ */
/* 0. CASCADE LAYERS */
/* Establish layer priority order */
/* Later layers have higher specificity */
/* ============================================ */
@layer reset, tokens, typography, themes, glass, components, utilities, pages;
/* ============================================ */
/* 1. FONT LOADING */
/* Load fonts first for faster rendering */
/* ============================================ */
/* Bodoni Moda for COEUS logo only, Noto JP/KR for all other text */
/* Self-hosted fonts — eliminates Google Fonts DNS lookups + external CSS requests */
/**
* @file fonts.css
* @description Self-hosted Google Fonts (latin + latin-ext subsets only)
* Font families: Bodoni Moda, Inter, Meddon, Noto Sans, Noto Sans JP/KR,
* Noto Serif, Noto Serif JP/KR
* CJK characters fall back to system fonts.
*/
/* latin-ext */
@font-face {
font-family: 'Bodoni Moda';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/aFTS7PxzY382XsXX63LUYJSPeKTcW3JNsapGZQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bodoni Moda';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/aFTS7PxzY382XsXX63LUYJSPeKrcW3JNsao.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/aFTQ7PxzY382XsXX63LUYJSESKjWXFBPgas.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/aFTQ7PxzY382XsXX63LUYJSKSKjWXFBP.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Meddon';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/kmK8ZqA2EgDNeHTpjR1A_SzQot1K.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Meddon';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/kmK8ZqA2EgDNeHTpgx1A_SzQog.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/o-0ZIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevtt3OmHS91ixg0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/o-0ZIpQlx3QUlC5A4PNr4C5OaxRsfNNlKbCePevtuXOmHS91iw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5aDdu3mhPy1Fig.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7du3mhPy0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYzwgP-FVth9IU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYzwgP-FVth9IU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYzwgP-FVth9IU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYzwgP-FVth9IU.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/-F62fjtqLzI2JPCgQBnw7HFYwQgP-FVthw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG337twpAcuV8y.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG0X7twpAcuQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG337twpAcuV8y.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG0X7twpAcuQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG337twpAcuV8y.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG0X7twpAcuQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG337twpAcuV8y.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/PbykFmXiEBPT4ITbgNA5CgmG0X7twpAcuQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/ga6faw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_P3Hct_NFiQhhYQ.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/ga6faw1J5X9T9RW6j9bNfFIMZhhWnFTyNZIQD1-_P3_ct_NFiQg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/ga6daw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTYf0D33WsNFHuQk.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/fonts/ga6daw1J5X9T9RW6j9bNVls-hfgvz8JcMofYTYf6D33WsNFH.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNeuY2Q3X8_92A.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNmuY2Q3X88.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNeuY2Q3X8_92A.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNmuY2Q3X88.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNeuY2Q3X8_92A.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNmuY2Q3X88.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNeuY2Q3X8_92A.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif JP';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/xn7mYHs72GKoTvER4Gn3b5eMbNmuY2Q3X88.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRulj1cFxOHVjnA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRudj1cFxOHU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRulj1cFxOHVjnA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRudj1cFxOHU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRulj1cFxOHVjnA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif KR';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/fonts/3Jn7SDn90Gmq2mr3blnHaTZXRudj1cFxOHU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================ */
/* 2. CSS RESET */
/* Consistent baseline across browsers */
/* ============================================ */
/**
* COEUS Design System - CSS Reset
*
* PURPOSE:
* Provides a consistent baseline across all browsers by resetting default styles
*
* DEPENDENCIES: None (standalone)
* LAST UPDATED: 2025-10-26
*/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin and padding */
* {
margin: 0;
padding: 0;
}
/* Remove list styles on ul, ol elements with a list role */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================ */
/* 3. DESIGN TOKENS */
/* Variables, themes, backgrounds — single */
/* source of truth (replaces variables-v2, */
/* themes-v2, backgrounds.css) */
/* ============================================ */
/**
* COEUS DESIGN SYSTEM — DESIGN TOKENS
* Single source of truth for all design variables.
*
* REPLACES: variables-v2.css, themes-v2.css, backgrounds.css
*
* SECTIONS:
* 1. Universal tokens (theme-independent)
* 2. Theme definitions (3 color groups, 5 themes)
* 3. Body/background setup
* 4. Theme transitions & utilities
*
* VERSION: 3.1.0
* CREATED: 2026-03-03
* UPDATED: 2026-03-13 — removed 18 unreferenced tokens (breakpoints, sidebar/modal/content widths, grid, font aliases)
*/
/* ============================================ */
/* TRANSITION KILLER (theme-manager.js) */
/* ============================================ */
/* Applied briefly when --font-scale changes so 120+ "transition: all"
rules don't animate every font-size simultaneously. */
.no-transitions,
.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
transition-duration: 0s !important;
animation-duration: 0s !important;
}
/* ============================================ */
/* SECTION 1 — UNIVERSAL TOKENS */
/* ============================================ */
:root {
/* ---- FONTS ---- */
--font-logo: 'Bodoni Moda', 'Noto Serif JP', Georgia, serif;
--font-sans: 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-serif: 'Noto Serif JP', 'Noto Serif KR', Georgia, 'Times New Roman', serif;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Controlled by theme-manager.js: S=0.875, M=1, L=1.125, XL=1.25 */
--font-scale: 1;
/* ---- SPACING (numeric scale, em-based) ---- */
--spacing-0: 0;
--spacing-1: 0.25em; /* 4px */
--spacing-2: 0.5em; /* 8px */
--spacing-3: 0.75em; /* 12px */
--spacing-4: 1em; /* 16px */
--spacing-5: 1.25em; /* 20px */
--spacing-6: 1.5em; /* 24px */
--spacing-7: 1.75em; /* 28px */
--spacing-8: 2em; /* 32px */
--spacing-10: 2.5em; /* 40px */
--spacing-12: 3em; /* 48px */
--spacing-16: 4em; /* 64px */
--spacing-20: 5em; /* 80px */
--spacing-24: 6em; /* 96px */
/* Legacy aliases (active during V1→V2 migration) */
--spacing-xs: var(--spacing-1);
--spacing-sm: var(--spacing-2);
--spacing-md: var(--spacing-4);
--spacing-lg: var(--spacing-6);
--spacing-xl: var(--spacing-8);
--spacing-2xl: var(--spacing-12);
--spacing-3xl: var(--spacing-16);
/* ---- BORDER RADIUS ---- */
--radius-sm: 0.5em; /* 8px */
--radius-md: 1em; /* 16px */
--radius-lg: 1.5em; /* 24px */
--radius-full: 9999px;
/* ---- SHADOWS ---- */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
--shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
/* ---- TRANSITIONS ---- */
--transition-fast: 0.15s ease;
--transition-base: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* ---- Z-INDEX ---- */
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-modal-backdrop: 40;
--z-modal: 50;
--z-popover: 60;
--z-toast: 70;
--z-tooltip: 80;
/* ---- ACCENT COLORS (unified across ALL themes) ---- */
--accent-primary: #FF9500;
--accent-success: #34C759;
--accent-warning: #FFCC00;
--accent-danger: #FF3B30;
--accent-primary-rgb: 255, 149, 0;
--accent-success-rgb: 52, 199, 89;
--accent-warning-rgb: 255, 204, 0;
--accent-danger-rgb: 255, 59, 48;
/* ---- iOS SYSTEM COLORS (constant) ---- */
--ios-system-blue: #007AFF;
--ios-system-green: #34C759;
--ios-system-orange: #FF9500;
--ios-system-red: #FF3B30;
--ios-system-purple: #AF52DE;
--ios-system-teal: #5AC8FA;
--ios-system-yellow: #FFCC00;
--ios-system-indigo: #5856D6;
--ios-system-pink: #FF2D92;
/* RGB decompositions for rgba() */
--ios-blue-rgb: 0, 122, 255;
--ios-green-rgb: 52, 199, 89;
--ios-orange-rgb: 255, 149, 0;
--ios-red-rgb: 255, 59, 48;
/* Button text on colored backgrounds */
--button-text-on-color: #ffffff;
/* ---- CONTAINER WIDTHS ---- */
--container-sm: 40em; /* 640px */
--container-md: 48em; /* 768px */
--container-lg: 64em; /* 1024px */
--container-xl: 80em; /* 1280px */
--container-2xl: 96em; /* 1536px */
/* ---- TOUCH TARGETS ---- */
--touch-target-min: 2.75em; /* 44px — WCAG minimum */
}
/* ============================================ */
/* SECTION 2 — THEME DEFINITIONS */
/* ============================================ */
/* -------------------------------------------- */
/* LIGHT GROUP — light + lightmodern */
/* Text base: Charcoal Blue (44, 62, 80) */
/* -------------------------------------------- */
[data-theme="light"],
[data-theme="lightmodern"] {
color-scheme: light;
/* Text */
--text-primary: rgba(44, 62, 80, 0.95);
--text-secondary: rgba(44, 62, 80, 0.75);
--text-tertiary: rgba(44, 62, 80, 0.55);
--text-quaternary: rgba(44, 62, 80, 0.35);
/* Glass */
--glass-primary: rgba(255, 255, 255, 0.12);
--glass-secondary: rgba(255, 255, 255, 0.08);
--glass-border: rgba(44, 62, 80, 0.15);
--glass-border-hover: rgba(44, 62, 80, 0.30);
--glass-hover: rgba(44, 62, 80, 0.22);
--theme-glass-rgb: 255, 255, 255;
/* Inputs (lighter than containers) */
--input-bg: rgba(255, 255, 255, 0.70);
--input-bg-hover: rgba(255, 255, 255, 0.80);
--input-bg-focus: rgba(255, 255, 255, 0.90);
--input-bg-solid: #f0ebe6;
--input-border: rgba(44, 62, 80, 0.20);
--input-border-hover: rgba(44, 62, 80, 0.30);
--input-border-focus: var(--accent-primary);
--input-text: var(--text-primary);
--input-placeholder: var(--text-tertiary);
/* Modal-context glass (high opacity for readability over dark overlays) */
--glass-modal-bg: rgba(255, 255, 255, 0.82);
/* Solid backgrounds */
--background-primary: #ffffff;
--background-secondary: #f9fafb;
--background-hover: #f3f4f6;
/* Borders */
--border-color: rgba(44, 62, 80, 0.12);
--border-hover: rgba(44, 62, 80, 0.25);
}
/* Per-theme blur + background overrides */
[data-theme="light"] {
--glass-blur: blur(2px);
}
[data-theme="lightmodern"] {
--glass-blur: blur(16px);
--glass-primary: rgba(255, 255, 255, 0.55);
--glass-secondary: rgba(255, 255, 255, 0.35);
--glass-hover: rgba(255, 255, 255, 0.45);
--glass-modal-bg: rgba(255, 255, 255, 0.88);
--input-bg-solid: #f2eff0;
}
/* Background images */
[data-theme="light"] body::before,
body[data-theme="light"]::before {
background-image: url('/assets/light.jpg');
}
[data-theme="lightmodern"] body::before,
body[data-theme="lightmodern"]::before {
background-image: url('/assets/lightmodern.jpg');
}
/* -------------------------------------------- */
/* DARK GROUP — dark + darkart */
/* Text base: Warm Cream (245, 241, 232) */
/* -------------------------------------------- */
[data-theme="dark"],
[data-theme="darkart"] {
color-scheme: dark;
/* Text */
--text-primary: rgba(245, 241, 232, 0.95);
--text-secondary: rgba(245, 241, 232, 0.85);
--text-tertiary: rgba(245, 241, 232, 0.65);
--text-quaternary: rgba(245, 241, 232, 0.45);
/* Glass */
--glass-primary: rgba(0, 0, 0, 0.14);
--glass-secondary: rgba(0, 0, 0, 0.08);
--glass-border: rgba(245, 241, 232, 0.18);
--glass-border-hover: rgba(245, 241, 232, 0.35);
--glass-hover: rgba(245, 241, 232, 0.22);
--theme-glass-rgb: 0, 0, 0;
/* Inputs (darker than containers) */
--input-bg: rgba(0, 0, 0, 0.35);
--input-bg-hover: rgba(0, 0, 0, 0.40);
--input-bg-focus: rgba(0, 0, 0, 0.45);
--input-bg-solid: #141418;
--input-border: rgba(245, 241, 232, 0.15);
--input-border-hover: rgba(245, 241, 232, 0.25);
--input-border-focus: var(--accent-primary);
--input-text: var(--text-primary);
--input-placeholder: var(--text-tertiary);
/* Modal-context glass */
--glass-modal-bg: rgba(0, 0, 0, 0.78);
/* Solid backgrounds */
--background-primary: rgba(30, 30, 35, 0.85);
--background-secondary: rgba(20, 20, 25, 0.75);
--background-hover: rgba(50, 50, 55, 0.85);
/* Borders */
--border-color: rgba(255, 255, 255, 0.15);
--border-hover: rgba(255, 255, 255, 0.25);
}
/* Per-theme blur + background overrides */
[data-theme="dark"] {
--glass-blur: blur(7px);
}
[data-theme="darkart"] {
--glass-blur: blur(10px);
--theme-glass-rgb: 20, 20, 30;
--input-bg: rgba(15, 15, 20, 0.50);
--input-bg-hover: rgba(15, 15, 20, 0.55);
--input-bg-focus: rgba(15, 15, 20, 0.60);
--input-bg-solid: #171719;
}
/* Background images */
[data-theme="dark"] body::before,
body[data-theme="dark"]::before {
background-image: url('/assets/dark.jpg');
background-position: center center;
}
[data-theme="darkart"] body::before,
body[data-theme="darkart"]::before {
background-image: url('/assets/darkart.jpg');
background-position: center center;
}
/* -------------------------------------------- */
/* DARK MODERN — unique color group */
/* Text base: Cool White (248, 250, 252) */
/* -------------------------------------------- */
[data-theme="darkmodern"] {
color-scheme: dark;
/* Text */
--text-primary: rgba(248, 250, 252, 0.95);
--text-secondary: rgba(248, 250, 252, 0.85);
--text-tertiary: rgba(248, 250, 252, 0.65);
--text-quaternary: rgba(248, 250, 252, 0.45);
/* Glass (blue-tinted, higher opacity) */
--glass-primary: rgba(15, 20, 30, 0.65);
--glass-secondary: rgba(15, 20, 30, 0.45);
--glass-border: rgba(248, 250, 252, 0.12);
--glass-border-hover: rgba(248, 250, 252, 0.18);
--glass-hover: rgba(25, 30, 40, 0.72);
--theme-glass-rgb: 15, 20, 30;
/* Inputs */
--input-bg: rgba(5, 8, 15, 0.70);
--input-bg-hover: rgba(5, 8, 15, 0.75);
--input-bg-focus: rgba(5, 8, 15, 0.80);
--input-bg-solid: #080b14;
--input-border: rgba(248, 250, 252, 0.12);
--input-border-hover: rgba(248, 250, 252, 0.20);
--input-border-focus: var(--accent-primary);
--input-text: var(--text-primary);
--input-placeholder: var(--text-tertiary);
/* Solid backgrounds */
--background-primary: rgba(12, 16, 28, 0.92);
--background-secondary: rgba(8, 12, 22, 0.88);
--background-hover: rgba(18, 24, 38, 0.90);
/* Borders */
--border-color: rgba(248, 250, 252, 0.12);
--border-hover: rgba(248, 250, 252, 0.22);
/* Modal-context glass */
--glass-modal-bg: rgba(15, 20, 30, 0.85);
/* Blur */
--glass-blur: blur(12px);
}
/* Background image */
[data-theme="darkmodern"] body::before,
body[data-theme="darkmodern"]::before {
background-image: url('/assets/darkmodern.jpg');
background-position: center center;
}
/* ============================================ */
/* SECTION 3 — BODY / BACKGROUND SETUP */
/* ============================================ */
/* Prevent horizontal overscroll bounce */
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
overscroll-behavior-x: none;
-webkit-overflow-scrolling: touch;
}
/* Background image layer */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================ */
/* SECTION 4 — THEME TRANSITIONS & UTILS */
/* ============================================ */
/* Smooth theme switching */
* {
transition:
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Prevent transition on initial page load */
body.no-transition * {
transition: none !important;
}
/* Force text colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-quaternary { color: var(--text-quaternary) !important; }
/* Force backgrounds */
.bg-primary { background: var(--background-primary) !important; }
.bg-secondary { background: var(--background-secondary) !important; }
/* Theme debug indicator (hidden by default) */
body[data-theme]::after {
content: attr(data-theme);
position: fixed;
bottom: 10px;
right: 10px;
background: var(--glass-primary);
color: var(--text-secondary);
padding: 0.25em 0.5em;
border-radius: 0.25em;
font-size: 0.75rem;
opacity: 0;
pointer-events: none;
z-index: 9999;
}
body[data-theme].debug-theme::after {
opacity: 0.7;
}
/* ============================================ */
/* 4. TYPOGRAPHY SYSTEM */
/* 8 consolidated typography levels */
/* ============================================ */
/**
* COEUS DESIGN SYSTEM — TYPOGRAPHY (8 levels)
*
* HEADING SCALE (fluid, serif for H1-H4, sans for H5):
* ios-large-title H1 40→64px serif bold(700)
* ios-title1 H2 36→48px serif semibold(600)
* ios-title2 H3 32→40px serif semibold(600)
* ios-title3 H4 24→32px serif semibold(600)
* ios-headline H5 20→24px sans semibold(600)
*
* BODY SCALE (fixed, sans):
* ios-body Body 16px sans normal(400)
* ios-callout Label 14px sans medium(500)
* ios-caption1 Small 12px sans normal(400)
* ios-footnote Tiny 10px sans normal(400)
*
* REMOVED (migrated):
* ios-subheadline → ios-headline
* ios-caption2 → ios-caption1
* ios-caption3 → ios-footnote
* heading-1/2/3 → ios-large-title/title1/title2
* body-text → ios-body
* caption → ios-caption1
* helper-text → ios-footnote
* form-label → ios-callout
*
* VERSION: 3.0.0
* CREATED: 2026-03-03
*/
/* ============================================ */
/* ROOT FONT SETUP */
/* ============================================ */
:root {
--base-font-size: calc(16px * var(--font-scale, 1));
}
html {
font-size: var(--base-font-size);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ============================================ */
/* HEADING SCALE (fluid) */
/* ============================================ */
/* H1 — Large Title: 40px → 64px */
.ios-large-title {
font-family: var(--font-serif);
font-size: clamp(
calc(2.5rem * var(--font-scale, 1)),
calc(2.5rem * var(--font-scale, 1) + 1.5vw),
calc(4rem * var(--font-scale, 1))
);
font-weight: var(--font-bold);
line-height: 1.1;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* H2 — Title 1: 36px → 48px */
.ios-title1 {
font-family: var(--font-serif);
font-size: clamp(
calc(2.25rem * var(--font-scale, 1)),
calc(2.25rem * var(--font-scale, 1) + 0.75vw),
calc(3rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.15;
color: var(--text-primary);
letter-spacing: -0.015em;
}
/* H3 — Title 2: 32px → 40px */
.ios-title2 {
font-family: var(--font-serif);
font-size: clamp(
calc(2rem * var(--font-scale, 1)),
calc(2rem * var(--font-scale, 1) + 0.5vw),
calc(2.5rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.2;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/* H4 — Title 3: 24px → 32px */
.ios-title3 {
font-family: var(--font-serif);
font-size: clamp(
calc(1.5rem * var(--font-scale, 1)),
calc(1.5rem * var(--font-scale, 1) + 0.5vw),
calc(2rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.25;
color: var(--text-primary);
}
/* H5 — Headline: 20px → 24px */
.ios-headline {
font-family: var(--font-sans);
font-size: clamp(
calc(1.25rem * var(--font-scale, 1)),
calc(1.25rem * var(--font-scale, 1) + 0.25vw),
calc(1.5rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.3;
color: var(--text-primary);
}
/* ============================================ */
/* BODY SCALE (fixed) */
/* ============================================ */
/* Body default */
body {
font-family: var(--font-sans);
font-size: calc(1rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.5;
color: var(--text-secondary);
letter-spacing: 0.01em;
}
/* Body — 16px */
.ios-body {
font-family: var(--font-sans);
font-size: calc(1rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.5;
color: var(--text-secondary);
}
/* Callout / Label — 14px */
.ios-callout {
font-family: var(--font-sans);
font-size: calc(0.875rem * var(--font-scale, 1));
font-weight: var(--font-medium);
line-height: 1.5;
color: var(--text-secondary);
}
/* Caption — 12px */
.ios-caption1 {
font-family: var(--font-sans);
font-size: calc(0.75rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.4;
color: var(--text-secondary);
}
/* Footnote — 10px */
.ios-footnote {
font-family: var(--font-sans);
font-size: calc(0.625rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.4;
color: var(--text-tertiary);
}
/* ============================================ */
/* BACKWARDS COMPATIBILITY ALIASES */
/* (will be removed after migration) */
/* ============================================ */
/* heading-* → ios-* */
.heading-1 {
font-family: var(--font-serif);
font-size: clamp(
calc(2.5rem * var(--font-scale, 1)),
calc(2.5rem * var(--font-scale, 1) + 1.5vw),
calc(4rem * var(--font-scale, 1))
);
font-weight: var(--font-bold);
line-height: 1.1;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.heading-2 {
font-family: var(--font-serif);
font-size: clamp(
calc(2.25rem * var(--font-scale, 1)),
calc(2.25rem * var(--font-scale, 1) + 0.75vw),
calc(3rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.15;
color: var(--text-primary);
letter-spacing: -0.015em;
}
.heading-3 {
font-family: var(--font-serif);
font-size: clamp(
calc(2rem * var(--font-scale, 1)),
calc(2rem * var(--font-scale, 1) + 0.5vw),
calc(2.5rem * var(--font-scale, 1))
);
font-weight: var(--font-semibold);
line-height: 1.2;
color: var(--text-primary);
letter-spacing: -0.01em;
}
/* ios-subheadline → ios-headline (alias) */
.ios-subheadline {
font-family: var(--font-sans);
font-size: clamp(
calc(1.25rem * var(--font-scale, 1)),
calc(1.25rem * var(--font-scale, 1) + 0.25vw),
calc(1.5rem * var(--font-scale, 1))
);
font-weight: var(--font-medium);
line-height: 1.3;
color: var(--text-primary);
}
/* body-text → ios-body (alias) */
.body-text {
font-family: var(--font-sans);
font-size: calc(1rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.5;
color: var(--text-secondary);
}
/* form-label → ios-callout (alias with display:block) */
.form-label {
font-family: var(--font-sans);
font-size: calc(0.875rem * var(--font-scale, 1));
font-weight: var(--font-medium);
line-height: 1.4;
color: var(--text-primary);
display: block;
margin-bottom: 0.25em;
}
/* caption → ios-caption1 (alias) */
.caption {
font-family: var(--font-sans);
font-size: calc(0.75rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.4;
color: var(--text-secondary);
}
/* ios-caption2 → ios-caption1 (alias) */
.ios-caption2 {
font-family: var(--font-sans);
font-size: calc(0.75rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.4;
color: var(--text-tertiary);
}
/* ios-caption3, helper-text → ios-footnote (alias) */
.ios-caption3,
.helper-text {
font-family: var(--font-sans);
font-size: calc(0.625rem * var(--font-scale, 1));
font-weight: var(--font-normal);
line-height: 1.4;
color: var(--text-tertiary);
}
/* ============================================ */
/* UTILITY MODIFIERS */
/* ============================================ */
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
/* Color overrides on text classes */
.body-text.text-primary,
.ios-body.text-primary {
color: var(--text-primary);
}
.body-text.text-tertiary,
.ios-body.text-tertiary {
color: var(--text-tertiary);
}
/* ============================================ */
/* SPECIAL ELEMENTS */
/* ============================================ */
::placeholder {
color: var(--text-tertiary);
opacity: 1;
}
::selection {
background-color: var(--accent-primary);
color: white;
}
a {
color: var(--text-primary);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--accent-primary);
text-decoration: underline;
}
code, pre {
font-family: var(--font-sans);
font-size: 0.875em;
background: var(--glass-primary);
padding: 0.125em 0.25em;
border-radius: 0.25em;
}
/* ============================================ */
/* PRINT STYLES */
/* ============================================ */
@media print {
body {
font-size: 12pt;
line-height: 1.5;
color: black;
}
.ios-large-title, .heading-1 { font-size: 48pt; }
.ios-title1, .heading-2 { font-size: 36pt; }
.ios-title2, .heading-3 { font-size: 30pt; }
.ios-title3 { font-size: 24pt; }
.ios-headline { font-size: 18pt; }
.ios-body, .body-text { font-size: 12pt; }
.ios-callout, .form-label { font-size: 10.5pt; }
.ios-caption1, .caption { font-size: 9pt; }
.ios-footnote, .helper-text { font-size: 7.5pt; }
}
/* ============================================ */
/* 5. GLASS MORPHISM SYSTEM */
/* Liquid Glass: 2 containers + buttons */
/* ============================================ */
/**
* COEUS DESIGN SYSTEM — LIQUID GLASS SYSTEM
*
* PURPOSE:
* Two-level container system with clear glass aesthetic.
* Low blur reveals the background, chromatic dispersion borders
* give a physical glass feel.
*
* CONTAINERS:
* .glass-card — prominent (main cards, modals, panels)
* .glass-container — subtle (nested sections, list items)
*
* BUTTONS:
* .glass-button — standard glass button
*
* INPUTS:
* Global styling on native input/select/textarea
*
* VERSION: 3.0.0
* CREATED: 2026-03-03
*/
/* ============================================ */
/* GLASS CARD — prominent container */
/* ============================================ */
.glass-card,
.coeus-box {
background: var(--_glass-card-bg, var(--glass-primary));
backdrop-filter: var(--_glass-card-blur, var(--glass-blur)) saturate(180%);
-webkit-backdrop-filter: var(--_glass-card-blur, var(--glass-blur)) saturate(180%);
border: 1px solid var(--glass-border);
border-image: linear-gradient(135deg,
rgba(255, 149, 0, 0.15),
rgba(255, 255, 255, 0.08),
rgba(255, 149, 0, 0.10)
) 1;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 0 40px rgba(255, 149, 0, 0.03);
border-radius: var(--radius-lg);
padding: var(--spacing-8);
position: relative;
isolation: isolate;
transition: box-shadow var(--transition-base);
}
/* border-image breaks border-radius — use pseudo-element for orange dispersion */
.glass-card,
.coeus-box {
border-image: none;
}
.glass-card::before,
.coeus-box::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(255, 149, 0, 0.15),
rgba(255, 255, 255, 0.08),
rgba(255, 149, 0, 0.10)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
/* ============================================ */
/* GLASS CONTAINER — subtle container */
/* ============================================ */
.glass-container,
.glass-container-thin {
background: var(--glass-secondary);
backdrop-filter: var(--glass-blur) saturate(150%);
-webkit-backdrop-filter: var(--glass-blur) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
padding: var(--spacing-6);
position: relative;
transition: box-shadow var(--transition-base);
}
/* ============================================ */
/* GLASS BUTTON */
/* ============================================ */
.glass-button,
.glass-button-thin {
background: var(--glass-secondary);
backdrop-filter: var(--glass-blur) saturate(150%);
-webkit-backdrop-filter: var(--glass-blur) saturate(150%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-sm);
padding: 0.75em 1.5em;
font-weight: var(--font-semibold);
font-family: var(--font-sans);
color: var(--text-primary);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
user-select: none;
text-decoration: none;
transition:
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 2px 4px rgba(0, 0, 0, 0.1);
}
.glass-button:hover,
.glass-button-thin:hover {
background: var(--glass-hover);
border-color: var(--glass-border-hover);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.3),
0 4px 8px rgba(0, 0, 0, 0.15);
}
.glass-button:active,
.glass-button-thin:active {
transform: translateY(0);
}
/* Button sizes */
.glass-button.btn-sm {
padding: 0.5em 1em;
font-size: 0.875em;
border-radius: var(--radius-sm);
}
.glass-button.btn-lg {
padding: 1em 2em;
font-size: 1.125em;
border-radius: var(--radius-md);
}
/* Button color variants */
.glass-button.btn-primary {
background: rgba(var(--accent-primary-rgb), 0.25);
color: white;
}
.glass-button.btn-success {
background: rgba(var(--accent-success-rgb), 0.25);
color: white;
}
.glass-button.btn-danger {
background: rgba(var(--accent-danger-rgb), 0.25);
color: white;
}
.glass-button.btn-warning {
background: rgba(var(--accent-warning-rgb), 0.25);
color: white;
}
/* Disabled state */
.glass-button:disabled,
.glass-button.disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* Disabled card state (coming soon, inactive features) */
.tool-card-disabled {
opacity: 0.6;
pointer-events: none;
cursor: default;
}
/* ============================================ */
/* PILL BUTTONS */
/* ============================================ */
.btn-pill {
border-radius: 9999px;
padding: 0.75em 1.5em;
font-weight: var(--font-medium);
transition: transform var(--transition-fast), box-shadow var(--transition-fast);
position: relative;
overflow: hidden;
}
.btn-pill::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
pointer-events: none;
}
.btn-pill-primary {
background: linear-gradient(135deg, var(--accent-primary), #fb923c);
color: white;
border: none;
box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.3);
}
.btn-pill-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(var(--accent-primary-rgb), 0.4);
}
.btn-pill-ghost {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--glass-border);
}
.btn-pill-ghost:hover {
background: var(--glass-hover);
border-color: var(--accent-primary);
}
.btn-pill-subtle {
background: var(--glass-primary);
color: var(--text-primary);
border: 1px solid var(--glass-border);
}
.btn-pill-subtle:hover {
background: var(--glass-hover);
}
/* ============================================ */
/* MODAL / POPUP SYSTEM */
/* ============================================ */
.modal-overlay,
.dialog-overlay,
[data-radix-dialog-overlay] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
z-index: var(--z-modal-backdrop);
animation: fadeIn 0.2s ease;
}
/*
* Overlay context: promote child glass containers to modal-level opacity.
* The --_glass-card-bg / --_glass-card-blur cascade variables are read by
* .glass-card and .coeus-box so they automatically get readable backgrounds
* when placed inside any overlay (modal, dialog, popover).
*/
.modal-overlay,
.dialog-overlay,
[data-radix-dialog-overlay],
.modal {
--_glass-card-bg: var(--glass-modal-bg);
--_glass-card-blur: blur(40px);
}
.modal-content,
.dialog-content,
[data-radix-dialog-content] {
background: var(--glass-modal-bg, var(--glass-primary));
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
position: relative;
z-index: var(--z-modal);
animation: glassModalEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.popup,
.dropdown-content,
[data-radix-popover-content],
[data-radix-dropdown-menu-content] {
background: var(--glass-primary);
backdrop-filter: var(--glass-blur) saturate(180%);
-webkit-backdrop-filter: var(--glass-blur) saturate(180%);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xl);
}
/* Modal sizing */
.modal-modern {
width: min(90vw, var(--modal-max-width, 37.5em));
max-height: min(90vh, var(--modal-max-height, 50em));
margin: auto;
display: flex;
flex-direction: column;
background: var(--glass-modal-bg, var(--glass-secondary));
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-modern--sm { --modal-max-width: 25em; }
.modal-modern--md { --modal-max-width: 37.5em; }
.modal-modern--lg { --modal-max-width: 50em; }
.modal-modern--xl { --modal-max-width: 75em; }
@media (max-width: 48em) {
.modal-modern {
width: calc(100vw - 1em);
max-height: calc(100vh - 2em);
border-radius: var(--radius-md);
}
}
/* Dark theme modal shadow boost */
[data-theme="dark"] .modal-modern,
[data-theme="darkart"] .modal-modern,
[data-theme="darkmodern"] .modal-modern {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* ============================================ */
/* GLOBAL NATIVE INPUT STYLING */
/* ============================================ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]),
select,
textarea {
background: var(--input-bg) !important;
color: var(--input-text) !important;
border: 1px solid var(--input-border) !important;
border-radius: var(--radius-sm);
padding: 0.75em 1em;
font-size: 1em;
font-family: var(--font-sans);
outline: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]):hover,
select:hover,
textarea:hover {
background: var(--input-bg-hover) !important;
border-color: var(--input-border-hover) !important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="image"]):not([type="color"]):focus,
select:focus,
textarea:focus {
background: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb), 0.15) !important;
}
input::placeholder,
textarea::placeholder {
color: var(--input-placeholder) !important;
opacity: 1;
}
/* Select dropdown arrow */
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75em center;
padding-right: 2.5em;
}
select option {
background: var(--background-primary);
color: var(--text-primary);
}
input:disabled,
select:disabled,
textarea:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
-webkit-text-fill-color: var(--input-text) !important;
-webkit-box-shadow: 0 0 0px 1000px var(--input-bg-solid, var(--input-bg)) inset !important;
box-shadow: 0 0 0px 1000px var(--input-bg-solid, var(--input-bg)) inset !important;
transition: background-color 5000s ease-in-out 0s;
caret-color: var(--input-text) !important;
}
/* File input */
input[type="file"] {
background: var(--input-bg) !important;
color: var(--input-text) !important;
border: 1px dashed var(--input-border) !important;
border-radius: var(--radius-sm);
padding: 0.75em 1em;
cursor: pointer;
}
input[type="file"]:hover {
background: var(--input-bg-hover) !important;
border-color: var(--input-border-hover) !important;
}
input[type="file"]::file-selector-button {
background: var(--glass-secondary);
color: var(--text-primary);
border: 1px solid var(--glass-border);
border-radius: 0.375em;
padding: 0.5em 1em;
margin-right: 1em;
cursor: pointer;
font-family: var(--font-sans);
transition: background var(--transition-fast);
}
input[type="file"]::file-selector-button:hover {
background: var(--glass-hover);
}
/* Checkbox and Radio */
input[type="checkbox"],
input[type="radio"] {
width: 1.25em;
height: 1.25em;
background: var(--input-bg) !important;
border: 1px solid var(--input-border) !important;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
input[type="checkbox"] {
border-radius: 0.25em;
}
input[type="radio"] {
border-radius: 50%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background: var(--accent-primary) !important;
border-color: var(--accent-primary) !important;
}
input[type="checkbox"]:checked::after {
content: '';
width: 0.5em;
height: 0.25em;
border-left: 2px solid white;
border-bottom: 2px solid white;
transform: rotate(-45deg);
margin-bottom: 2px;
}
input[type="radio"]:checked::after {
content: '';
width: 0.5em;
height: 0.5em;
background: white;
border-radius: 50%;
}
/* Range slider */
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
width: 100%;
height: 0.5em;
}
input[type="range"]::-webkit-slider-runnable-track {
background: var(--input-bg);
border: 1px solid var(--input-border);
border-radius: 0.25em;
height: 0.5em;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.25em;
height: 1.25em;
background: var(--accent-primary);
border-radius: 50%;
cursor: pointer;
margin-top: -0.4em;
}
/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */
.no-glass {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: var(--background-primary) !important;
border: 1px solid var(--border-color) !important;
}
/* Interactive card with click animation */
.card-interactive {
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card-interactive:active {
transform: scale(0.98);
}
/* ============================================ */
/* ANIMATIONS */
/* ============================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes glassModalEnter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================ */
/* ACCESSIBILITY */
/* ============================================ */
@media (prefers-reduced-motion: reduce) {
.glass-card,
.glass-container,
.glass-button,
.modal-content,
.dialog-content {
transition: box-shadow 0.2s ease !important;
transform: none !important;
}
.glass-button:hover {
transform: none !important;
}
@keyframes slideUp {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes glassModalEnter {
from { opacity: 0; }
to { opacity: 1; }
}
}
@media (prefers-contrast: high) {
.glass-card,
.glass-container {
border-width: 2px;
}
}
/* ============================================ */
/* MOBILE ADJUSTMENTS */
/* ============================================ */
@media (max-width: 48em) {
.glass-card,
.coeus-box {
padding: var(--spacing-6);
}
.glass-container,
.glass-container-thin {
padding: var(--spacing-4);
}
}
/* ============================================ */
/* 6. BREAKPOINTS */
/* Em-based responsive breakpoint system */
/* ============================================ */
/**
* COEUS DESIGN SYSTEM — BREAKPOINTS & DEVICE SUPPORT
*
* Breakpoint scale (em-based for accessibility):
* Phone: max-width 48em (768px)
* Tablet: 48em–64em (768px–1024px)
* Desktop: min-width 64em (1024px)
*
* Additional breakpoint variables are in design-tokens.css.
* This file contains responsive container, device, orientation,
* and print utilities.
*
* VERSION: 3.0.0
* CREATED: 2026-03-03
*/
/* ============================================ */
/* RESPONSIVE CONTAINER */
/* ============================================ */
.container-breakpoint {
width: 100%;
max-width: var(--container-sm);
margin-inline: auto;
padding-inline: 1em;
}
@media (min-width: 48em) {
.container-breakpoint {
max-width: var(--container-md);
padding-inline: 1.5em;
}
}
@media (min-width: 64em) {
.container-breakpoint {
max-width: var(--container-lg);
padding-inline: 2em;
}
}
@media (min-width: 80em) {
.container-breakpoint {
max-width: var(--container-xl);
}
}
/* ============================================ */
/* TOUCH / POINTER OPTIMIZATIONS */
/* ============================================ */
@media (pointer: coarse) {
.touch-target {
min-height: var(--touch-target-min);
min-width: var(--touch-target-min);
}
button,
[role="button"],
input[type="checkbox"],
input[type="radio"],
select {
min-height: var(--touch-target-min);
}
}
/* ============================================ */
/* REDUCED MOTION (single definition) */
/* ============================================ */
@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;
}
}
/* ============================================ */
/* HIGH CONTRAST (single definition) */
/* ============================================ */
@media (prefers-contrast: high) {
:root {
--glass-primary: rgba(255, 255, 255, 0.25);
--glass-border: rgba(0, 0, 0, 0.3);
}
[data-theme="dark"],
[data-theme="darkart"],
[data-theme="darkmodern"] {
--glass-primary: rgba(0, 0, 0, 0.35);
--glass-border: rgba(255, 255, 255, 0.4);
}
}
/* ============================================ */
/* ORIENTATION */
/* ============================================ */
@media (max-height: 30em) and (orientation: landscape) {
.modal-responsive {
max-height: 90vh;
overflow-y: auto;
}
.sidebar-responsive {
position: fixed;
height: 100vh;
}
}
@media (min-width: 48em) and (max-width: 64em) and (orientation: portrait) {
.grid-tablet-portrait {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================ */
/* DARK MODE SYSTEM PREFERENCE */
/* ============================================ */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
}
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
color-scheme: light;
}
}
/* ============================================ */
/* PRINT (single definition) */
/* ============================================ */
@media print {
.no-print {
display: none !important;
}
.print-only {
display: block !important;
}
.glass-card,
.glass-container,
.coeus-box {
background: white !important;
backdrop-filter: none !important;
border: 1px solid #ccc !important;
}
body {
color: black !important;
background: white !important;
}
.page-break-before { page-break-before: always; }
.page-break-after { page-break-after: always; }
.avoid-page-break { page-break-inside: avoid; }
}
/* ============================================ */
/* 9. COMPONENTS */
/* Reusable UI components (unchanged) */
/* ============================================ */
/**
* Radix UI Component Customizations
*
* This file contains all Radix UI component overrides and customizations
* for the COEUS application.
*
* Components included:
* - Animations (@keyframes)
* - Dialog/Modal
* - AlertDialog
* - Select
* - ScrollArea
* - ToggleGroup
* - Tooltip
* - Toast
* - Separator
* - Progress
* - Custom utility classes
*/
/* ============================================ */
/* BODONI MODA FONT SETTINGS */
/* ============================================ */
/* All Radix components use Bodoni Moda */
[data-radix-dialog-content],
[data-radix-alert-dialog-content],
[data-radix-select-trigger],
[data-radix-select-content],
[data-radix-select-item],
[data-radix-tooltip-content],
[data-radix-toast-root],
.radix-card,
.radix-button {
font-family: var(--font-sans);
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
/* Headings and titles in Radix components - heavier weight */
[data-radix-dialog-content] h1,
[data-radix-dialog-content] h2,
[data-radix-dialog-content] h3,
[data-radix-dialog-content] h4,
[data-radix-dialog-content] h5,
[data-radix-dialog-content] h6,
[data-radix-alert-dialog-content] h1,
[data-radix-alert-dialog-content] h2,
[data-radix-alert-dialog-content] h3,
.radix-card h1,
.radix-card h2,
.radix-card h3 {
font-family: var(--font-serif);
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}
/* ============================================ */
/* RADIX ANIMATIONS */
/* ============================================ */
@keyframes overlayShow {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes contentShow {
from {
opacity: 0;
transform: translate(-50%, -48%) scale(0.96);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes slideUpAndFade {
from {
opacity: 0;
transform: translateY(2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDownAndFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
transform: translateX(calc(100% + 25px));
}
to {
transform: translateX(0);
}
}
@keyframes swipeOut {
from {
transform: translateX(var(--radix-toast-swipe-end-x));
}
to {
transform: translateX(calc(100% + 25px));
}
}
/* Animation utility classes */
[data-state="open"] {
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.data-\[state\=open\]\:animate-overlayShow[data-state="open"] {
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.data-\[state\=open\]\:animate-contentShow[data-state="open"] {
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ============================================ */
/* DIALOG COMPONENT STYLES */
/* ============================================ */
[data-radix-dialog-overlay] {
background-color: var(--text-tertiary);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: fixed;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9998;
}
[data-radix-dialog-content] {
background: var(--glass-secondary, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
color: var(--text-primary);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 900px;
max-height: 85vh;
padding: 25px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
}
/* ============================================ */
/* ALERT DIALOG COMPONENT STYLES */
/* ============================================ */
[data-radix-alert-dialog-overlay] {
background-color: var(--text-tertiary);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: fixed;
inset: 0;
animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9998;
}
[data-radix-alert-dialog-content] {
background: var(--glass-secondary, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
color: var(--text-primary);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vw;
max-width: 450px;
padding: 20px;
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
z-index: 9999;
}
/* ============================================ */
/* SELECT COMPONENT STYLES */
/* ============================================ */
[data-radix-select-trigger] {
display: inline-flex;
align-items: center;
justify-content: space-between;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.5;
gap: 5px;
background: var(--glass-primary, rgba(255, 255, 255, 0.1));
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
color: var(--text-primary);
cursor: pointer;
transition: all 0.2s ease;
}
[data-radix-select-trigger]:hover {
background: var(--glass-hover, rgba(255, 255, 255, 0.15));
border-color: var(--ios-system-orange, #f97316);
}
[data-radix-select-trigger]:focus {
outline: none;
border-color: var(--ios-system-orange, #f97316);
box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}
[data-radix-select-content] {
background: var(--glass-secondary, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
border-radius: 8px;
padding: 5px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 10000;
}
[data-radix-select-item] {
display: flex;
align-items: center;
height: 32px;
padding: 0 25px 0 12px;
position: relative;
border-radius: 4px;
cursor: pointer;
color: var(--text-primary);
transition: background-color 0.15s;
outline: none;
}
[data-radix-select-item]:hover {
background: var(--glass-hover, rgba(0, 0, 0, 0.05));
}
[data-radix-select-item][data-highlighted] {
background: var(--glass-hover, rgba(249, 115, 22, 0.1));
}
/* ============================================ */
/* SCROLL AREA COMPONENT STYLES */
/* ============================================ */
[data-radix-scroll-area-viewport] {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
[data-radix-scroll-area-viewport]::-webkit-scrollbar {
display: none;
}
[data-radix-scroll-area-scrollbar] {
display: flex;
user-select: none;
touch-action: none;
padding: 2px;
background: transparent;
transition: background 150ms;
}
[data-radix-scroll-area-scrollbar]:hover {
background: var(--glass-primary, rgba(0, 0, 0, 0.05));
}
[data-radix-scroll-area-scrollbar][data-orientation="vertical"] {
width: 10px;
}
[data-radix-scroll-area-thumb] {
flex: 1;
background: var(--text-tertiary, rgba(0, 0, 0, 0.3));
border-radius: 10px;
position: relative;
}
[data-radix-scroll-area-thumb]:hover {
background: var(--text-secondary, rgba(0, 0, 0, 0.5));
}
/* ============================================ */
/* TOGGLE GROUP COMPONENT STYLES */
/* ============================================ */
[data-radix-toggle-group-root] {
display: inline-flex;
background: var(--glass-primary, rgba(0, 0, 0, 0.05));
border-radius: 8px;
padding: 2px;
gap: 2px;
}
[data-radix-toggle-group-item] {
background-color: transparent;
color: var(--text-secondary);
height: 32px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
border: none;
outline: none;
}
[data-radix-toggle-group-item]:hover {
background: var(--glass-hover, rgba(255, 255, 255, 0.5));
}
[data-radix-toggle-group-item][data-state="on"] {
background: var(--glass-secondary, rgba(255, 255, 255, 0.85));
color: var(--text-primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* ============================================ */
/* TOOLTIP COMPONENT STYLES */
/* ============================================ */
[data-radix-tooltip-content] {
background: var(--glass-secondary, rgba(31, 41, 55, 0.95));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
color: var(--text-primary);
border-radius: 6px;
padding: 8px 12px;
font-size: 12px;
line-height: 1.5;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
z-index: 10001;
}
/* ============================================ */
/* TOAST COMPONENT STYLES */
/* ============================================ */
[data-radix-toast-viewport] {
position: fixed;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
padding: 25px;
gap: 10px;
width: 390px;
max-width: 100vw;
margin: 0;
list-style: none;
z-index: 10000;
}
[data-radix-toast-root] {
background: var(--glass-secondary, rgba(255, 255, 255, 0.85));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
color: var(--text-primary);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 15px;
display: grid;
grid-template-areas: "title action" "description action";
grid-template-columns: auto max-content;
column-gap: 15px;
align-items: center;
}
[data-radix-toast-root][data-state="open"] {
animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-radix-toast-root][data-state="closed"] {
animation: swipeOut 100ms ease-out;
}
/* ============================================ */
/* SEPARATOR COMPONENT STYLES */
/* ============================================ */
[data-radix-separator-root] {
background: var(--glass-border, rgba(0, 0, 0, 0.1));
}
[data-radix-separator-root][data-orientation="horizontal"] {
height: 1px;
width: 100%;
}
[data-radix-separator-root][data-orientation="vertical"] {
width: 1px;
height: 100%;
}
/* ============================================ */
/* PROGRESS COMPONENT STYLES */
/* ============================================ */
[data-radix-progress-root] {
position: relative;
overflow: hidden;
background: var(--glass-primary, rgba(0, 0, 0, 0.1));
border-radius: 99999px;
width: 100%;
height: 8px;
}
[data-radix-progress-indicator] {
background: linear-gradient(90deg, var(--ios-system-orange, #f97316), var(--ios-system-yellow, #fbbf24));
width: 100%;
height: 100%;
transition: transform 300ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* ============================================ */
/* CUSTOM RADIX UTILITY CLASSES */
/* ============================================ */
.radix-card {
background: var(--glass-primary, rgba(255, 255, 255, 0.1));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
color: var(--text-primary);
border-radius: 12px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.radix-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
border-color: var(--glass-border-hover, rgba(249, 115, 22, 0.3));
}
.radix-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s;
cursor: pointer;
border: none;
outline: none;
}
.radix-button-primary {
background: linear-gradient(135deg, var(--ios-system-orange, #f97316), #fb923c);
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}
.radix-button-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}
.radix-button-secondary {
background: var(--glass-secondary, rgba(0, 0, 0, 0.05));
color: var(--text-primary);
border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.1));
}
.radix-button-secondary:hover {
background: var(--glass-hover, rgba(0, 0, 0, 0.08));
border-color: var(--glass-border-hover, rgba(249, 115, 22, 0.3));
}
.radix-button-danger {
background: linear-gradient(135deg, var(--ios-system-red, #ef4444), #f87171);
color: var(--text-primary);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.radix-button-danger:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
/* ============================================ */
/* DARK THEME SPECIFIC ADJUSTMENTS */
/* ============================================ */
[data-theme="dark"] [data-radix-dialog-content],
[data-theme="dark"] [data-radix-alert-dialog-content],
[data-theme="dark"] [data-radix-toast-root],
[data-theme="dark"] [data-radix-select-content],
[data-theme="darkart"] [data-radix-dialog-content],
[data-theme="darkart"] [data-radix-alert-dialog-content],
[data-theme="darkart"] [data-radix-toast-root],
[data-theme="darkart"] [data-radix-select-content],
[data-theme="darkmodern"] [data-radix-dialog-content],
[data-theme="darkmodern"] [data-radix-alert-dialog-content],
[data-theme="darkmodern"] [data-radix-toast-root],
[data-theme="darkmodern"] [data-radix-select-content] {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .radix-card,
[data-theme="darkart"] .radix-card,
[data-theme="darkmodern"] .radix-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .radix-card:hover,
[data-theme="darkart"] .radix-card:hover,
[data-theme="darkmodern"] .radix-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* ============================================ */
/* RADIX THEMES.CSS VARIABLE OVERRIDES */
/* ============================================ */
/* Override Radix themes variables for COEUS dark themes */
[data-theme="dark"],
[data-theme="darkart"],
[data-theme="darkmodern"] {
/* Map Radix color variables to COEUS theme system */
--color-background: var(--glass-primary);
--color-panel-solid: var(--glass-secondary);
--color-panel-translucent: var(--glass-primary);
--color-surface: var(--glass-secondary);
/* Override Radix accent colors to use COEUS orange */
--accent-9: var(--ios-system-orange);
--accent-10: #fb923c;
--accent-a8: rgba(249, 115, 22, 0.8);
/* Override Radix gray scale for dark themes */
--gray-1: rgba(20, 20, 20, 0.95);
--gray-2: rgba(30, 30, 30, 0.9);
--gray-3: rgba(40, 40, 40, 0.85);
--gray-12: var(--text-primary);
--gray-11: var(--text-secondary);
/* Override blue to use orange (brand color) */
--blue-9: var(--ios-system-orange);
--blue-indicator: var(--ios-system-orange);
--blue-track: var(--ios-system-orange);
}
/* Override Radix Select components for proper theme colors */
[data-theme="dark"] [data-radix-select-trigger],
[data-theme="darkart"] [data-radix-select-trigger],
[data-theme="darkmodern"] [data-radix-select-trigger] {
background: var(--glass-primary);
border-color: var(--glass-border);
color: var(--text-primary);
}
[data-theme="dark"] [data-radix-select-item],
[data-theme="darkart"] [data-radix-select-item],
[data-theme="darkmodern"] [data-radix-select-item] {
color: var(--text-primary);
}
[data-theme="dark"] [data-radix-select-item][data-highlighted],
[data-theme="darkart"] [data-radix-select-item][data-highlighted],
[data-theme="darkmodern"] [data-radix-select-item][data-highlighted] {
background: var(--glass-hover);
color: var(--text-primary);
}
/* Override Radix Progress indicator */
[data-theme="dark"] [data-radix-progress-indicator],
[data-theme="darkart"] [data-radix-progress-indicator],
[data-theme="darkmodern"] [data-radix-progress-indicator] {
background: linear-gradient(90deg, var(--ios-system-orange, #f97316), #fb923c);
}
/* Override Radix Tooltip for dark themes */
[data-theme="dark"] [data-radix-tooltip-content],
[data-theme="darkart"] [data-radix-tooltip-content],
[data-theme="darkmodern"] [data-radix-tooltip-content] {
background: var(--glass-secondary);
border: 1px solid var(--glass-border);
color: var(--text-primary);
}
/**
* @file icons.css
* @description Radix Icon System Styles
*
* Icon system uses SVG sprites with references
* No inline SVG code - all icons referenced via