/*
 * Semantic token layer.
 * Maps the raw design tokens (exposed by theme.json as --wp--preset--* and
 * --wp--custom--*) onto intent-based variables used across main.css and the
 * block patterns. Change a value here to re-theme without touching components.
 */

:root {
  /* Surfaces & text */
  --apex-bg: var(--wp--preset--color--background);
  --apex-surface: var(--wp--preset--color--surface);
  --apex-text: var(--wp--preset--color--text);
  --apex-text-muted: var(--wp--preset--color--text-muted);
  --apex-border: color-mix(in srgb, var(--apex-text) 12%, transparent);

  /* Accents */
  --apex-primary: var(--wp--preset--color--primary);
  --apex-secondary: var(--wp--preset--color--secondary);

  /* Layout */
  --apex-header-h: 5rem; /* 80px, measured in Figma (Nav Bar - Header) */
  --apex-header-pad: 2rem; /* 32px side padding, measured in Figma */
  --apex-section-gap: clamp(4rem, 10vw, 8rem);

  /* Radii & shadows (from Figma) */
  --apex-radius-sm: var(--wp--custom--radius--8);
  --apex-radius-md: var(--wp--custom--radius--12);
  --apex-radius-full: var(--wp--custom--radius--full);
  --apex-shadow-lg: var(--wp--custom--shadow--lg);

  /* Motion */
  --apex-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --apex-transition: 0.4s var(--apex-ease);

  /* Icons */
  /* Diagonal arrow exported from Figma (project_assets/icons/ArrowUpRight.svg) */
  --apex-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M0.962534 17.5737L-7.17284e-05 16.5994L15.2377 1.34993L2.67666 1.35007L2.67668 5.72157e-05L17.562 -0.000111687L17.5619 14.8852L16.1884 14.8853L16.212 2.31253L0.962534 17.5737Z' fill='%23000'/%3E%3C/svg%3E");
  --apex-arrow-down-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --apex-close-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  /* Outlined play triangle exported from Figma (project_assets/icons/Play.svg) */
  --apex-play-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M6.25 6.25001C6.24987 5.81012 6.36581 5.37799 6.5861 4.99725C6.8064 4.6165 7.12326 4.30062 7.50469 4.0815C7.88612 3.86239 8.3186 3.74779 8.75849 3.74928C9.19837 3.75078 9.63007 3.86831 10.01 4.09001L25.0062 12.8375C25.3847 13.0571 25.6989 13.3722 25.9174 13.7513C26.136 14.1303 26.2512 14.5601 26.2515 14.9977C26.2519 15.4352 26.1375 15.8652 25.9196 16.2447C25.7017 16.6241 25.3881 16.9398 25.01 17.16L10.01 25.91C9.63007 26.1317 9.19837 26.2492 8.75849 26.2507C8.3186 26.2522 7.88612 26.1376 7.50469 25.9185C7.12326 25.6994 6.8064 25.3835 6.5861 25.0028C6.36581 24.622 6.24987 24.1899 6.25 23.75V6.25001Z' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Metallic gradient used on hero display type */
  --apex-metallic: linear-gradient(
    92deg,
    #ffffff 0%,
    #d9c9a3 22%,
    #b98f52 48%,
    #f4e9cf 66%,
    #8a6a34 84%,
    #ffffff 100%
  );
}