style: styles file added

2026-04-19 00:24:43 +02:00
parent 8c97a726a7
commit 53459648c6
5 changed files with 218 additions and 130 deletions
@@ -0,0 +1,94 @@
+/* ========================================
+   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);
+}