/*
 * Theme Name:        Meras X
 * Theme URI:         https://merasx.com
 * Description:       Global Growth Infrastructure — custom theme for Meras X.
 * Version:           1.0.0
 * Author:            Meras X
 * Author URI:        https://merasx.com
 * Text Domain:       merasx
 * Domain Path:       /languages
 * Requires at least: 6.4
 * Requires PHP:      8.0
 * License:           Proprietary
 *
 * Design System
 * Premium Black:  #0A0A0A
 * Matte Gold:     #D4AF37
 * Pure White:     #FFFFFF
 */

/* ==========================================================================
   CSS Custom Properties — Design Tokens
   ========================================================================== */

:root {
    /* Brand Colours */
    --mx-black:        #0A0A0A;
    --mx-gold:         #D4AF37;
    --mx-white:        #FFFFFF;

    /* Extended Palette */
    --mx-black-soft:   #111111;
    --mx-black-card:   #161616;
    --mx-black-border: rgba(255, 255, 255, 0.08);
    --mx-gold-dim:     rgba(212, 175, 55, 0.15);
    --mx-gold-hover:   #c9a82e;
    --mx-white-70:     rgba(255, 255, 255, 0.70);
    --mx-white-40:     rgba(255, 255, 255, 0.40);
    --mx-white-12:     rgba(255, 255, 255, 0.12);

    /* Typography */
    --mx-font-sans:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mx-font-serif:   'IBM Plex Serif', Georgia, 'Times New Roman', serif;

    /* Type Scale (fluid) */
    --mx-text-xs:      clamp(0.75rem,  1.2vw, 0.8125rem);
    --mx-text-sm:      clamp(0.875rem, 1.4vw, 0.9375rem);
    --mx-text-base:    clamp(1rem,     1.6vw, 1.0625rem);
    --mx-text-lg:      clamp(1.125rem, 1.8vw, 1.25rem);
    --mx-text-xl:      clamp(1.25rem,  2vw,   1.5rem);
    --mx-text-2xl:     clamp(1.5rem,   2.5vw, 2rem);
    --mx-text-3xl:     clamp(2rem,     3.5vw, 3rem);
    --mx-text-4xl:     clamp(2.5rem,   5vw,   4.5rem);
    --mx-text-hero:    clamp(3rem,     7vw,   7rem);

    /* Line Heights */
    --mx-leading-tight:  1.15;
    --mx-leading-snug:   1.35;
    --mx-leading-normal: 1.6;
    --mx-leading-loose:  1.8;

    /* Letter Spacing */
    --mx-tracking-tight:  -0.02em;
    --mx-tracking-normal:  0em;
    --mx-tracking-wide:    0.04em;
    --mx-tracking-wider:   0.08em;
    --mx-tracking-widest:  0.16em;

    /* Spacing Scale */
    --mx-space-1:    0.25rem;
    --mx-space-2:    0.5rem;
    --mx-space-3:    0.75rem;
    --mx-space-4:    1rem;
    --mx-space-5:    1.25rem;
    --mx-space-6:    1.5rem;
    --mx-space-8:    2rem;
    --mx-space-10:   2.5rem;
    --mx-space-12:   3rem;
    --mx-space-16:   4rem;
    --mx-space-20:   5rem;
    --mx-space-24:   6rem;
    --mx-space-32:   8rem;
    --mx-space-section: clamp(5rem, 10vw, 9rem);

    /* Layout */
    --mx-container:      1440px;
    --mx-container-text: 780px;
    --mx-gutter:         clamp(1.5rem, 5vw, 5rem);
    --mx-grid-cols:      12;

    /* Borders */
    --mx-radius-sm:  2px;
    --mx-radius:     4px;
    --mx-radius-lg:  8px;
    --mx-border:     1px solid var(--mx-black-border);

    /* Shadows */
    --mx-shadow-card:   0 2px 32px rgba(0, 0, 0, 0.5);
    --mx-shadow-glow:   0 0 40px rgba(212, 175, 55, 0.12);

    /* Motion */
    --mx-ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --mx-ease-in:   cubic-bezier(0.4, 0, 1, 1);
    --mx-ease-out:  cubic-bezier(0, 0, 0.2, 1);
    --mx-duration:  0.4s;
    --mx-duration-fast: 0.2s;

    /* Z-index layers */
    --mx-z-base:    1;
    --mx-z-sticky:  100;
    --mx-z-overlay: 200;
    --mx-z-modal:   300;
}

/* ==========================================================================
   Minimal Reset
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background-color: var(--mx-black);
    color: var(--mx-white);
    font-family: var(--mx-font-sans);
    font-size: var(--mx-text-base);
    line-height: var(--mx-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

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

ul,
ol {
    list-style: none;
}

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

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

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mx-font-sans);
    font-weight: 600;
    line-height: var(--mx-leading-tight);
    letter-spacing: var(--mx-tracking-tight);
}

:focus-visible {
    outline: 2px solid var(--mx-gold);
    outline-offset: 3px;
    border-radius: var(--mx-radius-sm);
}