/* ============================================================
   Gifting App — Design Tokens
   Warm · editorial · elevated · themeable
   A neutral, white-labelable foundation for corporate gifting.
   The accent is a single token — re-skin per tenant.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand / accent (the one themeable knob) ---- */
  --accent:        #E85A2C;   /* terracotta */
  --accent-700:    #C7461D;
  --accent-600:    #D94E22;
  --accent-300:    #F4A081;
  --accent-100:    #FBE3D7;
  --accent-tint:   #FDF2EB;   /* page-level wash */
  --on-accent:     #FFFFFF;

  /* a quieter metallic for premium flourishes — used sparingly */
  --gold:          #B68A3C;
  --gold-100:      #F2E9D4;

  /* ---- Warm neutral surfaces ---- */
  --paper:         #FBF8F3;   /* app background */
  --surface-0:     #FFFFFF;   /* cards */
  --surface-1:     #F6F1E9;   /* panels / fills */
  --surface-2:     #EFE7DA;   /* deeper fill / zebra */
  --surface-ink:   #1E1A15;   /* dark sections (footers, hero) */

  /* ---- Ink / text ---- */
  --ink-900:       #211C16;   /* headings (espresso) */
  --ink-700:       #463E34;
  --ink-600:       #5F564A;   /* body */
  --ink-500:       #766C5E;   /* secondary */
  --ink-300:       #B6AB9A;   /* faint / fine-print */
  --ink-400:       #9A8F7E;   /* muted / placeholder */
  --on-dark:       #F7F2E9;
  --on-dark-soft:  #C9C0B2;

  /* ---- Lines ---- */
  --border:        #E8E0D2;
  --border-strong: #D8CCB8;
  --border-ink:    #2C261F;

  /* ---- Semantic ---- */
  --success:       #2E7D54;
  --success-100:   #DCEFE2;
  --success-tint:  #F0F7F1;
  --danger:        #C13B2E;
  --danger-100:    #F7DED9;
  --danger-tint:   #FCF0ED;
  --warning:       #C0871B;
  --warning-100:   #F6E8CB;
  --warning-tint:  #FBF3E0;
  --info:          #3563B0;
  --info-100:      #DCE6F5;
  --info-tint:     #EFF3FA;

  /* ---- Type ---- */
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale (px) */
  --t-display: 44px;
  --t-h1:      32px;
  --t-h2:      24px;
  --t-h3:      18px;
  --t-body:    16px;
  --t-small:   14px;
  --t-micro:   12px;

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-xbold:   800;

  /* ---- Spacing (8px grid) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---- Radii ---- */
  --r-sm:  6px;
  --r-md:  9px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill:999px;

  /* ---- Elevation (warm-tinted shadows) ---- */
  --shadow-sm: 0 1px 2px rgba(33,28,22,.05);
  --shadow:    0 4px 18px rgba(33,28,22,.07);
  --shadow-md: 0 10px 30px rgba(33,28,22,.10);
  --shadow-lg: 0 22px 60px rgba(33,28,22,.16);
  --ring:      0 0 0 3px rgba(232,90,44,.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-micro: 140ms;
  --dur: 220ms;
  --dur-page: 360ms;
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-600);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5 { margin: 0; color: var(--ink-900); line-height: 1.18; }

.serif { font-family: var(--font-serif); }
.mono  { font-family: var(--font-mono); }

.display {
  font-family: var(--font-serif);
  font-weight: var(--w-semibold);
  font-size: var(--t-display);
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink-900);
}
.h1 { font-family: var(--font-serif); font-weight: var(--w-semibold); font-size: var(--t-h1); letter-spacing: -.018em; line-height: 1.15; }
.h2 { font-family: var(--font-serif); font-weight: var(--w-semibold); font-size: var(--t-h2); letter-spacing: -.012em; line-height: 1.2; }
.h3 { font-weight: var(--w-semibold); font-size: var(--t-h3); letter-spacing: -.006em; color: var(--ink-900); line-height: 1.3; }
.body  { font-size: var(--t-body); }
.small { font-size: var(--t-small); }
.micro { font-size: var(--t-micro); }
.muted { color: var(--ink-500); }
.dim   { color: var(--ink-400); }

/* eyebrow label */
.eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.eyebrow.on-dark { color: var(--accent-300); }
.eyebrow.muted { color: var(--ink-400); }

a { color: var(--accent-700); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-100); color: var(--ink-900); }

/* scrollbars in scroll panes */
.scroll-thin::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* utility */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.grow { flex: 1 1 auto; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.full { width: 100%; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes pulseSoft { 0%,100% { opacity: 1; } 50% { opacity: .55; } }