/* Mx2 Client Portal — design tokens
 *
 * Canonical brand reference: mx2-design-system colors_and_type.css.
 * Fonts self-hosted from public/fonts/ (license per Mx2 design system bundle).
 * Update this file by re-importing canonical values, never by inventing colors.
 */

/* ============ FONTS ──────────────────────────────────────────────────────── */
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-MediumItalic.otf") format("opentype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-SemiBoldItalic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("/public/fonts/Cormorant-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }

@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-Light.ttf") format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Josefin Sans"; src:url("/public/fonts/JosefinSans-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }

@font-face { font-family:"La Signora"; src:url("/public/fonts/LaSignora-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  /* ============ PRIMARY ─────────────────────────────────────────────────── */
  --mx2-gold:       #9f886c;
  --mx2-cream:      #d7cfad;
  --mx2-black:      #000000;

  /* SECONDARY — accent + signal */
  --mx2-teal:       #214c60;
  --mx2-amber:      #eb9b22;
  --mx2-rust:       #b84426;

  /* GOLD GRADIENT (logo + hero accent) */
  --mx2-gold-light: #e8dec9;
  --mx2-gold-mid:   #c4ad8a;
  --mx2-gold-deep:  #876e51;
  --mx2-gold-shadow:#5a4a36;
  --mx2-gold-gradient:
    linear-gradient(180deg,
      #ffffff 0%,
      var(--mx2-gold-light) 18%,
      var(--mx2-gold-mid) 48%,
      var(--mx2-gold) 72%,
      var(--mx2-gold-deep) 100%);

  /* WARM NEUTRAL SCALE */
  --mx2-paper:      #fbf9f4;
  --mx2-paper-2:    #f3eee2;
  --mx2-stone-100:  #e8e2d2;
  --mx2-stone-200:  #d0c8b3;
  --mx2-stone-300:  #b8ae93;
  --mx2-stone-400:  #8c8068;
  --mx2-stone-500:  #5d5443;
  --mx2-stone-600:  #3a342a;
  --mx2-stone-700:  #221f19;
  --mx2-stone-800:  #14120e;

  /* ============ Legacy aliases (keep until templates migrate) ────────────── */
  --gold:        var(--mx2-gold);
  --gold-hi:     var(--mx2-gold-mid);
  --gold-lo:     var(--mx2-gold-deep);
  --black:       var(--mx2-black);
  --steel:       var(--mx2-teal);
  --amber:       var(--mx2-amber);
  --red:         var(--mx2-rust);
  --cream:       var(--mx2-cream);
  --cream-lt:    var(--mx2-paper-2);
  --cream-wash:  var(--mx2-paper);
  --ink:         var(--mx2-stone-800);
  --ink-mid:     var(--mx2-stone-600);
  --ink-soft:    var(--mx2-stone-500);
  --rule:        var(--mx2-stone-200);
  --rule-lt:     var(--mx2-stone-100);

  /* ============ STATUS PALETTE ──────────────────────────────────────────── */
  /* Campaign lifecycle pills — derived from canonical signal palette. */
  --status-brief-draft:    var(--mx2-stone-500);
  --status-brief-sub:      var(--mx2-teal);
  --status-plan-gen:       #b88a1c;
  --status-plan-waiting:   var(--mx2-amber);
  --status-assets-wait:    var(--mx2-rust);
  --status-campaign-build: #5a6f3e;
  --status-launched:       #3d7a4e;
  --status-ended:          var(--mx2-stone-500);
  --status-cancelled:      var(--mx2-rust);

  /* ============ SEMANTIC (light-mode default) ───────────────────────────── */
  --bg-1: var(--mx2-paper);
  --bg-2: #ffffff;
  --bg-3: var(--mx2-paper-2);
  --bg-inverse: var(--mx2-black);

  --fg-1: var(--mx2-black);
  --fg-2: var(--mx2-stone-600);
  --fg-3: var(--mx2-stone-400);
  --fg-on-dark: #ffffff;
  --fg-on-gold: var(--mx2-black);

  --accent: var(--mx2-gold);
  --accent-strong: var(--mx2-gold-deep);
  --accent-soft: var(--mx2-cream);

  --border: var(--mx2-stone-200);
  --border-strong: var(--mx2-stone-400);
  --border-on-dark: var(--mx2-gold);

  /* ============ MX2 DARK SURFACES ───────────────────────────────────────── */
  --mx2-bg:        var(--mx2-black);
  --mx2-surface:   #0c0a07;
  --mx2-surface-2: #15110b;
  --mx2-rule:      rgba(159,136,108,.35);
  --mx2-text:      var(--mx2-stone-200);
  --mx2-text-hi:   #ffffff;

  /* ============ ELEVATION ───────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(20,18,14,.06), 0 1px 1px rgba(20,18,14,.04);
  --shadow-2: 0 4px 12px rgba(20,18,14,.08), 0 2px 4px rgba(20,18,14,.05);
  --shadow-3: 0 12px 32px rgba(20,18,14,.12), 0 6px 12px rgba(20,18,14,.06);
  --shadow-portrait: 0 24px 60px -12px rgba(0,0,0,.45), 0 8px 24px -8px rgba(0,0,0,.35);
  --inner-frame: inset 0 0 0 1px var(--mx2-gold);

  /* ============ RADII ────────────────────────────────────────────────────── */
  /* Hard edges per brand. Soft 2-4px reserved for form fields. Pills: status only. */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* Aliases for templates */
  --radius-sm:   var(--radius-0);
  --radius:      var(--radius-0);
  --radius-lg:   var(--radius-2);

  /* ============ SPACING (8pt baseline) ──────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ============ TYPOGRAPHY ──────────────────────────────────────────────── */
  --font-display: "Cormorant", "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-body:    "Josefin Sans", "Brandon Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-accent:  "La Signora", "Allura", "Pinyon Script", cursive;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Aliases */
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  --fs-display: clamp(56px, 8vw, 128px);
  --fs-h1: clamp(40px, 5vw, 72px);
  --fs-h2: clamp(32px, 4vw, 52px);
  --fs-h3: clamp(24px, 3vw, 36px);
  --fs-h4: 22px;
  --fs-eyebrow: 13px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-meta: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.75;

  --tracking-display: -0.01em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.22em;
  --tracking-button:  0.18em;

  /* ============ MOTION ──────────────────────────────────────────────────── */
  /* Confident, slightly delayed ease-out — never bouncy. */
  --ease-mx2: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 200ms var(--ease-mx2);
  --t-med:  300ms var(--ease-mx2);
  --t-hero: 700ms var(--ease-mx2);
}

/* ============ SEMANTIC TYPE STYLES ──────────────────────────────────────── */
.mx2-eyebrow {
  font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-eyebrow); color: var(--accent);
}
.mx2-gold-fill {
  background: var(--mx2-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}