/* Otto · Design tokens
   Inherits brand palette from the Otto site (Cloud Dancer, Ink, Sky, Signal)
   and extends for product-app needs. */

:root {
  /* Surfaces */
  --bg:        #F2EEE6;   /* Cloud Dancer · canvas */
  --paper:     #FFFFFF;   /* primary surface */
  --paper-2:   #FAF7F0;   /* nested surface */
  --rail:      #0A1530;   /* Ink · sidebar */
  --rail-2:    #131D38;   /* sidebar hover */

  /* Type */
  --fg:        #0A1530;
  --fg-muted:  #5B6B86;
  --fg-soft:   #8E9AAE;
  --on-rail:   #E8ECF4;
  --on-rail-muted: #8895AD;

  /* Lines */
  --line:      #DED9CE;
  --line-soft: #E8E3D7;
  --line-strong: #C9C2B3;

  /* Brand accents */
  --sky:       #2B57E3;   /* primary action / Otto */
  --sky-soft:  rgba(43,87,227,0.10);
  --signal:    #FF6A2C;   /* Otto AI / activity */
  --signal-soft: rgba(255,106,44,0.12);

  /* Pipeline stages */
  --stage-disc: #8E9AAE;
  --stage-qual: #2B57E3;
  --stage-prop: #6B47E0;
  --stage-neg:  #FF6A2C;
  --stage-won:  #1F8A5B;
  --stage-lost: #B33A3A;

  /* Radius */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* Shadow */
  --shadow-sm: 0 1px 0 rgba(10,21,48,0.04);
  --shadow-md: 0 2px 8px rgba(10,21,48,0.06);
  --shadow-lg: 0 8px 24px rgba(10,21,48,0.10);

  /* Type scale */
  --t-mono: 'JetBrains Mono', ui-monospace, monospace;
  --t-display: 'Big Shoulders Display', system-ui, sans-serif;
  --t-sans: 'Geist', 'Inter Tight', system-ui, sans-serif;
}

html, body { margin: 0; padding: 0; background: var(--bg); }
body {
  font-family: var(--t-sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  font-size: 14px; line-height: 1.5;
}
* { box-sizing: border-box; }
button { font-family: inherit; cursor: pointer; }

/* Mono eyebrow utility */
.eyebrow {
  font-family: var(--t-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(10,21,48,0.15); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(10,21,48,0.3); }

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.3s ease-out; }