:root {
  /* Color — warm neutrals instead of true gray/black, since flat
     grayscale is what read as "just black and white." The warmth
     (a soft brass/leather cast) ties into the product being a wallet,
     rather than being decorative for its own sake. The accent is also
     used more deliberately below — link hovers, active nav state, a
     restrained glow behind the hero — not just on a couple of icons. */
  --color-bg: #FBF9F5;
  --color-bg-alt: #F3ECDF;
  --color-ink: #221D15;
  --color-ink-soft: #6B6151;
  --color-ink-faint: #9C917E;
  --color-dark-bg: #16120C;
  --color-dark-ink: #F6F1E7;
  --color-dark-ink-soft: #B4A88F;
  --color-line: rgba(34, 29, 21, 0.12);
  --color-line-dark: rgba(246, 241, 231, 0.14);
  --color-accent: #B8753A;
  --color-accent-soft: #F0DDB8;
  --color-accent-2: #5E7C6D;
  --color-surface: #FFFFFF;

  /* A small, muted palette used only for the card motif itself (real
     screenshots will bring their own color once added; this only
     covers any slot still showing a placeholder). */
  --card-tint-1: #B8753A; /* brass */
  --card-tint-2: #5E7C6D; /* sage */
  --card-tint-3: #A65C4A; /* terracotta */
  --card-tint-4: #4C6B8A; /* dusty blue */
  --card-tint-5: #2A2A2E; /* charcoal */


  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Helvetica Neue", Arial, sans-serif;

  --text-hero: clamp(2.75rem, 3vw + 2.25rem, 5.25rem);
  --text-h1: clamp(2.125rem, 2vw + 1.6rem, 3.5rem);
  --text-h2: clamp(1.625rem, 1.2vw + 1.3rem, 2.375rem);
  --text-body-lg: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3125rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-tiny: 0.8125rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  /* Shape */
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;
  --radius-phone: 52px;
  --radius-full: 999px;

  /* Shadow — used sparingly, only on device mockups */
  --shadow-device: 0 30px 70px -25px rgba(22, 22, 26, 0.28);
  --shadow-soft: 0 12px 32px -16px rgba(22, 22, 26, 0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-base: 700ms;

  /* Layout */
  --container-width: 1160px;
  --container-pad: 1.5rem;
}

@media (min-width: 640px) {
  :root { --container-pad: 2.5rem; }
}