/* ============================================================
   Perlas Atelier — Coming Soon page
   ------------------------------------------------------------
   Self-contained styles for the pre-launch page rendered by
   includes/coming-soon.php. Deliberately independent of the
   active theme (tokens + font are bundled with the plugin) so
   the page survives theme changes, matching the plugin's remit.

   The :root tokens below are copied from the brand design system
   (perlas-atelier-theme/assets/css/tokens.css === colors_and_type.css).
   Only the Dosis face is bundled — it is the only family this page
   uses (headings + body). The wordmark is an image.
   ============================================================ */

@font-face {
  font-family: "Dosis";
  src: url("coming-soon/Dosis-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Palette ---- */
  --navy-900: #0f2c45;
  --navy-700: #1a476f;
  --navy-500: #3d6a92;
  --navy-200: #aebecd;
  --navy-050: #e8edf2;

  --sand-700: #8a7866;
  --sand-500: #b6a48f;
  --sand-300: #d2c2b3;
  --sand-100: #e7dccf;

  --cream-050: #faf6f0;
  --cream-100: #efe7dc;
  --cream-200: #e3d8c8;

  --pearl-000: #ffffff;
  --pearl-050: #fdfbf7;

  --ink-900: #1a1a1a;
  --ink-700: #3a3a3a;
  --ink-500: #6b6357;
  --ink-300: #a89e91;

  /* ---- Semantic ---- */
  --bg: var(--cream-100);
  --fg: var(--navy-700);
  --accent: var(--navy-700);
  --accent-hover: var(--navy-500);
  --accent-press: var(--navy-900);

  --border: rgba(26, 71, 111, 0.14);
  --border-strong: rgba(26, 71, 111, 0.28);
  --focus-ring: rgba(26, 71, 111, 0.45);

  /* ---- Type ---- */
  --sans-heading: "Dosis", system-ui, sans-serif;
  --sans-body: "Dosis", system-ui, sans-serif;

  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;

  --ls-wide: 0.08em;
  --ls-widest: 0.32em;

  /* ---- Spacing (4px base) ---- */
  --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;

  /* ---- Radii ---- */
  --radius-sm: 4px;
  --radius-lg: 14px;

  /* ---- Elevation ---- */
  --shadow-1: 0 1px 2px rgba(26, 71, 111, 0.05), 0 1px 1px rgba(26, 71, 111, 0.03);
  --shadow-2: 0 6px 16px -8px rgba(26, 71, 111, 0.18), 0 2px 4px rgba(26, 71, 111, 0.04);
  --shadow-pearl: 0 0 0 1px rgba(255,255,255,0.5) inset, 0 8px 24px -12px rgba(26,71,111,0.18);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-2: 220ms;
}

/* ---- Base ---- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-700);
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  color: var(--navy-700);
  font-family: var(--sans-heading);
  line-height: 1.1;
  margin: 0;
}

button { font-family: inherit; }

/* [hidden] must win over inline `display: flex` on the signup/success blocks,
   otherwise the toggled panels never hide. */
[hidden] { display: none !important; }

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Wide-tracked uppercase eyebrow — pairs with the wordmark */
.eyebrow {
  font-family: var(--sans-heading);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--navy-700);
}

/* Email field — placeholder + focus (from the design) */
.pa-email::placeholder { color: var(--ink-300); }
.pa-email:focus {
  border-color: var(--navy-500) !important;
  box-shadow: 0 0 0 3px rgba(26, 71, 111, .18) !important;
}