/* Qaori Alter Platform - Global Styles */
/* Brand color tokens - MUST be first import */
/**
 * Qaori Brand Color Tokens
 * Single source of truth for all color values across WordPress and React surfaces
 * Derived from Elementor palette
 * 
 * Date: April 2026
 * Epic: 22-react-ui-refactor
 * Status: WP-03 Implementation
 */
:root {
  /* ── Backgrounds ─────────────────────────────── */
  --color-bg-primary:      #001540;   /* Page / app background (Deep Marine Blue) */
  --color-bg-secondary:    #0A0F1E;   /* Cards, modals, panels (Warm Navy Black) */
  --color-surface-light:   #F4F6FA;   /* Elevated panels, input backgrounds */

  /* ── Typography ──────────────────────────────── */
  --color-text-heading:    #FFFFFF;   /* H1/H2, hero statements ONLY (32px+) */
  --color-text-body:       #E8EDF5;   /* All body copy, labels, descriptions */
  --color-text-muted:      #A8B4C8;   /* Supporting text, placeholders, metadata */

  /* ── Interactive ─────────────────────────────── */
  --color-accent:          #004D9B;   /* Links, borders, info states (Marine) */
  --color-cta:             #C47B2B;   /* CTAs, Alter ring ONLY — never decorative (Amber) */

  /* ── Neutral ─────────────────────────────────── */
  --color-neutral:         #CFCFCF;   /* Dividers, disabled states (Light Gray) */
}
/* ────────────────────────────────────────────────
   AMBER RULE (CRITICAL):
   --color-cta is consumed EXCLUSIVELY by <CTAButton>
   No other component may reference this variable
   ──────────────────────────────────────────────── */
/* Global resets and base styles */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: 'Figtree', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg-primary);
  color: var(--color-text-body);
}
#root {
  min-height: 100vh;
}
/* ────────────────────────────────────────────────
   Typography Token System (WP-05)
   Enforces heading/body text split
   ──────────────────────────────────────────────── */
/* Display headings - Pure white reserved for highest hierarchy (32px+) */
h1,
h2 {
  color: var(--color-text-heading);   /* #FFFFFF — display only */
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}
/* Section headings - Cool blue off-white */
h3,
h4,
h5,
h6 {
  color: var(--color-text-body);      /* #E8EDF5 */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.3;
}
/* Body text - Default reading layer */
p,
span,
li,
td,
th,
label,
div {
  color: var(--color-text-body);      /* #E8EDF5 */
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
/* Input placeholders */
::placeholder {
  color: var(--color-text-muted);     /* #A8B4C8 */
  opacity: 1;
}
:-ms-input-placeholder {
  color: var(--color-text-muted);
}
::-ms-input-placeholder {
  color: var(--color-text-muted);
}
/* Supporting text classes */
.text-muted,
.helper-text,
.caption,
.metadata {
  color: var(--color-text-muted);     /* #A8B4C8 */
  font-size: 0.875rem;
}
/* Links */
a {
  color: var(--color-accent);         /* #004D9B */
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover {
  color: var(--color-text-heading);   /* #FFFFFF */
  text-decoration: underline;
}