/*
Theme Name: SkillBridge
Theme URI:
Description: Custom WordPress theme built from Figma. A reusable ACF Flexible-Content module system for an e-learning / course platform. Pixel-perfect at 1920px, fully responsive down to mobile.
Version: 1.0
Author:
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: skillbridge
*/

:root {
  /* === Colors (from figma-audit.json -> colors[]) === */
  --color-heading: #262626;
  --color-heading-2: #1A1A1A;
  --color-text-dark: #333333;
  --color-text: #4C4C4D;
  --color-text-muted: #59595A;
  --color-text-light: #656567;
  --color-arrow: #4C4C4C;
  --color-primary: #FF9500;
  --color-primary-2: #FF9900;
  --color-accent-red: #FF4A00;
  --color-primary-tint: #FFF4E5;
  --color-primary-tint-2: #FFF9F0;
  --color-primary-border: #FFEACC;
  --color-border: #F1F1F3;
  --color-divider: #E4E4E7;
  --color-highlight-border: #FFD599;
  --color-surface: #F7F7F8;
  --color-card: #FCFCFD;
  --color-white: #FFFFFF;
  --color-or-text: #98989A;
  --color-video-overlay: rgba(0, 0, 0, 0.2);
  --color-play-bg: rgba(255, 255, 255, 0.2);
  --color-play-border: rgba(255, 255, 255, 0.3);

  /* === Font families (from figma-audit.json -> meta.fonts) === */
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* === Font sizes (from figma-audit.json -> typography[]) === */
  --fs-display: 80px;   /* benefit-number 700, price 600 */
  --fs-h2: 48px;        /* section-heading 600, faq-heading 600, hero-badge 700 */
  --fs-h3: 38px;        /* hero-heading 500 */
  --fs-h4: 24px;        /* benefit-title 600, card-title 600 */
  --fs-plan: 22px;      /* plan-title 500 */
  --fs-lg: 20px;        /* instructor-name, price-unit, features-title, footer-heading */
  --fs-body: 18px;      /* body, badge-text, faq-answer, nav-link, nav-link-active */

  /* === Font weights === */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Border radius (from figma-audit.json -> border_radius.tokens[]) === */
  --radius-xs: 4px;     /* login/anmelden checkbox */
  --radius-input: 10px; /* login/anmelden inputs + buttons */
  --radius-sm: 6px;     /* nav buttons, pricing tabs, icon containers */
  --radius-md: 8px;     /* primary buttons, logo, images, feature items */
  --radius-lg: 12px;    /* cards, FAQ cards, section containers */
  --radius-pill: 100px; /* play button, pill buttons */

  /* === Layout (from figma-audit.json -> meta) === */
  --design-width: 1920px;
  --content-max: 1596px;
  --side-gutter: 162px;

  /* === Transitions === */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;
}

/* === Base reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface); /* #F7F7F8 — page canvas fill from Figma (all frames), not white */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: 1.2;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}