shahdlala66
94 lines
2.5 KiB
CSS
94 lines
2.5 KiB
CSS
/* ========================================
|
|
COLOR VARIABLES - Semantic Naming
|
|
======================================== */
|
|
|
|
:root {
|
|
/* Primary Colors */
|
|
--color-primary: #BA6D4B;
|
|
--color-primary-dark: #5A2C28;
|
|
--color-primary-light: #F3C8A0;
|
|
|
|
/* Secondary Colors */
|
|
--color-secondary-mint: #B9DAD1;
|
|
--color-secondary-blue: #B9C2DA;
|
|
--color-secondary-purple: #C19EF5;
|
|
--color-secondary-lime: #E1EAA9;
|
|
|
|
/* Functional Colors */
|
|
--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: #BA6D4B;
|
|
|
|
--color-text-primary: #5A2C28;
|
|
--color-text-button-hover: #F3C8A0;
|
|
--color-border: #5A2C28;
|
|
|
|
/* ========================================
|
|
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);
|
|
} |