/**
 * Design Tokens (Palette + Semantic)
 *
 * - Palette tokens are raw color values:   --palette-*
 * - Semantic tokens express usage/meaning: --color-*
 *
 * CTA buttons: solid brand blue.
 * Badges/labels: brand gradient family.
 */

:root {
  /* =========================
     PALETTE (raw values)
     ========================= */

  /* Neutrals */
  --palette-neutral-0: #ffffff;
  --palette-neutral-50: #f9fafb;
  --palette-neutral-75: #f8fafc;
  --palette-neutral-100: #f3f4f6;
  --palette-neutral-200: #e5e7eb;
  --palette-neutral-300: #d1d5db;
  --palette-neutral-400: #9ca3af;
  --palette-neutral-500: #6b7280;
  --palette-neutral-600: #4b5563;
  --palette-neutral-700: #374151;
  --palette-neutral-800: #1f2937;
  --palette-neutral-900: #111827;

  /* Secondary accents (used in a few non-badge places like instructor photo gradient) */
  --palette-secondary-indigo: #667eea;
  --palette-secondary-purple: #764ba2;
  --palette-secondary-violet: #7c3aed;

  /* Brand (standardize around gradient family) */
  --palette-brand-blue: #3471eb;
  --palette-brand-purple: #7f57e3;
  /* Used widely already for hover states (kept explicit for compatibility) */
  --palette-brand-blue-hover: #2d50d3;

  /* Status */
  --palette-success-500: #10b981;
  --palette-warning-500: #f59e0b;
  --palette-danger-500: #ef4444;

  /* =========================
     SEMANTIC (usage)
     ========================= */

  /* Text */
  --color-text-primary: var(--palette-neutral-800);
  --color-text-secondary: var(--palette-neutral-500);
  --color-text-tertiary: var(--palette-neutral-600);
  --color-text-muted: var(--palette-neutral-400);
  --color-text-strong: var(--palette-neutral-900);
  --color-text-inverse: var(--palette-neutral-0);

  /* Backgrounds / surfaces */
  --color-bg-page: var(--palette-neutral-0);
  --color-bg-muted: var(--palette-neutral-50);
  /* Used for “selected/active” UI states (FAQ active header background, etc.) */
  --color-bg-accent-soft: #f8f9ff;
  --color-surface: var(--palette-neutral-0);
  --color-surface-2: var(--palette-neutral-50);

  /* Borders */
  --color-border-default: var(--palette-neutral-200);
  --color-border-subtle: var(--palette-neutral-100);
  --color-border-strong: var(--palette-neutral-300);

  /* Header (used by hero/header components) */
  --color-header-bg: var(--palette-neutral-0);
  --color-header-border: var(--color-border-default);
  --color-header-link: var(--palette-neutral-600);
  --color-header-link-hover: var(--palette-neutral-800);

  /* Brand / links */
  --color-link: var(--palette-brand-blue);
  --color-link-hover: var(--palette-brand-blue-hover);

  /* CTA buttons (solid) */
  --color-cta-bg: var(--palette-brand-blue);
  --color-cta-bg-hover: var(--palette-brand-blue-hover);
  --color-cta-text: var(--palette-neutral-0);

  /* CTA buttons (inverse / on dark backgrounds) */
  --color-cta-inverse-bg: var(--palette-neutral-0);
  --color-cta-inverse-bg-hover: var(--palette-neutral-50);
  --color-cta-inverse-text: var(--color-link);

  /* Badges / labels (gradient) */
  --color-badge-bg: linear-gradient(
    135deg,
    var(--palette-brand-blue) 0%,
    var(--palette-brand-purple) 100%
  );
  --color-badge-text: var(--palette-neutral-0);

  /* Accents */
  --color-accent-gradient: var(--color-badge-bg);
  --color-avatar-gradient: linear-gradient(
    135deg,
    var(--palette-secondary-indigo) 0%,
    var(--palette-secondary-purple) 100%
  );
  --color-secondary-gradient-vertical: linear-gradient(
    180deg,
    var(--palette-secondary-indigo) 0%,
    var(--palette-secondary-violet) 100%
  );
  --color-focus-ring: var(--palette-brand-purple);

  /* Shadow/overlay color components */
  --color-shadow-1: rgba(0, 0, 0, 0.04);
  --color-shadow-2: rgba(0, 0, 0, 0.08);
  --color-shadow-strong: rgba(0, 0, 0, 0.15);
  --color-shadow-3: rgba(0, 0, 0, 0.06);
  --color-shadow-raise: rgba(0, 0, 0, 0.05);
  --color-shadow-brand-soft: rgba(55, 100, 229, 0.1);
  --color-shadow-brand-medium: rgba(55, 100, 229, 0.12);
  --color-shadow-brand: rgba(55, 100, 229, 0.25);
  --color-overlay-surface: rgba(255, 255, 255, 0.98);

  /* Soft ring / highlight */
  --color-ring-soft: #f0f4ff;

  /* Brand/secondary overlay tints */
  --color-overlay-secondary-indigo-02: rgba(102, 126, 234, 0.02);
  --color-overlay-brand-purple-03: rgba(127, 87, 227, 0.03);

  /* Assets */
  --asset-wave-about-me: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 280' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='aboutGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%233471eb' stop-opacity='0.03'/%3E%3Cstop offset='100%25' stop-color='%237f57e3' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,140 C200,90 400,180 600,140 C800,100 1000,160 1200,140 L1200,280 L0,280 Z' fill='url(%23aboutGrad)'/%3E%3C/svg%3E");
}