/**
 * Hack Your Tech Career — Design Tokens
 * Recreated from hackyourtechcareer.com visual brand audit.
 */

:root {
  /* Brand Core Colors */
  --color-brand-primary: #C26148;
  --color-brand-primary-hover: #ad523b;
  --color-brand-primary-active: #96432f;
  --color-brand-primary-soft: rgba(194, 97, 72, 0.10);
  --color-brand-primary-ghost: rgba(194, 97, 72, 0.05);

  --color-brand-accent: #FF4C60;
  --color-brand-accent-hover: #e6384c;
  --color-brand-accent-soft: rgba(255, 76, 96, 0.12);

  --color-dark-navy: #1E293B;
  --color-charcoal: #131315;
  --color-slate-muted: #475569;

  /* Typography Colors */
  --color-text-main: #131315;
  --color-text-body: #333333;
  --color-text-secondary: #555962;
  --color-text-muted: #848B98;
  --color-text-inverse: #FFFFFF;

  /* Surface & Background Colors */
  --color-bg-base: #F8F6F2;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle: #F3EFE8;
  --color-bg-card: #FFFFFF;
  --color-bg-card-hover: #FFFDF9;

  /* Borders & Dividers */
  --color-border: #E8E1D7;
  --color-border-light: #F0EAE1;
  --color-border-active: #C26148;

  /* Playful Geometric Pastel Accents (From Original Site SVG Shapes) */
  --pastel-amber: #FFE6B2;
  --pastel-green: #CDEDCE;
  --pastel-peach: #F1C5AE;
  --pastel-stone: #EDEAE5;
  --pastel-sky: #CDE3FD;
  --pastel-purple: #E6DAFD;

  /* Functional Status Colors */
  --color-success: #10B981;
  --color-success-soft: #D1FAE5;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF3C7;
  --color-info: #3B82F6;
  --color-info-soft: #DBEAFE;

  /* Typography Families */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-editorial: 'Playfair Display', Georgia, serif;

  /* Font Scale */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1.0625rem;/* 17px matching original site 1.7rem */
  --text-lg: 1.1875rem;  /* 19px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.625rem;  /* 26px */
  --text-3xl: 2.125rem;  /* 34px */
  --text-4xl: 2.75rem;   /* 44px */

  /* Spacing Scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 9999px;

  /* Elevations */
  --shadow-sm: 0 2px 4px rgba(19, 19, 21, 0.04);
  --shadow-md: 0 4px 16px rgba(19, 19, 21, 0.06);
  --shadow-lg: 0 10px 30px rgba(19, 19, 21, 0.08);
  --shadow-tactile: 0 4px 0 #1E293B;
  --shadow-tactile-primary: 0 4px 0 #96432f;
  --shadow-tactile-active: 0 1px 0 #1E293B;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}