/**
 * Design Tokens
 * Retro 1970s-inspired color palette
 *
 * This file contains all color variables for the portfolio.
 * Use role tokens (--role-*) instead of base tokens for better maintainability.
 */

:root {
  /* ==================== BASE TOKENS ==================== */

  /* Teal Scale — #259AA1 */
  --turquoise-50: rgb(230, 246, 247);
  --turquoise-100: rgb(194, 233, 235);
  --turquoise-200: rgb(143, 212, 216);
  --turquoise-300: rgb(88, 189, 194);
  --turquoise-400: rgb(49, 170, 176);
  --turquoise-500: rgb(37, 154, 161);
  --turquoise-600: rgb(30, 131, 137);
  --turquoise-700: rgb(22, 105, 112);
  --turquoise-800: rgb(16, 78, 83);
  --turquoise-900: rgb(10, 50, 53);

  /* Mustard Gold Scale — #EAA72F */
  --yellow-50: rgb(253, 245, 230);
  --yellow-100: rgb(250, 231, 191);
  --yellow-200: rgb(246, 213, 140);
  --yellow-300: rgb(242, 194, 85);
  --yellow-400: rgb(238, 179, 49);
  --yellow-500: rgb(234, 167, 47);
  --yellow-600: rgb(204, 143, 30);
  --yellow-700: rgb(168, 115, 18);
  --yellow-800: rgb(117, 79, 10);
  --yellow-900: rgb(66, 43, 4);

  /* Deep Teal Scale — #146982 */
  --blue-50: rgb(228, 241, 247);
  --blue-100: rgb(192, 224, 236);
  --blue-200: rgb(144, 200, 219);
  --blue-300: rgb(93, 174, 200);
  --blue-400: rgb(53, 152, 183);
  --blue-500: rgb(20, 105, 130);
  --blue-600: rgb(16, 89, 111);
  --blue-700: rgb(12, 72, 90);
  --blue-800: rgb(8, 52, 66);
  --blue-900: rgb(4, 30, 39);

  /* Retro Red Scale — #DA3931 */
  --coral-50: rgb(252, 236, 235);
  --coral-100: rgb(248, 208, 206);
  --coral-200: rgb(242, 170, 167);
  --coral-300: rgb(235, 131, 126);
  --coral-400: rgb(228, 94, 88);
  --coral-500: rgb(218, 57, 49);
  --coral-600: rgb(186, 44, 38);
  --coral-700: rgb(151, 34, 29);
  --coral-800: rgb(109, 24, 20);
  --coral-900: rgb(62, 13, 11);

  /* Burnt Orange Scale — #E56E2E */
  --orange-50: rgb(253, 240, 232);
  --orange-100: rgb(249, 219, 200);
  --orange-200: rgb(244, 190, 155);
  --orange-300: rgb(239, 160, 108);
  --orange-400: rgb(234, 133, 68);
  --orange-500: rgb(229, 110, 46);
  --orange-600: rgb(198, 91, 33);
  --orange-700: rgb(162, 73, 24);
  --orange-800: rgb(115, 51, 15);
  --orange-900: rgb(64, 27, 6);

  /* Neutral Scale */
  --neutral-0: rgb(255, 255, 255);
  --neutral-50: rgb(250, 250, 250);
  --neutral-100: rgb(245, 245, 245);
  --neutral-200: rgb(229, 229, 229);
  --neutral-300: rgb(212, 212, 212);
  --neutral-400: rgb(163, 163, 163);
  --neutral-500: rgb(115, 115, 115);
  --neutral-600: rgb(82, 82, 82);
  --neutral-700: rgb(64, 64, 64);
  --neutral-800: rgb(38, 38, 38);
  --neutral-900: rgb(23, 23, 23);
  --neutral-950: rgb(10, 10, 10);

  /* Drop Shadows */
  --shadow-drop: drop-shadow(0 16px 48px rgba(0, 0, 0, 0.6));
  --shadow-drop-sm: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));

  /* ==================== ROLE TOKENS ==================== */
  /* Use these for your designs instead of base tokens */

  /* Background & Surface */
  --role-background: var(--neutral-0);
  --role-background-primary: linear-gradient(180deg, var(--turquoise-100) 0%, var(--role-background) 100%);
  --role-surface: var(--neutral-50);
  --role-border: var(--neutral-200);

  /* Text Colors */
  --role-text-primary: var(--neutral-900);
  --role-text-secondary: var(--neutral-600);
  --role-text-muted: var(--neutral-500);

  /* Brand Colors */
  --role-brand-primary: var(--turquoise-500);
  --role-brand-primary-hover: var(--turquoise-600);
  --role-brand-accent: var(--yellow-500);
  --role-brand-secondary: var(--orange-500);

  /* Interactive */
  --role-link: var(--blue-500);

  /* Feedback */
  --role-error: var(--coral-600);
  --role-success: var(--turquoise-600);
  --role-highlight: var(--yellow-100);
}