/* =========================================================
   ORNELLI MARKETING PLATFORM — design tokens
   Brief palette (carbone / crema / ruggine / talpa) executed
   with Ornelli's discipline: warm dark, generous space,
   square-shouldered radii, inky candlelight shadows.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---- Carbone — warm charcoal scale around brief #1C1812 ---- */
  --ash-1000: #141009;   /* deepest — app frame, sunken */
  --ash-950:  #1C1812;   /* BASE BG (brief: Carbone) */
  --ash-900:  #221D15;   /* rail / secondary surface */
  --ash-850:  #2A241B;   /* elevated card */
  --ash-800:  #332C21;   /* raised / hover surface */
  --ash-750:  #3C3428;   /* active / pressed surface */
  --ash-700:  #473D2F;   /* strong border */
  --ash-600:  #564A39;   /* divider on elevated */

  /* ---- Crema — warm light (brief #F0EBE3), never pure white ---- */
  --cream:      #F0EBE3;   /* primary text on dark */
  --cream-dim:  #DDD5C9;   /* slightly softened */
  --paper:      #F7F3EC;   /* light surfaces (template preview, light cards) */
  --paper-2:    #EDE6DA;

  /* ---- Talpa — muted brown-grey (brief #9A8878) ---- */
  --talpa:      #9A8878;   /* secondary text, labels */
  --talpa-dim:  #6E6253;   /* tertiary, metadata */
  --talpa-faint:#4E453A;   /* disabled, faint lines */

  /* ---- Ruggine / brace — primary accent (brief #C4522A) ---- */
  --rust:       #C4522A;
  --rust-hover: #D9633A;
  --rust-press: #A23F1E;
  --rust-soft:  rgba(196, 82, 42, 0.14);
  --rust-line:  rgba(196, 82, 42, 0.40);

  /* ---- Cool / status accents — data & states ONLY (brief) ---- */
  --info:   #2AA6C8;   --info-soft:   rgba(42,166,200,0.14);
  --ok:     #3FA34D;   --ok-soft:     rgba(63,163,77,0.14);
  --amber:  #D9A406;   --amber-soft:  rgba(217,164,6,0.14);
  --err:    #C43A2A;   --err-soft:    rgba(196,58,42,0.14);
  --wa:     #1FA855;   /* whatsapp-green — used minimally for channel mark */

  /* ---- Semantic ---- */
  --bg:          var(--ash-950);
  --bg-rail:     var(--ash-1000);
  --bg-elevated: var(--ash-850);
  --bg-raised:   var(--ash-800);
  --bg-sunken:   var(--ash-1000);

  --fg:        var(--cream);
  --fg-muted:  var(--talpa);
  --fg-subtle: var(--talpa-dim);

  --accent:       var(--rust);
  --accent-hover: var(--rust-hover);
  --accent-press: var(--rust-press);

  --border:        rgba(240,235,227,0.08);
  --border-strong: rgba(240,235,227,0.14);
  --border-rust:   var(--rust-line);
  --focus-ring:    rgba(217,99,58,0.65);

  /* ---- Type families ---- */
  --font-display: "Bebas Neue", "Oswald", Impact, sans-serif;
  --font-sans:    "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Spacing — 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* ---- Radii — tight, architectural ---- */
  --r-1: 4px;   /* chips, small */
  --r-2: 8px;   /* buttons, inputs */
  --r-3: 12px;  /* cards */
  --r-4: 18px;  /* feature surfaces, sheets */
  --r-pill: 999px;

  /* ---- Shadows — inky, candlelight ---- */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.5);
  --shadow-2: 0 10px 30px -12px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-3: 0 28px 70px -16px rgba(0,0,0,0.78), 0 6px 14px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px var(--border-rust), 0 16px 48px -10px rgba(196,82,42,0.30);
  --shadow-pop: 0 18px 50px -14px rgba(0,0,0,0.8);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms;
}

/* ---- Type primitives ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.92;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
}

* { box-sizing: border-box; }
::selection { background: var(--rust); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Thin warm scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ash-700) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--ash-700); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ash-600); }
*::-webkit-scrollbar-track { background: transparent; }