/*
Theme Name: IT Pro Theme
Theme URI: https://itprotutorials.com
Author: IT Pro Tutorials
Author URI: https://itprotutorials.com
Description: A GitHub Dark Mode inspired theme for IT tutorials blog covering RMM tools, VPNs, self-hosting, and open-source.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itpro-theme
*/

:root {
  /* Base */
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  /* Dark palette — Amber Forge */
  --background-dark: hsl(230, 15%, 12%);
  --on-background-dark: hsl(0, 0%, 100%);
  --primary-dark: hsl(38, 92%, 55%);
  --primary-hover-dark: hsl(38, 92%, 48%);
  --primary-outline-dark: hsl(38, 92%, 50%);
  --primary-outline-hover-dark: hsl(38, 92%, 60%);
  --surface-dark: hsl(230, 14%, 16%);
  --on-surface-dark: hsl(230, 8%, 55%);
  --on-surface-2-dark: hsl(230, 8%, 65%);
  --surface-variant-dark: hsl(230, 12%, 20%);
  --surface-variant-hover-dark: hsl(230, 12%, 24%);
  --on-surface-variant-dark: hsl(230, 8%, 48%);
  --surface-variant-outline-dark: hsl(230, 12%, 23%);
  --surface-variant-outline-hover-dark: hsl(230, 12%, 35%);
  --error-dark: hsl(0, 100%, 71%);
  --error-alpha-10-dark: hsla(0, 100%, 71%, 0.1);
  --outline-dark: hsl(230, 12%, 20%);
  --surface-1-dark: hsl(230, 14%, 17%);
  --surface-1-hover-dark: hsl(230, 14%, 21%);
  --surface-1-outline-dark: hsl(230, 14%, 20%);
  --surface-1-outline-hover-dark: hsl(230, 12%, 35%);
  --alpha-80-dark: hsla(0, 0%, 100%, 0.8);
  --alpha-70-dark: hsla(0, 0%, 100%, 0.7);
  --alpha-60-dark: hsla(0, 0%, 100%, 0.6);
  --alpha-50-dark: hsla(0, 0%, 100%, 0.5);
  --alpha-10-dark: hsla(0, 0%, 100%, 0.1);
  --alpha-5-dark: hsla(0, 0%, 100%, 0.05);
  --overlay-bg-dark: hsla(230, 15%, 6%, 0.5);

  /* Light palette — Amber Forge */
  --background-light: hsl(40, 20%, 98%);
  --on-background-light: hsl(230, 15%, 15%);
  --primary-light: hsl(38, 80%, 42%);
  --primary-hover-light: hsl(38, 80%, 36%);
  --primary-outline-light: hsl(38, 80%, 40%);
  --primary-outline-hover-light: hsl(38, 80%, 32%);
  --surface-light: hsl(40, 20%, 95%);
  --on-surface-light: hsl(230, 8%, 40%);
  --on-surface-2-light: hsl(230, 8%, 36%);
  --surface-variant-light: hsl(38, 16%, 89%);
  --surface-variant-hover-light: hsl(38, 16%, 79%);
  --on-surface-variant-light: hsl(230, 8%, 35%);
  --surface-variant-outline-light: hsl(38, 12%, 85%);
  --surface-variant-outline-hover-light: hsl(38, 12%, 75%);
  --error-light: hsl(0, 54%, 49%);
  --error-alpha-10-light: hsla(0, 54%, 49%, 0.1);
  --outline-light: hsl(38, 10%, 83%);
  --surface-1-light: hsl(40, 20%, 96%);
  --surface-1-hover-light: hsl(40, 20%, 90%);
  --surface-1-outline-light: hsl(38, 18%, 92%);
  --surface-1-outline-hover-light: hsl(38, 18%, 82%);
  --alpha-80-light: hsla(0, 0%, 0%, 0.8);
  --alpha-70-light: hsla(0, 0%, 0%, 0.7);
  --alpha-60-light: hsla(0, 0%, 0%, 0.6);
  --alpha-50-light: hsla(0, 0%, 0%, 0.5);
  --alpha-10-light: hsla(0, 0%, 0%, 0.1);
  --alpha-5-light: hsla(0, 0%, 0%, 0.05);
  --overlay-bg-light: hsla(230, 8%, 56%, 0.5);

  /* Typography */
  --font-primary: "Poppins", sans-serif;
  --font-body: var(--font-primary);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semiBold: 600;
  --weight-bold: 700;
  --title-1: clamp(28px, 5vw, 48px);
  --title-2: clamp(20px, 3vw, 24px);
  --title-3: clamp(16px, 2.5vw, 18px);
  --body: 16px;
  --label-1: 14px;
  --label-2: 12px;

  /* Border Radius */
  --radius: 8px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-24: 24px;
  --radius-pill: 500px;
  --radius-circle: 50%;

  /* Transitions */
  --transition-timing-function: cubic-bezier(0.14, 0.97, 0.59, 1);
  --transition-short: 150ms var(--transition-timing-function);
  --transition-medium: 250ms var(--transition-timing-function);
  --transition-long: 500ms var(--transition-timing-function);

  /* Layout */
  --header-height: 72px;
  --max-width: 1280px;
}

[data-theme="dark"] {
  color-scheme: dark;

  --background: var(--background-dark);
  --on-background: var(--on-background-dark);
  --primary: var(--primary-dark);
  --primary-hover: var(--primary-hover-dark);
  --primary-outline: var(--primary-outline-dark);
  --primary-outline-hover: var(--primary-outline-hover-dark);
  --surface: var(--surface-dark);
  --on-surface: var(--on-surface-dark);
  --on-surface-2: var(--on-surface-2-dark);
  --surface-variant: var(--surface-variant-dark);
  --surface-variant-hover: var(--surface-variant-hover-dark);
  --on-surface-variant: var(--on-surface-variant-dark);
  --surface-variant-outline: var(--surface-variant-outline-dark);
  --surface-variant-outline-hover: var(--surface-variant-outline-hover-dark);
  --error: var(--error-dark);
  --error-alpha-10: var(--error-alpha-10-dark);
  --outline: var(--outline-dark);
  --surface-1: var(--surface-1-dark);
  --surface-1-hover: var(--surface-1-hover-dark);
  --surface-1-outline: var(--surface-1-outline-dark);
  --surface-1-outline-hover: var(--surface-1-outline-hover-dark);
  --alpha-80: var(--alpha-80-dark);
  --alpha-70: var(--alpha-70-dark);
  --alpha-60: var(--alpha-60-dark);
  --alpha-50: var(--alpha-50-dark);
  --alpha-10: var(--alpha-10-dark);
  --alpha-5: var(--alpha-5-dark);
  --overlay-bg: var(--overlay-bg-dark);

  /* Backward-compat aliases for existing theme.css selectors */
  --color-bg: var(--background);
  --color-canvas-default: var(--background);
  --color-canvas-overlay: var(--surface);
  --color-canvas-subtle: var(--surface-variant);
  --color-border-default: var(--outline);
  --color-border-muted: var(--surface-variant-outline);
  --color-fg-default: var(--on-background);
  --color-fg-muted: var(--on-surface);
  --color-fg-subtle: var(--on-surface-variant);
  --color-accent-fg: var(--primary);
  --color-accent-emphasis: var(--primary-hover);
  --color-accent-muted: hsla(38, 92%, 55%, 0.4);
  --color-accent-subtle: hsla(38, 92%, 55%, 0.1);
  --color-success-fg: #3fb950;
  --color-attention-fg: #d29922;
  --color-danger-fg: var(--error);
  --color-surface: var(--surface);
  --color-border: var(--outline);
  --color-text: var(--on-background);
  --color-text-muted: var(--on-surface);
  --color-accent: var(--primary);
  --color-green: #3fb950;
}

[data-theme="light"] {
  color-scheme: light;

  --background: var(--background-light);
  --on-background: var(--on-background-light);
  --primary: var(--primary-light);
  --primary-hover: var(--primary-hover-light);
  --primary-outline: var(--primary-outline-light);
  --primary-outline-hover: var(--primary-outline-hover-light);
  --surface: var(--surface-light);
  --on-surface: var(--on-surface-light);
  --on-surface-2: var(--on-surface-2-light);
  --surface-variant: var(--surface-variant-light);
  --surface-variant-hover: var(--surface-variant-hover-light);
  --on-surface-variant: var(--on-surface-variant-light);
  --surface-variant-outline: var(--surface-variant-outline-light);
  --surface-variant-outline-hover: var(--surface-variant-outline-hover-light);
  --error: var(--error-light);
  --error-alpha-10: var(--error-alpha-10-light);
  --outline: var(--outline-light);
  --surface-1: var(--surface-1-light);
  --surface-1-hover: var(--surface-1-hover-light);
  --surface-1-outline: var(--surface-1-outline-light);
  --surface-1-outline-hover: var(--surface-1-outline-hover-light);
  --alpha-80: var(--alpha-80-light);
  --alpha-70: var(--alpha-70-light);
  --alpha-60: var(--alpha-60-light);
  --alpha-50: var(--alpha-50-light);
  --alpha-10: var(--alpha-10-light);
  --alpha-5: var(--alpha-5-light);
  --overlay-bg: var(--overlay-bg-light);

  /* Backward-compat aliases for existing theme.css selectors */
  --color-bg: var(--background);
  --color-canvas-default: var(--background);
  --color-canvas-overlay: var(--surface);
  --color-canvas-subtle: var(--surface-variant);
  --color-border-default: var(--outline);
  --color-border-muted: var(--surface-variant-outline);
  --color-fg-default: var(--on-background);
  --color-fg-muted: var(--on-surface);
  --color-fg-subtle: var(--on-surface-variant);
  --color-accent-fg: var(--primary);
  --color-accent-emphasis: var(--primary-hover);
  --color-accent-muted: hsla(38, 80%, 42%, 0.4);
  --color-accent-subtle: hsla(38, 80%, 42%, 0.1);
  --color-success-fg: #2da44e;
  --color-attention-fg: #bf8700;
  --color-danger-fg: var(--error);
  --color-surface: var(--surface);
  --color-border: var(--outline);
  --color-text: var(--on-background);
  --color-text-muted: var(--on-surface);
  --color-accent: var(--primary);
  --color-green: #2da44e;
}