/* ============================================================
   Full Moon Creative — Design System Tokens
   colors_and_type.css
   ============================================================ */

@font-face {
  font-family: 'Mistral';
  src: url('../fonts/Mistral.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {

  /* ── SPACE / DARK BACKGROUNDS ────────────────────────────── */
  --color-void:       #04060D;   /* deepest space black */
  --color-space:      #080C18;   /* primary page background */
  --color-cosmos:     #0D1530;   /* card / section surfaces */
  --color-nebula:     #13203F;   /* elevated surfaces, hover states */
  --color-horizon:    #1E3060;   /* borders, subtle dividers */

  /* ── ACCENT — PURPLE / ELECTRIC ─────────────────────────── */
  --color-lunar:      #7B2FBE;   /* primary CTA, signature accent */
  --color-aurora:     #9B59E8;   /* hover state of CTA */
  --color-electric:   #4B8FE8;   /* electric blue, secondary accent */
  --color-stardust:   #B4C8FF;   /* subtle blue tint */

  /* ── NEUTRAL / LUNAR GRAYS ───────────────────────────────── */
  --color-moonlight:  #FFFFFF;   /* primary text on dark — pure white for max contrast */
  --color-silver:     #E1E6F5;   /* secondary text — lifted from #C8D0E8 for body legibility */
  --color-crater:     #A2AEC8;   /* placeholder / ledes — lifted from #7B8AAA for body legibility */
  --color-ash:        #3A4460;   /* subtle borders on dark */

  /* ── WARM ACCENT ─────────────────────────────────────────── */
  /* Reserved for real event photography warm tones — not used in UI components */

  /* ── SEMANTIC ALIASES ────────────────────────────────────── */
  --bg-page:          var(--color-space);
  --bg-surface:       var(--color-cosmos);
  --bg-elevated:      var(--color-nebula);
  --bg-overlay:       rgba(4, 6, 13, 0.85);

  --fg-primary:       var(--color-moonlight);
  --fg-secondary:     var(--color-silver);
  --fg-muted:         var(--color-crater);
  --fg-disabled:      var(--color-ash);

  --border-subtle:    rgba(255, 255, 255, 0.07);
  --border-strong:    rgba(255, 255, 255, 0.15);

  --accent-primary:   var(--color-lunar);
  --accent-hover:     var(--color-aurora);
  --accent-secondary: var(--color-electric);
  /* --accent-warm: reserved — no warm UI accent in current palette */

  /* ── GRADIENTS ───────────────────────────────────────────── */
  --gradient-space:   linear-gradient(180deg, #04060D 0%, #0D1530 100%);
  --gradient-cta:     linear-gradient(135deg, #7B2FBE 0%, #4B8FE8 100%);
  --gradient-protect: linear-gradient(to top, rgba(4,6,13,0.95) 0%, transparent 60%);
  --gradient-glow:    radial-gradient(ellipse at center, rgba(123,47,190,0.25) 0%, transparent 70%);

  /* ── NAV / GLASS ─────────────────────────────────────────── */
  --glass-nav:        rgba(8, 12, 24, 0.75);
  --glass-card:       rgba(13, 21, 48, 0.60);
  --glass-blur-nav:   16px;
  --glass-blur-card:  8px;

  /* ── SHADOWS / ELEVATION ─────────────────────────────────── */
  --shadow-sm:        0 2px 8px  rgba(0, 0, 0, 0.35);
  --shadow-md:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg:        0 12px 48px rgba(0, 0, 0, 0.70);
  --shadow-glow:      0 0 20px   rgba(123, 47, 190, 0.35);
  --shadow-glow-lg:   0 0 40px   rgba(123, 47, 190, 0.25);

  /* ── BORDER RADIUS ───────────────────────────────────────── */
  --radius-sm:        4px;    /* buttons, inputs */
  --radius-md:        8px;    /* cards */
  --radius-lg:        16px;   /* large panels */
  --radius-full:      9999px; /* pills / badges */

  /* ── SPACING SCALE (4px base) ────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── LAYOUT ──────────────────────────────────────────────── */
  --content-max:      1280px;
  --gutter-mobile:    24px;
  --gutter-tablet:    48px;
  --gutter-desktop:   80px;
  --nav-height:       72px;

  /* ── ANIMATION ───────────────────────────────────────────── */
  --ease-out:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out:      cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:    0.15s;
  --duration-base:    0.25s;
  --duration-slow:    0.6s;

  /* ── TYPOGRAPHY FAMILIES ─────────────────────────────────── */
  --font-primary:     Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-accent:      'Mistral', cursive;

  /* ── FONT WEIGHTS ────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --text-display:     clamp(3rem,    6vw,   5.5rem);
  --text-h1:          clamp(2rem,    4vw,   3.5rem);
  --text-h2:          clamp(1.5rem,  2.5vw, 2.25rem);
  --text-h3:          1.25rem;
  --text-h4:          1.0625rem;
  /* Body scales responsively: 16px on mobile (≤768px-ish), grows to 18px at 1280px+. */
  --text-body:        clamp(1rem, 0.92rem + 0.4vw, 1.125rem);
  --text-sm:          clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-xs:          0.8125rem;
  --text-mistral:     clamp(2rem,    3vw,   3rem);

  /* ── LINE HEIGHTS ────────────────────────────────────────── */
  --leading-tight:    1.15;
  --leading-snug:     1.35;
  --leading-base:     1.65;
  --leading-relaxed:  1.8;

  /* ── LETTER SPACING ──────────────────────────────────────── */
  --tracking-tight:   -0.02em;
  --tracking-base:    0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.16em;
}

/* ── SEMANTIC ELEMENT DEFAULTS ───────────────────────────────── */

.fmc-display {
  font-family:    var(--font-primary);
  font-size:      var(--text-display);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--fg-primary);
  text-wrap:      pretty;
}

.fmc-h1 {
  font-family:    var(--font-primary);
  font-size:      var(--text-h1);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--fg-primary);
  text-wrap:      pretty;
}

.fmc-h2 {
  font-family:    var(--font-primary);
  font-size:      var(--text-h2);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--fg-primary);
  text-wrap:      pretty;
}

.fmc-h3 {
  font-family:    var(--font-primary);
  font-size:      var(--text-h3);
  font-weight:    var(--weight-semibold);
  line-height:    var(--leading-snug);
  color:          var(--fg-primary);
}

.fmc-body {
  font-family:  var(--font-primary);
  font-size:    var(--text-body);
  font-weight:  var(--weight-regular);
  line-height:  var(--leading-base);
  color:        var(--fg-secondary);
}

.fmc-label {
  font-family:    var(--font-primary);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-medium);
  line-height:    1;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--fg-muted);
}

.fmc-mistral {
  font-family: var(--font-accent);
  font-size:   var(--text-mistral);
  font-weight: 400;
  line-height: 1.2;
  color:       var(--fg-primary);
}

/* ── BASE RESET FOR FMC PAGES ────────────────────────────────── */

.fmc-root {
  background-color: var(--bg-page);
  color:            var(--fg-primary);
  font-family:      var(--font-primary);
  font-size:        var(--text-body);
  line-height:      var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}