/* ================================================================
   MACHADO — Design Tokens
   Light / Dark modes · Accent color switching
   ================================================================ */

/* --- Accent Color Definitions (HSL components) --- */

:root,
[data-accent="steel"] {
  --accent-h: 210;
  --accent-s: 35%;
  --accent-l: 45%;
}

[data-accent="teal"] {
  --accent-h: 190;
  --accent-s: 50%;
  --accent-l: 40%;
}

[data-accent="sage"] {
  --accent-h: 150;
  --accent-s: 30%;
  --accent-l: 38%;
}

[data-accent="amber"] {
  --accent-h: 35;
  --accent-s: 65%;
  --accent-l: 48%;
}

[data-accent="graphite"] {
  --accent-h: 220;
  --accent-s: 10%;
  --accent-l: 35%;
}

[data-accent="ruby"] {
  --accent-h: 345;
  --accent-s: 60%;
  --accent-l: 45%;
}

[data-accent="indigo"] {
  --accent-h: 260;
  --accent-s: 50%;
  --accent-l: 50%;
}

[data-accent="emerald"] {
  --accent-h: 160;
  --accent-s: 60%;
  --accent-l: 40%;
}

[data-accent="coral"] {
  --accent-h: 15;
  --accent-s: 70%;
  --accent-l: 55%;
}

[data-accent="plum"] {
  --accent-h: 300;
  --accent-s: 40%;
  --accent-l: 40%;
}

/* --- Light Mode (default) --- */

:root {
  color-scheme: light;

  --color-bg: hsl(220, 10%, 97%);
  --color-surface: hsl(0, 0%, 100%);
  --color-surface-alt: hsl(220, 10%, 95%);
  --color-border: hsl(220, 10%, 86%);
  --color-border-light: hsl(220, 8%, 91%);

  --color-text: hsl(220, 15%, 15%);
  --color-text-muted: hsl(220, 8%, 50%);
  --color-text-inverse: hsl(0, 0%, 100%);

  --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --color-accent-hover: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%));
  --color-accent-subtle: hsl(var(--accent-h), 20%, 93%);
  --color-accent-text: hsl(0, 0%, 100%);

  --color-success: hsl(145, 45%, 38%);
  --color-success-bg: hsl(145, 40%, 94%);
  --color-warning: hsl(40, 80%, 48%);
  --color-warning-bg: hsl(40, 70%, 94%);
  --color-danger: hsl(0, 60%, 48%);
  --color-danger-bg: hsl(0, 50%, 95%);
  --color-info: hsl(200, 50%, 44%);
  --color-info-bg: hsl(200, 40%, 94%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.10);

  --code-bg: hsl(220, 10%, 94%);
  --code-text: hsl(220, 15%, 30%);

  --overlay-bg: rgba(0,0,0,0.4);
}

/* --- Shared Structural Tokens --- */

:root {
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
  --transition-slow: 250ms ease;

  --container-max: 1200px;
  --navbar-height: 48px;

  /* --- Landing Page Tokens --- */
  --hero-height: 40vh;
  --hero-min-height: 320px;
  --section-spacing: 5rem;
  --card-hover-translate: -4px;
  --stats-counter-size: 2.5rem;
  --step-indicator-size: 2.25rem;
}