@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");
/* Webfonts served from Google Fonts. See readme.md → "Font substitutions". */


/* Pockets of Beige — colour primitives + semantic aliases */
:root{
  /* Neutral / warm ivory ramp */
  --ivory-50:#FDFCFA;--ivory-100:#FAF8F4;--ivory-200:#F7F4EE;--ivory-300:#F1EDE4;
  --ivory-400:#E5E0D7;--ivory-500:#D8CBB9;--ivory-600:#BCB1A1;
  --warm-grey-400:#A29C92;--warm-grey-500:#8A847A;--warm-grey-600:#746F67;--warm-grey-700:#57534C;
  --charcoal-800:#3A3936;--charcoal-900:#2A2926;--charcoal-950:#1D1D1B;
  --white:#FFFFFF;

  /* Accent — deep aubergine */
  --aubergine-50:#F5EDEE;--aubergine-100:#E8D8DB;--aubergine-200:#C9A9AF;
  --aubergine-500:#8A5560;--aubergine-600:#653D45;--aubergine-700:#4E2E35;--aubergine-800:#3A2228;

  /* Functional, muted */
  --success-surface:#E9EDE5;--success-border:#C3CDB8;--success-fg:#4A5B41;
  --warning-surface:#F6EEDF;--warning-border:#DFCCA5;--warning-fg:#7A5F2B;
  --error-surface:#F3E5E3;--error-border:#DCBCB6;--error-fg:#7C3F36;
  --info-surface:#E7EAED;--info-border:#BFC7CE;--info-fg:#4A565F;

  /* Semantic — surfaces */
  --surface-page:var(--ivory-200);
  --surface-card:var(--white);
  --surface-sunken:var(--ivory-300);
  --surface-inverse:var(--charcoal-950);
  --surface-accent:var(--aubergine-600);
  --surface-accent-soft:var(--aubergine-50);
  --surface-soft:var(--ivory-500);
  --surface-hover:var(--ivory-100);
  --surface-selected:var(--ivory-300);

  /* Semantic — text */
  --text-primary:var(--charcoal-950);
  --text-secondary:var(--warm-grey-600);
  --text-tertiary:var(--warm-grey-400);
  --text-inverse:var(--ivory-100);
  --text-accent:var(--aubergine-600);
  --text-link:var(--aubergine-600);
  --text-link-hover:var(--aubergine-700);

  /* Semantic — lines */
  --border-subtle:var(--ivory-400);
  --border-strong:var(--ivory-600);
  --border-accent:var(--aubergine-600);
  --border-focus:var(--aubergine-500);
  --divider:var(--ivory-400);

  /* Data / category accents — muted, editorial */
  --data-1:#653D45;--data-2:#7A7060;--data-3:#5C6B63;--data-4:#8A6E52;--data-5:#4A565F;--data-6:#9A8391;
}

/* Pockets of Beige — type system. Two families: editorial serif, operational sans. */
:root{
  --font-serif-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

  /* Sizes — operational sans scale */
  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;
  --text-lg:17px;--text-xl:20px;--text-2xl:24px;

  /* Sizes — editorial serif scale */
  --display-sm:28px;--display-md:38px;--display-lg:52px;--display-xl:72px;

  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.65;

  --tracking-tight:-0.01em;--tracking-normal:0;--tracking-wide:0.02em;
  --tracking-caps:0.14em; /* eyebrows / small-caps labels */

  /* Composite roles */
  --type-display:var(--weight-light) var(--display-lg)/var(--leading-tight) var(--font-serif-display);
  --type-title:var(--weight-regular) var(--display-md)/var(--leading-tight) var(--font-serif-display);
  --type-section:var(--weight-regular) var(--display-sm)/var(--leading-snug) var(--font-serif-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-body-sm:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-label:var(--weight-medium) var(--text-sm)/1.2 var(--font-sans);
  --type-eyebrow:var(--weight-medium) var(--text-2xs)/1.2 var(--font-sans);
  --type-numeric:var(--weight-medium) var(--text-lg)/1.2 var(--font-sans);
}

/* 4px base grid. Layout widths are editorial, not full-bleed. */
:root{
  --space-0:0px;--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;

  --radius-none:0px;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-pill:999px;

  --border-hairline:1px;

  --control-height-sm:28px;--control-height-md:34px;--control-height-lg:42px;
  --field-padding-x:12px;

  --sidebar-width:236px;
  --topbar-height:56px;
  --content-max:1160px;
  --prose-max:640px;
  --gutter:32px;
}

/* Shadows are barely there. Structure comes from hairlines, not depth. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-subtle);
  --shadow-raised:0 1px 2px rgba(29,29,27,.04);
  --shadow-overlay:0 8px 24px -8px rgba(29,29,27,.14),0 0 0 1px rgba(29,29,27,.05);
  --shadow-modal:0 24px 60px -20px rgba(29,29,27,.24),0 0 0 1px rgba(29,29,27,.06);
  --focus-ring:0 0 0 2px var(--surface-page),0 0 0 3px var(--aubergine-500);
  --focus-ring-tight:0 0 0 1px var(--aubergine-600);
}

/* Calm motion: short, eased, no bounce, no spring. */
:root{
  --duration-instant:80ms;/* @kind other */
  --duration-fast:140ms;/* @kind other */
  --duration-base:200ms;/* @kind other */
  --duration-slow:320ms;/* @kind other */
  --duration-editorial:600ms;/* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1);/* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1);/* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1);/* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}
@media (prefers-reduced-motion:reduce){:root{
  --duration-instant:0ms;/* @kind other */
  --duration-fast:0ms;/* @kind other */
  --duration-base:0ms;/* @kind other */
  --duration-slow:0ms;/* @kind other */
  --duration-editorial:0ms;/* @kind other */
}}

/* Minimal global reset + element defaults. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);font-feature-settings:"cv05","ss01";text-wrap:pretty}
h1,h2,h3,h4,p,figure{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--aubergine-200);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--aubergine-600)}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse}
::selection{background:var(--aubergine-100);color:var(--charcoal-950)}
.pob-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-secondary)}
.pob-tnum{font-variant-numeric:tabular-nums}

html, body, #root {
  min-height: 100%;
}

body {
  overflow: hidden;
}

#root {
  height: 100dvh;
}

.pob-app {
  height: 100%;
  background: var(--surface-page);
}

.pob-pad {
  padding: var(--space-6) var(--gutter) var(--space-12);
  max-width: var(--content-max);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Admin is a data-ops surface, not the editorial couple-facing planner the --content-max cap is
   meant for (spacing.css: "Layout widths are editorial, not full-bleed") -- its tables gain columns
   over time (Wedding list alone is 11 columns wide) and a fixed ~1160px cap forced an internal
   horizontal scrollbar while real estate sat unused to its right on any wider screen. */
.pob-pad-wide {
  padding: var(--space-6) var(--gutter) var(--space-12);
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pob-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.pob-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.pob-mobile-shell {
  width: 390px;
  max-width: 100%;
  height: min(780px, 100dvh);
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-overlay);
}

.pob-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--divider);
}

@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .pob-app {
    min-height: 100dvh;
  }

  .pob-grid-4,
  .pob-grid-2 {
    grid-template-columns: 1fr;
  }

  .pob-pad,
  .pob-pad-wide {
    padding: var(--space-4);
  }

  .pob-mobile-shell {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .pob-brief-wizard {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100dvh;
  }

  .pob-brief-sidebar {
    display: none !important;
  }

  .pob-brief-mobile-steps {
    display: flex !important;
  }
}

/* Invitation Brief (Wave 4.5 §1): desktop keeps the same editorial sidebar+content layout as
   OnboardingScreen; mobile collapses to a single-column wizard with a compact step indicator
   instead of the vertical step list -- .pob-brief-sidebar/.pob-brief-mobile-steps are swapped by
   the media query above rather than duplicating the wizard's step content per breakpoint. */
.pob-brief-wizard {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100%;
  overflow: hidden;
}

.pob-brief-mobile-steps {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
}