/* NoBSFit design system — Stage 13 "Smoked Athletic Final" Cream/Dark palette. Cream is the default product theme; Dark is the opt-in variant (the `.dark` class on , toggled by UiEngine.applyTheme/toggleTheme). Color values are taken directly from the accepted Stage 13 handoff (design/stitch/stage13-review/final/*.html, --canvas/--ink/--olive/... custom properties) and re-expressed under the variable names the rest of the stylesheet already keys off of, so existing components repaint correctly without per-component rewrites. */ :root { color-scheme: light; --color-bg: #E4D2B8; --color-bg-raised: #F0DFCA; --color-surface-1: #FBF6EC; --color-surface-2: #F3E8D4; --color-surface-3: #EADDC3; --color-card-bg: rgba(255, 251, 244, .92); --color-nav-bg: rgba(246, 241, 222, .88); --color-border: rgba(73, 58, 46, .19); --color-border-strong: rgba(73, 58, 46, .36); --color-card-border: var(--color-border); --color-text-main: #2B2118; --color-text-secondary: #493A2E; --color-text-muted: #594A3A; --color-primary: #55692B; --color-primary-strong: #3F4C20; --color-primary-soft: rgba(63, 76, 32, .12); --color-primary-text: #3F4C20; --color-primary-hover-bg: #4E6026; --color-primary-hover-text: #FFFFFF; --color-positive: #24542F; --color-positive-soft: rgba(36, 84, 47, .12); --color-info: #2E5368; --color-info-soft: rgba(46, 83, 104, .12); --color-warning: #6A430F; --color-warning-soft: rgba(106, 67, 15, .12); --color-danger: #7F302B; --color-danger-soft: rgba(127, 48, 43, .12); --color-neutral: #5C3654; --color-neutral-soft: rgba(92, 54, 84, .12); --color-accent-indigo: var(--color-primary-strong); --color-accent-indigo-hover: var(--color-primary); --color-accent-emerald: var(--color-positive); --color-accent-amber: var(--color-warning); --color-accent-rose: var(--color-danger); --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --font-sans: "Vazirmatn", "Segoe UI", Tahoma, Arial, sans-serif; --font-latin: "Montserrat", "Segoe UI", Inter, Arial, sans-serif; --font-display-size: clamp(1.75rem, 3vw, 2.5rem); --font-display-lh: 1.18; --font-h1-size: clamp(1.45rem, 2vw, 2rem); --font-h1-lh: 1.3; --font-h2-size: 1.25rem; --font-h2-lh: 1.45; --font-body-size: 1rem; --font-body-lh: 1.7; --font-sub-size: .875rem; --font-sub-lh: 1.6; --font-caption-size: .75rem; --font-caption-lh: 1.55; --radius-sm: .45rem; --radius-md: .7rem; --radius-lg: 1rem; --radius-xl: 1.35rem; --radius-full: 999px; --shadow-flat: none; --shadow-raised: 0 10px 28px rgba(52, 38, 21, .10); --shadow-floating: 0 18px 50px rgba(52, 38, 21, .16); --shadow-modal: 0 28px 80px rgba(52, 38, 21, .22); --control-sm: 2.5rem; --control-md: 2.875rem; --control-lg: 3.25rem; --icon-sm: 1rem; --icon-md: 1.25rem; --icon-lg: 1.5rem; --content-max: 92rem; --sidebar-width: 16.5rem; --bp-mobile: 30rem; --bp-tablet: 48rem; --bp-desktop: 64rem; --z-base: 0; --z-sticky: 30; --z-nav: 40; --z-modal: 50; --z-toast: 60; --ease-standard: cubic-bezier(.2, .8, .2, 1); --transition-fast: 120ms var(--ease-standard); --transition-normal: 220ms var(--ease-standard); --transition-slow: 360ms var(--ease-standard); } html.dark { color-scheme: dark; --color-bg: #171712; --color-bg-raised: #22211B; --color-surface-1: #201F19; --color-surface-2: #262519; --color-surface-3: #2C2B1E; --color-card-bg: rgba(44, 43, 34, .88); --color-nav-bg: rgba(23, 23, 18, .9); --color-border: rgba(246, 241, 222, .16); --color-border-strong: rgba(246, 241, 222, .3); --color-card-border: var(--color-border); --color-text-main: #F6F1DE; --color-text-secondary: #E1D6C5; --color-text-muted: #B9AB96; --color-primary: #BAC879; --color-primary-strong: #56672E; --color-primary-soft: rgba(186, 200, 121, .17); --color-primary-text: #BAC879; --color-primary-hover-bg: #BAC879; --color-primary-hover-text: #06120A; --color-positive: #94C49A; --color-positive-soft: rgba(148, 196, 154, .15); --color-info: #9FC4D4; --color-info-soft: rgba(159, 196, 212, .15); --color-warning: #E0BD77; --color-warning-soft: rgba(224, 189, 119, .15); --color-danger: #E09A92; --color-danger-soft: rgba(224, 154, 146, .15); --color-neutral: #D6AFD2; --color-neutral-soft: rgba(214, 175, 210, .15); --shadow-raised: 0 10px 30px rgba(0, 0, 0, .3); --shadow-floating: 0 18px 48px rgba(0, 0, 0, .4); --shadow-modal: 0 28px 80px rgba(0, 0, 0, .55); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }