shahdlala66
125 lines
3.3 KiB
CSS
125 lines
3.3 KiB
CSS
/* ========================================
|
|
COLOR VARIABLES - Semantic Naming
|
|
======================================== */
|
|
|
|
/* Light Mode Colors (Default) */
|
|
:root:not([data-theme='dark']) {
|
|
/* Primary Colors - Light Mode */
|
|
--color-primary: #BA6D4B;
|
|
--color-primary-dark: #5A2C28;
|
|
--color-primary-light: #F3C8A0;
|
|
|
|
/* Secondary Colors - Light Mode */
|
|
--color-secondary-mint: #B9DAD1;
|
|
--color-secondary-blue: #B9C2DA;
|
|
--color-secondary-purple: #C19EF5;
|
|
--color-secondary-lime: #E1EAA9;
|
|
|
|
/* Functional Colors - Light Mode */
|
|
--color-bg-main: #F3C8A0;
|
|
--color-bg-board: #B9DAD1;
|
|
--color-bg-card: #E1EAA9;
|
|
--color-bg-input: #B9DAD1;
|
|
--color-bg-input-focus: #B9C2DA;
|
|
--color-bg-button: #C19EF5;
|
|
--color-bg-button-hover: #ba4ba7;
|
|
|
|
--color-text-primary: #5A2C28;
|
|
--color-text-button-hover: #F3C8A0;
|
|
--color-border: #5a2843;
|
|
}
|
|
|
|
/* Dark Mode Colors */
|
|
:root[data-theme='dark'] {
|
|
/* Primary Colors - Dark Mode */
|
|
--color-primary: #1a3a52;
|
|
--color-primary-dark: #0f1f2e;
|
|
--color-primary-light: #2d5a7b;
|
|
|
|
/* Secondary Colors - Dark Mode */
|
|
--color-secondary-mint: #4a7c7c;
|
|
--color-secondary-blue: #5a6fa5;
|
|
--color-secondary-purple: #7d5fa8;
|
|
--color-secondary-lime: #6b8e23;
|
|
|
|
/* Functional Colors - Dark Mode */
|
|
--color-bg-main: #1a2f47;
|
|
--color-bg-board: #2d5a7b;
|
|
--color-bg-card: #3d4e63;
|
|
--color-bg-input: #2d4a6f;
|
|
--color-bg-input-focus: #3d5a8f;
|
|
--color-bg-button: #5a7da5;
|
|
--color-bg-button-hover: #7a9dc5;
|
|
|
|
--color-text-primary: #e8f0f8;
|
|
--color-text-button-hover: #ffffff;
|
|
--color-border: #4a7c9c;
|
|
}
|
|
|
|
:root {
|
|
|
|
/* ========================================
|
|
TYPOGRAPHY SIZES
|
|
======================================== */
|
|
|
|
/* Header Sizes */
|
|
--heading-h1: clamp(1.5rem, 4vw, 2rem);
|
|
--heading-h1-tablet: clamp(1.25rem, 3vw, 1.75rem);
|
|
--heading-h1-mobile: 1.25rem;
|
|
--heading-h1-small: 1.1rem;
|
|
|
|
--heading-h2: clamp(1.5rem, 4vw, 2rem);
|
|
|
|
/* ========================================
|
|
SPACING SIZES (XS, SM, MD, LG, XL)
|
|
======================================== */
|
|
|
|
/* Extra Small - Minimal spacing */
|
|
--size-xs: 0.25rem;
|
|
--size-xs-padding: 0.4rem;
|
|
--size-xs-gap: 0.15rem;
|
|
|
|
/* Small - Compact spacing */
|
|
--size-sm: 0.5rem;
|
|
--size-sm-padding: 0.5rem;
|
|
--size-sm-gap: 0.35rem;
|
|
|
|
/* Medium - Default spacing */
|
|
--size-md: 0.75rem;
|
|
--size-md-padding: 0.6rem 0.75rem;
|
|
--size-md-gap: 0.5rem;
|
|
|
|
/* Large - Generous spacing */
|
|
--size-lg: 1rem;
|
|
--size-lg-padding: 1rem;
|
|
--size-lg-gap: 0.75rem;
|
|
|
|
/* Extra Large - Maximum spacing */
|
|
--size-xl: 1.5rem;
|
|
--size-xl-padding: 1.5rem;
|
|
--size-xl-gap: 1rem;
|
|
|
|
/* ========================================
|
|
BORDER & RADIUS
|
|
======================================== */
|
|
--border-width: 2px;
|
|
--border-radius-sm: 8px;
|
|
--border-radius-md: 10px;
|
|
--border-radius-lg: 12px;
|
|
|
|
/* ========================================
|
|
FORM ELEMENTS
|
|
======================================== */
|
|
--form-input-padding: 0.6rem 0.75rem;
|
|
--form-input-border: var(--border-width) solid var(--color-border);
|
|
--form-input-radius: var(--border-radius-md);
|
|
|
|
--button-padding: 0.6rem 1rem;
|
|
--button-border: var(--border-width) solid var(--color-border);
|
|
--button-radius: var(--border-radius-sm);
|
|
|
|
/* ========================================
|
|
SHADOWS
|
|
======================================== */
|
|
--shadow-md: 0 8px 24px rgba(90, 44, 40, 0.2);
|
|
} |