/* Copied unchanged from web/src/styles/design-tokens.css at c40906b, so the mocks read the real tokens. */
/**
 * Open Attic · Pieced — design tokens (brand kit v1.0)
 *
 * Everyone brings a piece. Color belongs to people; the interface is ink.
 * Four neutrals carry the interface (Ash, Ash 2, Thread, Ink, Ink 2). Every
 * colorful thing is a person's fabric. No gold, brass, ochre or mustard, ever.
 */

:root {
  /* === Semantic roles (light) — contrast-locked by scripts/check-contrast.mjs === */
  --color-canvas: #E6E4E0;
  --color-surface: #FAF9F6;
  --color-surface-muted: #D6D3CD;
  --color-text: #25212B;
  --color-text-muted: #5F5A67;
  --color-action: #25212B;
  --color-action-hover: #3A3741;
  --color-action-fg: #E6E4E0;
  --color-control: #25212B;
  --color-control-text: #E6E4E0;
  --color-border-quiet: #D6D3CD;
  --color-border-control: #25212B;
  --color-focus: #25212B;
  --color-focus-buffer: #E6E4E0;
  --color-danger: #A3212F;
  --color-success: #25212B;
  --color-artwork-warm: #5E479B;
  --color-artwork-cool: #25212B;
  --color-artwork-muted: #5F5A67;
  --color-chip-text: #25212B;
  --color-gold-decoration: #5F5A67;
  --color-tooltip: #25212B;
  --color-tooltip-text: #E6E4E0;
  --color-media-backdrop: #25212B;
  --color-media-backdrop-text: #FAF9F6;
  --color-overlay: rgb(25 22 30 / 55%);

  /* Event red: timeline ticks only. Graphic, never text; always a 45° notch. */
  --color-event: #C42B3B;
  /* What a plain filler tile is tinted toward (80% white by day, 78% Ash by night). */
  --color-tint-base: #FFFFFF;
  --tint-plain: 80%;

  /* === Fabrics. A person gets one when they're added and keeps it for good. === */
  --fabric-plum: #6B2D5C;
  --fabric-plum-on: #FAF9F6;
  --fabric-cranberry: #B23A4A;
  --fabric-cranberry-on: #FAF9F6;
  --fabric-rose: #E3829A;
  --fabric-rose-on: #25212B;
  --fabric-blush: #F2B8C5;
  --fabric-blush-on: #25212B;
  --fabric-lilac: #BBA6E0;
  --fabric-lilac-on: #25212B;
  --fabric-violet: #5E479B;
  --fabric-violet-on: #FAF9F6;
  --fabric-indigo: #27407F;
  --fabric-indigo-on: #FAF9F6;
  --fabric-cornflower: #4569B8;
  --fabric-cornflower-on: #FAF9F6;
  --fabric-sky: #97C1E8;
  --fabric-sky-on: #25212B;
  --fabric-teal: #11736E;
  --fabric-teal-on: #FAF9F6;
  --fabric-mint: #A6D6C0;
  --fabric-mint-on: #25212B;
  --fabric-spruce: #2D5E47;
  --fabric-spruce-on: #FAF9F6;
  --fabric-grass: #719C3F;
  --fabric-grass-on: #25212B;
  --fabric-charcoal: #3A3741;
  --fabric-charcoal-on: #FAF9F6;

  /* Pieced names for the neutrals, so component CSS reads like the kit. */
  --ash: var(--color-canvas);
  --ash-2: var(--color-surface-muted);
  --thread: var(--color-surface);
  --ink: var(--color-text);
  --ink-2: var(--color-text-muted);
  --event: var(--color-event);

  /* A tile's words over more than one fabric sit on a plate: Ink by day, Thread by night. */
  --plate: var(--color-text);
  --on-plate: var(--color-surface);

  /* The viewer's fabric binds the whole app; the shell sets it per person. */
  --me: var(--fabric-violet);
  --on-me: var(--fabric-violet-on);

  /* === Quilt geometry. Square corners, abutting blocks, no shadows. === */
  --seam: 6px;
  --seam-medallion: 5px;
  --bind: 10px;
  --mat: 10px;
  --cell-min: 96px;
  --pad: var(--fma-gutter);
  --tab-item: 52px;

  /* === Motion. Nothing moves on its own; one curve for everything that travels. === */
  --ease-pieced: cubic-bezier(0.2, 0.75, 0.15, 1);
  --dur-repiece: 520ms;
  --stagger: 14ms;
  --dur-enter: 416ms;
  --delay-enter: 120ms;
  --dur-stitch: 1400ms;
  --dur-binding: 500ms;
  --dur-strip: 200ms;
  --dur-line: 250ms;
  --dur-tick: 120ms;
  --dur-snap: 240ms;

  /* Legacy motion names follow the one curve. */
  --ease-out: var(--ease-pieced);
  --ease-in-out: var(--ease-pieced);
  --ease-header: var(--ease-pieced);
  --dur-fast: 160ms;
  --dur-drawer: 240ms;
  --dur-base: 240ms;
  --dur-slow: 416ms;
  --dur-header: 500ms;

  /* === No radius, no shadows, no paper. === */
  --rounded-sm: 0px;
  --rounded-md: 0px;
  --rounded-lg: 0px;
  --rounded-xl: 0px;
  --shadow-card: none;
  --shadow-raised: none;
  --shadow-pressed: none;
  --shadow-overlay: none;
  --archival-paper-pattern: none;
  --archival-cloth-pattern: none;
  --archival-botanical-pattern: none;
  --page-paper-pattern: none;

  /* === Spacing: one 4px-based scale of eight steps. Nothing else goes in
     padding, margin or gap; the seam (6), binding and mat (10) are geometry. === */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;

  /* Two surface paddings: Thread panels, and quilt tiles. */
  --panel-pad: 24px;
  --tile-pad: 16px;

  /* Parents own spacing. Inside a group < between groups < between sections. */
  --gap-tight: var(--sp-2);
  --gap: var(--sp-4);
  --gap-group: var(--sp-5);
  --gap-section: var(--sp-7);
  --page-head-gap: var(--sp-6);

  /* One site measure: header, quilts, interiors, settings, family. */
  --fma-gutter: clamp(16px, 3vw, 40px);
  --fma-measure: 100rem;
  --fma-page: min(var(--fma-measure), calc(100% - 2 * var(--fma-gutter)));
  /* Inside the one page edge: forms stay in a 48rem column, prose in 64ch. */
  --form-measure: 48rem;

  --oa-header-expanded: 5.5rem;
  --oa-header-compact: 4.75rem;
  --oa-scroll-compact: 48px;
  --oa-drawer-width: 20.5rem;
  --oa-safe-top: env(safe-area-inset-top, 0px);
  --oa-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* === One family, Archivo, run across its width axis. No serifs. === */
  --font-sans: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-hand: var(--font-sans);
  --font-label: var(--font-sans);

  /* === Type: eight text styles, no others ===
     display · title (h1) · section (h2) · block-title (h3) · body-lg · body ·
     label · meta. Reading text is never under 17px; meta (14px) is for bylines,
     dates and helper lines only. Tight (13px, condensed) is for medallion names
     and other labels that must fit a square. */
  --type-display-size: clamp(2.125rem, 5.6vw, 5.125rem);
  --type-display-line: 0.98;
  --type-display-tracking: -0.03em;
  --type-display-2-size: clamp(1.875rem, 3.6vw, 3.25rem);
  --type-title-line: 1;
  --type-title-tracking: -0.025em;
  --type-section-size: 1.5rem;
  --type-section-weight: 780;
  --type-section-stretch: 118%;
  --type-section-line: 1.2;
  --type-section-tracking: -0.015em;
  --type-block-title-size: 1.0625rem;
  --type-block-title-weight: 720;
  --type-block-title-stretch: 108%;
  --type-block-title-line: 1.2;
  --type-text-size: 1.1875rem;
  --type-text-line: 1.6;
  --type-body-size: 1.0625rem;
  --type-body-line: 1.55;
  --type-body-measure: 64ch;
  --type-label-size: 0.9375rem;
  --type-label-weight: 650;
  --type-label-line: 1.3;
  --type-meta-size: 0.875rem;
  --type-meta-weight: 400;
  --type-meta-line: 1.4;
  --type-tight-size: 0.8125rem;
  --type-wordmark-size: 1.3125rem;

  /* The weights in use: reading, labels, headings, display. */
  --weight-body: 400;
  --weight-label: 650;
  --weight-strong: 720;
  --weight-heading: 780;
  --weight-display: 800;

  /* Older layout knobs, kept so pages that have not been re-pieced still lay out. */
  --rule-hairline: 2px;
  --rule-heavy: 2px;
  --np-column-gap: 6px;
  --np-row-gap: 6px;
  --np-cell-gap: 0.35rem;
  --np-cell-pad-block: 0.85rem;
  --np-cell-pad-inline: 0.9rem;
  --np-band-pad: 0.35rem;
  --np-hero-side: 1fr;
  --np-hero-center: 1.35fr;
  --np-feature-lead: 1.4fr;
  --np-places-gap: 2rem;
  --np-empty-measure: 34rem;
  --album-tile-min: 12rem;
  --album-tile-max: 16rem;
  --album-gap: 6px;
  --album-row-gap: 6px;
  --oa-drawer-title-size: 1.85rem;
  --oa-state-measure: 36rem;
  --kinframe-empty-pad: 2rem;

  --bg: var(--color-canvas);
  --surface: var(--color-surface);
  --surface-elevated: var(--color-surface);
}

/* Panels tighten on a phone. */
@media (max-width: 719px) {
  :root {
    --panel-pad: 16px;
  }
}

/* Night: neutrals swap and each fabric takes its lighter twin. Photos stay as they are. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #19161E;
    --color-surface: #24202A;
    --color-surface-muted: #2A2631;
    --color-text: #EFEBF3;
    --color-text-muted: #A9A3B2;
    --color-action: #EFEBF3;
    --color-action-hover: #D6D1DD;
    --color-action-fg: #19161E;
    --color-control: #EFEBF3;
    --color-control-text: #19161E;
    --color-border-quiet: #2A2631;
    --color-border-control: #EFEBF3;
    --color-focus: #EFEBF3;
    --color-focus-buffer: #19161E;
    --color-danger: #FF8A95;
    --color-success: #EFEBF3;
    --color-artwork-warm: #9A86D6;
    --color-artwork-cool: #EFEBF3;
    --color-artwork-muted: #A9A3B2;
    --color-chip-text: #EFEBF3;
    --color-gold-decoration: #A9A3B2;
    --color-tooltip: #EFEBF3;
    --color-tooltip-text: #19161E;
    --color-media-backdrop: #0F0D12;
    --color-media-backdrop-text: #EFEBF3;
    --color-overlay: rgb(8 6 10 / 70%);
    --color-event: #FF6F7D;
    --color-tint-base: #19161E;
    --tint-plain: 78%;

    --fabric-plum: #9A4A85;
    --fabric-plum-on: #FAF9F6;
    --fabric-cranberry: #E07080;
    --fabric-cranberry-on: #25212B;
    --fabric-rose: #E58FA5;
    --fabric-rose-on: #25212B;
    --fabric-blush: #EBAABA;
    --fabric-blush-on: #25212B;
    --fabric-lilac: #B29CDB;
    --fabric-lilac-on: #25212B;
    --fabric-violet: #9A86D6;
    --fabric-violet-on: #25212B;
    --fabric-indigo: #4B66B0;
    --fabric-indigo-on: #FAF9F6;
    --fabric-cornflower: #6F90D6;
    --fabric-cornflower-on: #25212B;
    --fabric-sky: #8DB8E2;
    --fabric-sky-on: #25212B;
    --fabric-teal: #2FA89F;
    --fabric-teal-on: #25212B;
    --fabric-mint: #93CBB2;
    --fabric-mint-on: #25212B;
    --fabric-spruce: #5A9B7B;
    --fabric-spruce-on: #25212B;
    --fabric-grass: #82B04C;
    --fabric-grass-on: #25212B;
    --fabric-charcoal: #6A6574;
    --fabric-charcoal-on: #FAF9F6;

    /* By night the reading surface is the dark one: the plate is Thread, its words Ink. */
    --plate: var(--color-surface);
    --on-plate: var(--color-text);

    color-scheme: dark;
  }
}

@theme inline {
  --color-canvas: var(--color-canvas);
  --color-surface: var(--color-surface);
  --color-surface-muted: var(--color-surface-muted);
  --color-fg: var(--color-text);
  --color-muted-fg: var(--color-text-muted);
  --color-action: var(--color-action);
  --color-action-hover: var(--color-action-hover);
  --color-action-fg: var(--color-action-fg);
  --color-control: var(--color-control);
  --color-control-fg: var(--color-control-text);
  --color-border-quiet: var(--color-border-quiet);
  --color-border-control: var(--color-border-control);
  --color-focus: var(--color-focus);
  --color-focus-buffer: var(--color-focus-buffer);
  --color-danger: var(--color-danger);
  --color-success: var(--color-success);
  --color-artwork-warm: var(--color-artwork-warm);
  --color-artwork-cool: var(--color-artwork-cool);
  --color-artwork-muted: var(--color-artwork-muted);
  --color-chip-text: var(--color-chip-text);
  --color-gold-decoration: var(--color-gold-decoration);
  --color-tooltip: var(--color-tooltip);
  --color-tooltip-fg: var(--color-tooltip-text);
  --color-media-backdrop: var(--color-media-backdrop);
  --color-media-backdrop-fg: var(--color-media-backdrop-text);
  --color-overlay: var(--color-overlay);

  --font-display: var(--font-display);
  --font-body: var(--font-body);
  --font-hand: var(--font-hand);
  --font-label: var(--font-label);
  --radius-sm: var(--rounded-sm);
  --radius-md: var(--rounded-md);
  --radius-lg: var(--rounded-lg);
  --radius-xl: var(--rounded-xl);
}

/* Flat Ash ground: no paper, no grain, no botanicals. */
body {
  background-color: var(--color-canvas);
  background-image: none;
}

body::before {
  content: none;
}

/* === Component base classes kept for older pages, re-cut square and flat === */

.gold-divider[data-decoration] {
  height: 0;
  width: 100%;
  border-top: 2px dashed var(--color-border-quiet);
  margin: var(--sp-7) 0;
}

.card-memory {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 0;
  padding: var(--sp-4);
  box-shadow: none;
}

.tag {
  display: inline-block;
  background: var(--color-surface-muted);
  color: var(--color-chip-text);
  border-radius: 0;
  padding: 4px 10px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tag-story {
  background: var(--color-control);
  color: var(--color-control-text);
}

.timeline {
  position: relative;
  padding-left: var(--sp-5);
}
.timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed var(--color-border-quiet);
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--color-control);
}

@media (max-width: 640px) {
  .page-wrapper { padding: 0 var(--sp-3); }
}