src/app/components/chess-board/chess-board.component.css

@@ -7,10 +7,10 @@
 .board-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
-  border: 2px solid #5A2C28;
-  border-radius: 10px 10px 0 0;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
   overflow: hidden;
-  background: #5A2C28;
+  background: var(--color-text-primary);
 }
 
 .square {
@@ -41,12 +41,13 @@
   width: 28%;
   height: 28%;
   border-radius: 50%;
-  background: rgba(193, 158, 245, 0.75);
-  border: 2px solid #5A2C28;
+  background: var(--color-secondary-purple);
+  opacity: 0.75;
+  border: var(--border-width) solid var(--color-border);
 }
 
 .square.selected {
-  outline: 3px solid #BA6D4B;
+  outline: 3px solid var(--color-primary);
   outline-offset: -3px;
 }
 
@@ -55,7 +56,7 @@
   width: 100%;
   display: block;
   object-fit: fill;
-  border: 2px solid #5A2C28;
+  border: var(--border-width) solid var(--color-border);
   border-top: 0;
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
 }

src/app/pages/game/game.component.css

@@ -1,38 +1,38 @@
 .game-shell {
   min-height: 100dvh;
-  padding: clamp(0.75rem, 2vw, 1.5rem);
+  padding: clamp(var(--size-md), 2vw, var(--size-xl));
 }
 
 .game-card {
   max-width: 1400px;
   margin: 0 auto;
-  background: #F3C8A0;
-  border: 2px solid #5A2C28;
-  border-radius: 12px;
-  padding: clamp(1rem, 2vw, 1.5rem);
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  background: var(--color-bg-main);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-lg);
+  padding: clamp(var(--size-lg), 2vw, var(--size-xl));
+  box-shadow: var(--shadow-md);
 }
 
 header {
-  margin-bottom: 1.5rem;
+  margin-bottom: var(--size-xl);
 }
 
 h1,
 h2 {
-  color: #5A2C28;
-  margin: 0 0 0.5rem;
-  font-size: clamp(1.5rem, 4vw, 2rem);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--size-md);
+  font-size: var(--heading-h1);
 }
 
 .meta {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-size: 0.95rem;
 }
 
 .back-link {
   display: inline-block;
-  margin-bottom: 0.5rem;
-  color: #5A2C28;
+  margin-bottom: var(--size-sm);
+  color: var(--color-text-primary);
   text-decoration: none;
   font-weight: 600;
 }
@@ -43,8 +43,8 @@ h2 {
 
 .top-section {
   display: grid;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
+  gap: var(--size-md);
+  margin-bottom: var(--size-sm);
   flex: 0 0 auto;
 }
 
@@ -52,48 +52,48 @@ h2 {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--size-lg);
 }
 
 .move-form label {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-weight: 600;
 }
 
 .board-hint {
   margin: 0;
-  color: #5A2C28;
+  color: var(--color-text-primary);
 }
 
 .move-form button {
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  background: #C19EF5;
-  color: #5A2C28;
-  padding: 0.6rem 1rem;
+  border: var(--button-border);
+  border-radius: var(--border-radius-md);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  padding: var(--button-padding);
   cursor: pointer;
   font-weight: 600;
 }
 
 .move-form button:hover {
-  background: #BA6D4B;
-  color: #F3C8A0;
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
 }
 
 /* Unified form input class for all text inputs and textareas */
 .form-input {
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  background: #B9DAD1;
-  padding: 0.6rem 0.75rem;
+  border: var(--form-input-border);
+  border-radius: var(--form-input-radius);
+  background: var(--color-bg-input);
+  padding: var(--form-input-padding);
   font-family: inherit;
   min-width: 180px;
 }
 
 .form-input:focus {
   outline: none;
-  background: #B9C2DA;
-  border-color: #BA6D4B;
+  background: var(--color-bg-input-focus);
+  border-color: var(--color-primary);
 }
 
 .center-column {
@@ -101,28 +101,28 @@ h2 {
 }
 
 .board-section {
-  background: #B9DAD1;
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: clamp(0.5rem, 1vw, 1rem);
+  background: var(--color-bg-board);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: clamp(var(--size-sm), 1vw, var(--size-lg));
   min-height: 400px;
   container-type: size;
 }
 
 .import-card {
-  background: #E1EAA9;
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: 1rem;
+  background: var(--color-bg-card);
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: var(--size-lg-gap);
 }
 
 .import-card label {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-weight: 700;
-  margin-bottom: 0.25rem;
+  margin-bottom: var(--size-xs);
 }
 
 .import-card textarea {
@@ -135,29 +135,29 @@ h2 {
 }
 
 .btn {
-  border: 2px solid #5A2C28;
-  border-radius: 8px;
-  background: #C19EF5;
-  color: #5A2C28;
-  padding: 0.6rem 1rem;
+  border: var(--button-border);
+  border-radius: var(--border-radius-sm);
+  background: var(--color-bg-button);
+  color: var(--color-text-primary);
+  padding: var(--button-padding);
   cursor: pointer;
   font-weight: 600;
   transition: background-color 0.2s, color 0.2s;
 }
 
 .btn:hover {
-  background: #BA6D4B;
-  color: #F3C8A0;
+  background: var(--color-bg-button-hover);
+  color: var(--color-text-button-hover);
 }
 
 .alert {
-  border-radius: 8px;
-  border: 2px solid #5A2C28;
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width) solid var(--color-border);
 }
 
 @media (max-width: 991px) {
   .game-card {
-    padding: clamp(0.75rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-md), 1.5vw, var(--size-lg));
   }
 
   .board-section {
@@ -166,26 +166,26 @@ h2 {
 
   h1,
   h2 {
-    font-size: clamp(1.25rem, 3vw, 1.75rem);
+    font-size: var(--heading-h1-tablet);
   }
 }
 
 @media (max-width: 768px) {
   .game-shell {
-    padding: clamp(0.5rem, 1.5vw, 1rem);
+    padding: clamp(var(--size-sm), 1.5vw, var(--size-lg));
   }
 
   .game-card {
-    padding: clamp(0.5rem, 1vw, 0.75rem);
+    padding: clamp(var(--size-sm), 1vw, var(--size-md));
   }
 
   header {
-    margin-bottom: 1rem;
+    margin-bottom: var(--size-lg);
   }
 
   h1,
   h2 {
-    font-size: 1.25rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   .meta {
@@ -193,13 +193,13 @@ h2 {
   }
 
   .top-section {
-    gap: 0.25rem;
-    margin-bottom: 0.25rem;
+    gap: var(--size-xs);
+    margin-bottom: var(--size-xs);
   }
 
   .move-form {
     flex-direction: column;
-    gap: 0.5rem;
+    gap: var(--size-md);
   }
 
   .move-form label {
@@ -213,15 +213,16 @@ h2 {
 
   .move-form button {
     width: 100%;
-    padding: 0.5rem 0.75rem;
+    padding: var(--size-sm-padding);
   }
 
   .board-section {
     min-height: 300px;
   }
+
   .import-card {
-    padding: 0.75rem;
-    gap: 0.5rem;
+    padding: var(--size-md-padding);
+    gap: var(--size-md-gap);
   }
 
   .import-card label {
@@ -232,31 +233,31 @@ h2 {
   .import-card input {
     min-height: 70px;
     font-size: 0.9rem;
-    padding: 0.5rem;
+    padding: var(--size-sm-padding);
   }
 
   .btn {
-    padding: 0.5rem 0.75rem;
+    padding: var(--size-sm-padding);
     font-size: 0.9rem;
   }
 }
 
 @media (max-width: 480px) {
   .game-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .game-card {
-    padding: 0.5rem;
-    border-radius: 8px;
+    padding: var(--size-sm);
+    border-radius: var(--border-radius-md);
   }
 
   header {
-    margin-bottom: 0.75rem;
+    margin-bottom: var(--size-md);
   }
 
   h1 {
-    font-size: 1.1rem;
+    font-size: var(--heading-h1-small);
   }
 
   .meta {
@@ -264,8 +265,8 @@ h2 {
   }
 
   .top-section {
-    gap: 0.15rem;
-    margin-bottom: 0.25rem;
+    gap: var(--size-xs-gap);
+    margin-bottom: var(--size-xs);
   }
 
   .board-section {
@@ -273,14 +274,14 @@ h2 {
   }
 
   .import-card {
-    padding: 0.5rem;
-    gap: 0.35rem;
+    padding: var(--size-sm-padding);
+    gap: var(--size-sm-gap);
   }
 
   .import-card textarea,
   .import-card input {
     min-height: 50px;
     font-size: 0.8rem;
-    padding: 0.4rem;
+    padding: var(--size-xs-padding);
   }
 }

src/app/pages/welcome/welcome.component.css

@@ -2,98 +2,99 @@
   min-height: 100vh;
   display: grid;
   place-items: center;
-  padding: 2rem;
+  padding: var(--size-xl);
 }
 
 .welcome-card {
   width: min(900px, 100%);
-  border-radius: 12px;
-  border: 2px solid #5A2C28;
-  background: #F3C8A0;
-  padding: 2rem;
-  box-shadow: 0 8px 24px rgba(90, 44, 40, 0.2);
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width) solid var(--color-border);
+  background: var(--color-bg-main);
+  padding: var(--size-xl-padding);
+  box-shadow: var(--shadow-md);
 }
 
 h1 {
-  margin: 0 0 0.25rem;
-  color: #5A2C28;
+  margin: 0 0 var(--size-xs);
+  color: var(--color-text-primary);
+  font-size: var(--heading-h1);
 }
 
 p {
-  margin: 0 0 1.25rem;
+  margin: 0 0 var(--size-lg);
 }
 
 .mode-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1rem;
+  gap: var(--size-xl-gap);
 }
 
 .mode {
-  border: 2px solid #5A2C28;
-  border-radius: 10px;
-  padding: 1rem;
+  border: var(--border-width) solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: var(--size-lg-padding);
   text-align: left;
   display: grid;
-  gap: 0.25rem;
+  gap: var(--size-xs);
 }
 
 .mode span {
   font-size: 1.15rem;
-  color: #5A2C28;
+  color: var(--color-text-primary);
 }
 
 .mode small {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   opacity: 0.9;
 }
 
 .mode-active {
-  background: #B9DAD1;
+  background: var(--color-secondary-mint);
   cursor: pointer;
 }
 
 .mode-active:hover:enabled {
-  background: #B9C2DA;
+  background: var(--color-secondary-blue);
 }
 
 .mode-disabled {
-  background: #E1EAA9;
+  background: var(--color-bg-card);
   opacity: 0.75;
 }
 
 .error {
-  color: #5A2C28;
+  color: var(--color-text-primary);
   font-weight: 700;
-  margin-top: 1rem;
+  margin-top: var(--size-xl);
 }
 
 @media (max-width: 768px) {
   .welcome-shell {
-    padding: 1rem;
+    padding: var(--size-lg);
   }
 
   .welcome-card {
-    padding: 1.5rem;
+    padding: var(--size-xl);
   }
 
   h1 {
-    font-size: 1.5rem;
+    font-size: var(--heading-h1-mobile);
   }
 
   p {
     font-size: 0.875rem;
-    margin: 0 0 1rem;
+    margin: 0 0 var(--size-lg);
   }
 
   .mode-grid {
     grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
-    gap: 0.75rem;
+    gap: var(--size-md-gap);
   }
 
   .mode {
-    padding: 0.75rem;
-    gap: 0.15rem;
+    padding: var(--size-md-padding);
+    gap: var(--size-xs-gap);
   }
 
   .mode span {
@@ -111,22 +112,22 @@ p {
 
 @media (max-width: 480px) {
   .welcome-shell {
-    padding: 0.5rem;
+    padding: var(--size-sm);
   }
 
   .welcome-card {
-    padding: 1rem;
-    border-radius: 8px;
+    padding: var(--size-lg-padding);
+    border-radius: var(--border-radius-md);
   }
 
   h1 {
-    font-size: 1.25rem;
-    margin: 0 0 0.15rem;
+    font-size: var(--heading-h1-small);
+    margin: 0 0 var(--size-xs);
   }
 
   p {
     font-size: 0.8rem;
-    margin: 0 0 0.75rem;
+    margin: 0 0 var(--size-md);
   }
 
   .mode-grid {
@@ -134,7 +135,7 @@ p {
   }
 
   .mode {
-    padding: 0.65rem;
+    padding: var(--size-md-padding);
   }
 
   .mode span {

src/styles-variables.css

@@ -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);
+}

src/styles.css

@@ -1,15 +1,6 @@
+@import 'styles-variables.css';
 @import 'bootstrap/dist/css/bootstrap.min.css';
 
-:root {
-  --warm-primary: #BA6D4B;
-  --warm-dark: #5A2C28;
-  --warm-light: #F3C8A0;
-  --cool-mint: #B9DAD1;
-  --cool-blue: #B9C2DA;
-  --cool-purple: #C19EF5;
-  --cool-lime: #E1EAA9;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -19,8 +10,8 @@ body {
   margin: 0;
   min-height: 100%;
   font-family: "Comic Sans MS", "Comic Sans", cursive;
-  background: linear-gradient(160deg, var(--warm-light), var(--cool-mint));
-  color: var(--warm-dark);
+  background: linear-gradient(160deg, var(--color-primary-light), var(--color-secondary-mint));
+  color: var(--color-text-primary);
 }
 
 button,