/* =========================================================================
   Museum of Arcadia — Design Tokens
   Single source of truth for colors, type scale, spacing, and breakpoints.
   ========================================================================= */

:root {
  /* ----- Colors ----- */
  --moa-black:        #000000;   /* Figma prototype — pure black */
  --moa-black-figma:  #000000;
  --moa-anthracite:   #1C1C1E;   /* Transparent button hover fill */
  --moa-white:        #FFFFFF;   /* Page background */
  --moa-panel:        #F5F5F5;   /* Welcome / order / cart card panels */
  --moa-panel-hover:  #EEEEEE;   /* Mobile menu row hover */
  --moa-rule:         #E5E5E5;   /* Form input bottom rules, dividers */
  --moa-rule-strong:  #BFBFBF;   /* Heavier dividers */
  --moa-border-header:#AEA9A9;   /* Figma header / newsletter border */
  --moa-nav-active:   #880700;   /* Figma Main Title active underline */
  --moa-muted:        #9C9C9C;   /* "Required field*", placeholders, inactive */
  --moa-muted-2:      #6E6E6E;   /* Secondary body text */
  --moa-error:        #C8102E;   /* Error message text — TBD exact, placeholder */
  --moa-badge:        #C8102E;   /* Cart count badge — TBD exact, placeholder */
  --moa-overlay:      rgba(0,0,0,0.7); /* Sold-state overlay */

  /* ----- Typography stacks ----- */
  --font-sans:    'Sweet Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-serif:   'EB Garamond', 'Times New Roman', Times, serif;

  /* ----- Type scale (desktop base) ----- */
  --fs-page-title:    2rem;      /* 32px — page H1 across the site */
  --fs-section:       1.375rem;  /* 22px — section heading e.g. "WELCOME [name]", "ORDER 1234" */
  --fs-card-title:    1.25rem;   /* 20px — card titles */
  --fs-body:          1rem;      /* 16px */
  --fs-small:         0.875rem;  /* 14px */
  --fs-tiny:          0.8125rem; /* 13px */
  --fs-button:        0.8125rem; /* 13px caps — general buttons */
  --fs-nav:           0.75rem;   /* 12px — Figma nav links */
  --fs-contact:       0.6875rem; /* 11px — CONTACT US */
  --fs-button-label:  0.925rem;  /* 14.8px — transparent CTAs */
  --fs-subscribe:     0.88125rem;/* 14.1px — subscribe button */

  /* ----- Letter spacing ----- */
  --ls-caps:          0.08em;
  --ls-caps-tight:    0.04em;
  --ls-button:        0.12em;
  --ls-nav:           0.05em;    /* 0.6px @ 12px */
  --ls-contact:       0.171875em; /* 1.8906px @ 11px */

  /* ----- Line heights ----- */
  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* ----- Spacing ----- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   80px;
  --s-10:  120px;

  /* ----- Layout ----- */
  --container-max:    1440px;
  --container-pad-d:  72px;
  --container-pad-m:  16px;

  /* ----- Borders / radii ----- */
  --border-thin:   1px solid var(--moa-black);
  --border-rule:   1px solid var(--moa-rule);
  --radius-none:   0;
  --radius-pill:   999px;

  /* ----- Animation ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --t-fast:        150ms;
  --t-base:        300ms;
  --t-drawer:      350ms;
  --t-page:        500ms;

  /* ----- Z-index layers ----- */
  --z-header:        100;
  --z-mobile-menu:   200;
  --z-cart-drawer:   300;
  --z-modal:         400;

  /* ----- Header (Figma Navigation — 137px) ----- */
  --header-height:    137px;
  --header-row-1:     137px;    /* legacy alias */
  --header-row-2:     0px;      /* nav is inside center column in v3 */
  --header-mobile:    72px;
  --header-checkout:  92px;
  --header-pad-left:  143px;
  --header-pad-right: 143px;
  --logo-width:       85.5px;
  --logo-height:      79.5px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  :root {
    --fs-page-title:    1.5rem;    /* 24px */
    --fs-section:       1.125rem;  /* 18px */
    --fs-card-title:    1.0625rem; /* 17px */
    --container-pad-d:  20px;
  }
}


/* =========================================================================
   KADENCE PARENT PALETTE OVERRIDES
   Belt-and-suspenders defence: even if a Kadence parent stylesheet manages
   to load (e.g. via a plugin re-enqueueing it), these overrides keep the
   palette CSS variables on MOA values rather than the Tailwind-blue defaults
   the parent ships.
   ========================================================================= */

:root {
    --global-palette-btn:           #FFFFFF;
    --global-palette-btn-bg:        #111111;
    --global-palette-btn-hover:     #111111;
    --global-palette-btn-bg-hover:  #FFFFFF;
    --global-palette1:              #111111;
    --global-palette2:              #1C1C1E;
    --global-palette3:              #FFFFFF;
    --global-palette9:              #111111;
}