/* ─────────────────────────────────────────────────────────────────────────
   Animated Postcard Studio — design tokens
   Palette is drawn from postal stationery: airmail paper, postal ink,
   airmail blue for interaction, wax-seal red for the brand and postmarks.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --paper: #eef1f5;          /* app background, airmail paper */
  --sheet: #ffffff;          /* panels, cards */
  --sheet-2: #f6f7fa;        /* inset fields, hover rows */
  --sheet-3: #e8ecf2;        /* pressed, tracks */

  /* Ink */
  --ink: #18203a;            /* postal navy: primary text */
  --ink-2: #39415c;
  --graphite: #5e6680;       /* secondary text */
  --muted: #8a91a7;          /* tertiary text, placeholders */

  /* Lines */
  --rule: #dce1ea;
  --rule-strong: #c5ccd9;

  /* Accents */
  --airmail: #2b59c3;        /* selection, focus, links */
  --airmail-soft: #2b59c31f;
  --airmail-ink: #ffffff;
  --seal: #b5283e;           /* brand mark, postmarks, primary action */
  --seal-hover: #9d1f33;
  --seal-ink: #ffffff;
  --seal-soft: #b5283e14;

  /* Status */
  --ok: #1f7a55;
  --warn: #a35a00;
  --danger: #b42323;

  /* Canvas workspace */
  --workspace: #e3e7ee;
  --workspace-dot: #cfd5e0;

  /* Type */
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-md: 0.875rem;    /* 14 */
  --text-lg: 1rem;        /* 16 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.5rem;     /* 40 */

  /* Space (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* Radii: hierarchy, not one value everywhere */
  --r-paper: 2px;     /* postcards are paper */
  --r-control: 6px;   /* buttons, inputs */
  --r-panel: 10px;    /* menus, dialogs */

  /* Elevation: paper on a desk, not floating cards */
  --lift-1: 0 1px 0 #18203a0d, 0 1px 2px #18203a14;
  --lift-2: 0 1px 0 #18203a0a, 0 6px 16px -6px #18203a29, 0 2px 4px #18203a0f;
  --lift-3: 0 24px 48px -16px #18203a40, 0 4px 12px #18203a14;

  --focus: 0 0 0 2px var(--sheet), 0 0 0 4px var(--airmail);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-med: 220ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1426;
    --sheet: #161c33;
    --sheet-2: #1b2240;
    --sheet-3: #232b4b;
    --ink: #e8ebf4;
    --ink-2: #c6cbdc;
    --graphite: #98a0ba;
    --muted: #6f7894;
    --rule: #262e4a;
    --rule-strong: #343d5e;
    --airmail: #7b9dff;
    --airmail-soft: #7b9dff26;
    --airmail-ink: #0f1426;
    --seal: #e2566b;
    --seal-hover: #ec6f82;
    --seal-ink: #1a0b10;
    --seal-soft: #e2566b1f;
    --ok: #4fc493;
    --warn: #f0a94b;
    --danger: #ff6b6b;
    --workspace: #0b1020;
    --workspace-dot: #1c2440;
    --lift-1: 0 1px 0 #00000040, 0 1px 2px #00000059;
    --lift-2: 0 1px 0 #00000033, 0 8px 20px -8px #000000a6;
    --lift-3: 0 24px 48px -12px #000000b3, 0 4px 12px #00000066;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #0f1426;
  --sheet: #161c33;
  --sheet-2: #1b2240;
  --sheet-3: #232b4b;
  --ink: #e8ebf4;
  --ink-2: #c6cbdc;
  --graphite: #98a0ba;
  --muted: #6f7894;
  --rule: #262e4a;
  --rule-strong: #343d5e;
  --airmail: #7b9dff;
  --airmail-soft: #7b9dff26;
  --airmail-ink: #0f1426;
  --seal: #e2566b;
  --seal-hover: #ec6f82;
  --seal-ink: #1a0b10;
  --seal-soft: #e2566b1f;
  --ok: #4fc493;
  --warn: #f0a94b;
  --danger: #ff6b6b;
  --workspace: #0b1020;
  --workspace-dot: #1c2440;
  --lift-1: 0 1px 0 #00000040, 0 1px 2px #00000059;
  --lift-2: 0 1px 0 #00000033, 0 8px 20px -8px #000000a6;
  --lift-3: 0 24px 48px -12px #000000b3, 0 4px 12px #00000066;
  color-scheme: dark;
}