/*
Theme Name: XP
Theme URI: https://xp.com
Author: XP
Author URI: https://xp.com
Description: XP Custom WordPress Theme
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
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: xp
Tags: custom-logo, full-width-template, footer-widgets
*/

/* ─── Fonts ──────────────────────────────────────────────── */
@font-face {
  font-family: 'Replica Mono Trial';
  src: url('assets/fonts/Replica-Mono.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Degular Mono';
  src: url('assets/fonts/DegularMonoDemo-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --color-bg:       #000000;
  --color-surface:  #222222;
  --color-charcoal: #323232;
  --color-text:     #ffffff;
  --color-muted:    #888888;
  --color-subtle:   #E5E5E5;
  --color-body:     #B0B0B0;
  --color-border:   #333333;

  --color-panel: #0A282A;

  --color-chill-peppermint: #1EBDA1;
  --color-berry:            #EC559E;
  --color-cool-mint:        #4B9AED;
  --color-fresh-mint:       #1BCE54;
  --color-watermelon-frost: #EB5782;

  --font-primary: 'Courier New', Courier, monospace;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;

  --max-width: 1400px;
}

/* ─── Base ───────────────────────────────────────────────── */
html { font-size: 16px; }

body {
  background-color: var(--color-bg);
  color: var(--color-body);
  font-family: 'Funnel Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.7; }
img { display: block; max-width: 100%; height: auto; }

/* ─── Section backgrounds ───────────────────────────────── */
.section-bg--surface { background: #1D1D1D; }
.section-bg--deep    { background: #111111; }

/* ─── Section subtitle ──────────────────────────────────── */
.section-subtitle {
  font-family: 'Neue Regrade', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Headings ──────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Neue Regrade', sans-serif;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  color: #FAFAFA;
}

h1 { font-size: 60px; }
h2 { font-size: 48px; }
h3 { font-size: 38px; }
h4 { font-size: 30px; }
h5 { font-size: 24px; }
h6 { font-size: 20px; }

/* ─── Responsive headings ───────────────────────────────── */
@media ( max-width: 768px ) {
  h1 { font-size: 45px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
  h4 { font-size: 22px; }
  h5 { font-size: 18px; }
  h6 { font-size: 15px; }

  .container {
    padding: 0 var(--space-sm) !important;
  }
}

/* ─── Layout wrapper ────────────────────────────────────── */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}