/* Eurostar Gemstones — Pending Orders Tracker
   Design tokens: colors + type. Tablet-first, paper-ledger aesthetic. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: paper + ink ---------- */
  --paper:        #F6F1E6;   /* warm off-white — ledger page */
  --paper-2:      #EFE7D4;   /* slightly deeper band */
  --paper-line:   #E2D5B4;   /* rule line on the register */
  --ink:          #15130F;   /* near-black, warm */
  --ink-2:        #3A342A;   /* secondary text */
  --ink-3:        #7A6F5C;   /* tertiary / meta */
  --ink-4:        #B8AD96;   /* placeholder / disabled */

  /* ---------- Accent: gemstone palette ---------- */
  --emerald:      #0E5C4A;   /* primary accent — deep jewel green */
  --emerald-ink:  #0A3F33;
  --emerald-soft: #D9E8E0;

  --ruby:         #8B1E2E;   /* delete / alert */
  --ruby-soft:    #F2DEDE;

  --amber:        #B7791F;   /* warnings, old-pending */
  --amber-soft:   #F5E7C4;

  --sapphire:     #1E3A8A;   /* info, links */
  --sapphire-soft:#DDE4F3;

  /* ---------- Semantic ---------- */
  --bg:           var(--paper);
  --surface:      #FDFAF2;   /* cards, panels */
  --surface-2:    #FFFFFF;   /* inputs, modals */
  --border:       #D7CCB1;
  --border-strong:#AE9E7B;
  --divider:      #E7DDC5;

  --fg:           var(--ink);
  --fg-muted:     var(--ink-2);
  --fg-meta:      var(--ink-3);
  --fg-disabled:  var(--ink-4);

  --accent:       var(--emerald);
  --accent-ink:   var(--emerald-ink);
  --danger:       var(--ruby);
  --warn:         var(--amber);

  /* Strike-through delivered look */
  --delivered-fg: #9A8E75;
  --delivered-bg: #EDE4CF;

  /* ---------- Type ---------- */
  --font-serif:   "Fraunces", "Noto Serif", Georgia, serif;
  --font-sans:    "Inter", "Noto Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-deva:    "Noto Sans Devanagari", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* ---------- Spacing / radius / shadow ---------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --shadow-sm: 0 1px 0 rgba(21,19,15,0.04), 0 1px 2px rgba(21,19,15,0.06);
  --shadow-md: 0 2px 4px rgba(21,19,15,0.06), 0 8px 24px rgba(21,19,15,0.08);
  --shadow-lg: 0 4px 8px rgba(21,19,15,0.08), 0 24px 48px rgba(21,19,15,0.14);

  --ring: 0 0 0 3px rgba(14,92,74,0.20);
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

/* Subtle paper texture — tiny warm speckle, keeps the ledger feel */
body.paper-texture {
  background-image:
    radial-gradient(rgba(120,95,55,0.045) 1px, transparent 1px),
    radial-gradient(rgba(120,95,55,0.03) 1px, transparent 1px);
  background-size: 24px 24px, 40px 40px;
  background-position: 0 0, 12px 18px;
}

/* ---------- Type roles ---------- */
.h-display {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 96;
}
.h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-variation-settings: "opsz" 60;
}
.h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg-meta);
}
.p  { font-size: 16px; line-height: 1.5; color: var(--fg); }
.p-muted { color: var(--fg-muted); }
.meta { font-size: 13px; color: var(--fg-meta); letter-spacing: 0.01em; }
.mono { font-family: var(--font-mono); font-size: 14px; }
.num  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Devanagari tweak — slightly larger x-height baseline */
:lang(hi), .lang-hi {
  font-family: var(--font-deva);
  font-size: 1.02em;
}