/* =====================================================================
   888 Artworks — Colors & Type
   Calm beige, lucky prosperity, artisan warmth.
   ===================================================================== */

/* ---------- Fonts: Free Google Fonts, chosen to match premium refs ----------
   Display → Fraunces    (stand-in for Canela / GT Sectra — warm editorial serif)
   Numeral → Rozha One   (stand-in for Cooper BT Black — chunky logo-style numerals)
   Body    → Manrope     (stand-in for Söhne / Aeonik — warm neutral grotesk)
   Mono    → JetBrains Mono (free, already excellent)
   Swap to licensed faces by dropping WOFF2s in /fonts and updating @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Rozha+One&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =============== COLOR — Neutral Beige Scale ===============
     Warm cream base. Hand-picked to feel paper-like, not yellow. */
  --beige-50:  #FBF7EC;  /* paper, lightest backgrounds */
  --beige-100: #F6EFDF;  /* primary app background */
  --beige-200: #EDE4CE;  /* surface raised */
  --beige-300: #E1D4B5;  /* divider, subtle fill */
  --beige-400: #C9B68E;  /* muted accent */
  --beige-500: #AE9868;  /* mid tone */
  --beige-600: #8A7850;  /* caption/label */
  --beige-700: #5E5137;  /* secondary text */
  --beige-800: #3A3223;  /* primary text-alt */
  --beige-900: #201A12;  /* near-black ink */

  /* =============== COLOR — Ink (primary action, from logo) =============== */
  --ink-50:  #EAE8E3;
  --ink-100: #BEBBB2;
  --ink-200: #6E6A5F;
  --ink-400: #2A261E;
  --ink-500: #17140D;  /* logo black */
  --ink-600: #0B0906;

  /* =============== COLOR — Accent (Lucky Vermilion) ===============
     One warm accent. 888 is a prosperity number; this nods to
     cinnabar/Chinese red seals without being loud. */
  --lucky-50:  #F9E9E1;
  --lucky-100: #EFC9B6;
  --lucky-400: #C85C3C;
  --lucky-500: #A8401F;  /* the seal red */
  --lucky-600: #7F2E15;

  /* =============== COLOR — Support (muted, earthy) =============== */
  --sage-400:  #7C8A6E;   /* olive-sage for "fresh / new" */
  --clay-400:  #B08968;   /* terracotta-clay for secondary accents */
  --indigo-400:#3E4A5C;   /* rare cool accent (info) */

  /* =============== SEMANTIC — Surfaces =============== */
  --bg:            var(--beige-100);
  --bg-elevated:   var(--beige-50);
  --bg-sunken:     var(--beige-200);
  --surface-ink:   var(--ink-500);    /* dark sections (footer, hero) */

  /* =============== SEMANTIC — Text =============== */
  --fg:        var(--beige-900);
  --fg-soft:   var(--beige-800);
  --fg-muted:  var(--beige-700);
  --fg-faint:  var(--beige-600);
  --fg-on-ink: var(--beige-50);
  --fg-on-ink-muted: var(--beige-300);

  /* =============== SEMANTIC — Lines / Borders =============== */
  --line:         rgba(32, 26, 18, 0.12);   /* hairline on beige */
  --line-strong:  rgba(32, 26, 18, 0.22);
  --line-on-ink:  rgba(246, 239, 223, 0.14);

  /* =============== SEMANTIC — Action =============== */
  --action:          var(--ink-500);
  --action-hover:    var(--ink-400);
  --action-press:    var(--ink-600);
  --action-fg:       var(--beige-50);

  --accent:          var(--lucky-500);
  --accent-hover:    var(--lucky-600);
  --accent-fg:       var(--beige-50);

  /* =============== SEMANTIC — Feedback =============== */
  --success: var(--sage-400);
  --warn:    #C99540;
  --error:   var(--lucky-500);
  --info:    var(--indigo-400);

  /* =============== TYPE — Families =============== */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-numeral: 'Rozha One', 'Cooper Std', Georgia, serif; /* for "888" style hits */
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* =============== TYPE — Scale (mobile-first) =============== */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* =============== TYPE — Leading / Tracking =============== */
  --lh-tight:   1.08;
  --lh-snug:    1.24;
  --lh-normal:  1.5;
  --lh-loose:   1.7;
  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-widest:    0.18em;

  /* =============== SPACING — 4px soft scale =============== */
  --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;

  /* =============== RADIUS =============== */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   28px;
  --r-pill: 999px;
  --r-disk: 50%;

  /* =============== SHADOW — soft, earthy, never blue ===============
     Shadows are subtle on beige — we prefer hairlines and elevation
     through contrast of tone over drop-shadow. */
  --shadow-xs: 0 1px 0 rgba(32, 26, 18, 0.05);
  --shadow-sm: 0 1px 2px rgba(58, 50, 35, 0.06), 0 1px 1px rgba(58, 50, 35, 0.04);
  --shadow-md: 0 4px 14px -4px rgba(58, 50, 35, 0.12), 0 2px 4px rgba(58, 50, 35, 0.05);
  --shadow-lg: 0 18px 40px -14px rgba(32, 26, 18, 0.22), 0 6px 14px -6px rgba(32, 26, 18, 0.08);
  --shadow-frame: 0 2px 1px rgba(255, 255, 255, 0.5) inset, 0 10px 30px -12px rgba(32,26,18,0.28); /* picture-frame feel */

  /* =============== MOTION =============== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* =====================================================================
   Semantic text styles
   ===================================================================== */

.t-display-xl {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--text-6xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg);
}

.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-display-md {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-display-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-faint);
}

.t-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-soft);
}

.t-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.t-price {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.t-signature {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-md);
  color: var(--fg-muted);
}

/* =====================================================================
   Base
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--lucky-100); color: var(--lucky-600); }