Color System & Palette

/* Core Brand Colors - Figma Verified */
--color-black: rgb(0, 0, 0);              /* Pure black - Primary background */
--color-white: rgb(255, 255, 255);        /* Pure white - Accents & highlights */

/* Named Gray Scale */
--color-cod-gray: rgb(18, 18, 18);        /* #121212 - Dark backgrounds */
--color-cod-gray-alt: rgb(26, 26, 26);    /* #1A1A1A - Alternative dark bg */
--color-mine-shaft: rgb(42, 42, 42);      /* #2A2A2A - Medium dark gray */
--color-shark: rgb(42, 42, 42);           /* #2A2A2A - Same as Mine Shaft */
--color-boulder: rgb(117, 117, 117);      /* #757575 - Medium gray text */
--color-catskill-white: rgb(248, 250, 252); /* #F8FAFC - Very light gray */

/* Transparency Variants - White */
--color-white-5: rgba(255, 255, 255, 0.05);   /* Subtle overlays */
--color-white-10: rgba(255, 255, 255, 0.1);   /* Borders, dividers */
--color-white-20: rgba(255, 255, 255, 0.2);   /* Subtle backgrounds */

/* Transparency Variants - Black */
--color-black-20: rgba(0, 0, 0, 0.2);         /* Black overlays */

/* Transparency Variants - Cod Gray */
--color-cod-gray-67: rgba(18, 18, 18, 0.67);  /* Semi-transparent dark */

/* Accent Colors */
--color-royal-blue: rgb(37, 99, 235);         /* #2563EB - Primary blue */
--color-royal-blue-10: rgba(37, 99, 235, 0.1); /* Blue tint */
--color-cornflower-blue-10: rgba(76, 110, 245, 0.1); /* #4C6EF5 tint */
--color-blue: rgb(17, 25, 230);               /* #1119E6 - Bright blue */
--color-blue-alt: rgb(14, 24, 223);           /* #0E18DF - Alternative blue */
--color-blue-ribbon-30: rgba(0, 102, 255, 0.3); /* #0066FF tint */
--color-oxford-blue: rgb(55, 65, 81);         /* #374151 - Dark blue-gray */
--color-mountain-meadow: rgb(41, 184, 107);   /* #29B86B - Success green */

/* Article Card - Using Figma Colors */
.article-card {
  background: rgb(18, 18, 18);  /* Cod Gray */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
  border-radius: 12px;
}

.article-card:hover {
  background: rgb(26, 26, 26);  /* Cod Gray Alt */
  border-color: rgba(255, 255, 255, 0.2);
}

/* Button - Primary Action */
.button-primary {
  background: rgb(37, 99, 235);  /* Royal Blue */
  color: rgb(255, 255, 255);
  border: none;
}

.button-primary:hover {
  background: rgb(17, 25, 230);  /* Blue */
}

/* Input Field */
.input {
  background: rgb(26, 26, 26);  /* Cod Gray Alt */
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgb(255, 255, 255);
}

.input:focus {
  border-color: rgb(37, 99, 235);  /* Royal Blue */
  outline: none;
}

/* Text Hierarchy */
.text-primary {
  color: rgb(255, 255, 255);  /* White */
}

.text-secondary {
  color: rgb(117, 117, 117);  /* Boulder */
}

.text-muted {
  color: rgba(255, 255, 255, 0.67);  /* Cod Gray 67% */
}