/* ============================================================
   Bevri.ai — Brand foundation
   Colors, type, base resets used across the POS prototype.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root {
  /* Brand palette (from brand guidelines v1.0) */
  --forest:   #101813;   /* Deep Forest */
  --sage:     #49765b;   /* Sage Green  */
  --mint:     #bbf7d0;   /* Mint Green  */

  /* Derived surfaces / tints */
  --bg:        #f6f7f3;  /* crisp off-white app background */
  --surface:   #ffffff;
  --mint-tint: #eef6f0;  /* very soft mint wash for AI surfaces */
  --sage-soft: #dfe9e2;

  /* Text */
  --text:   #101813;
  --muted:  rgba(16, 24, 19, 0.56);
  --faint:  rgba(16, 24, 19, 0.36);

  /* Lines / borders */
  --line:        rgba(16, 24, 19, 0.10);
  --line-strong: rgba(16, 24, 19, 0.16);

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 30px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16,24,19,0.05), 0 1px 3px rgba(16,24,19,0.04);
  --shadow-md: 0 6px 18px rgba(16,24,19,0.07), 0 2px 6px rgba(16,24,19,0.05);
  --shadow-lg: 0 18px 50px rgba(16,24,19,0.12), 0 6px 16px rgba(16,24,19,0.06);

  --mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Motion language: one easing + three speeds, used everywhere so the
     whole island moves as a single product. */
  --ease-out: cubic-bezier(0.22, 0.61, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
  --dur-slow: 440ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Mono utility for data / AI specs / microcopy */
.mono {
  font-family: var(--mono);
  font-feature-settings: 'tnum' 1;
}

::selection { background: var(--mint); color: var(--forest); }

button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Dark mode — token overrides + targeted fixes for elements
   that use --forest as a background.
   ============================================================ */
:root[data-theme="dark"] {
  --forest:   #eaf2ec;   /* becomes the light "ink" for text/headings */
  --sage:     #8fc7a8;   /* lifted sage accent for dark surfaces */
  --mint:     #bbf7d0;

  --bg:        #0e1411;
  --surface:   #18211d;
  --mint-tint: #1c2a23;
  --sage-soft: #243730;

  --text:   #eaf2ec;
  --muted:  rgba(234, 242, 236, 0.62);
  --faint:  rgba(234, 242, 236, 0.40);

  --line:        rgba(234, 242, 236, 0.13);
  --line-strong: rgba(234, 242, 236, 0.22);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.40);

  --on-accent: #0e1411;  /* dark text to sit on mint/light pills */
}

/* elements that use --forest as a BACKGROUND need a real fill in dark mode */
:root[data-theme="dark"] .avatar,
:root[data-theme="dark"] .co-card-ava,
:root[data-theme="dark"] .start-cta .opt-icon,
:root[data-theme="dark"] .argyle-provider,
:root[data-theme="dark"] .rs-success-mark,
:root[data-theme="dark"] .comp-send.on,
:root[data-theme="dark"] .cbar-send.on {
  background: var(--mint);
  color: var(--on-accent);
}
:root[data-theme="dark"] .btn-primary {
  background: var(--mint);
  color: var(--on-accent);
}
:root[data-theme="dark"] .bubble-user,
:root[data-theme="dark"] .cd-bubble.user {
  background: var(--sage-soft);
  color: var(--text);
}
:root[data-theme="dark"] .review-banner {
  background: var(--sage-soft);
  color: var(--text);
}
:root[data-theme="dark"] .review-banner button { background: var(--mint); color: var(--on-accent); }
:root[data-theme="dark"] .stage.done .stage-marker { color: var(--on-accent); }
:root[data-theme="dark"] .opt-badge,
:root[data-theme="dark"] .quick-chip:hover,
:root[data-theme="dark"] .cd-chip:hover { color: var(--on-accent); }
:root[data-theme="dark"] .cd-chip,
:root[data-theme="dark"] .quick-chip,
:root[data-theme="dark"] .example-chip {
  background: var(--sage-soft);
  color: #fff;
  border-color: var(--sage);
}
:root[data-theme="dark"] .cd-chip:hover,
:root[data-theme="dark"] .quick-chip:hover { background: var(--sage); color: var(--on-accent); }
:root[data-theme="dark"] ::selection { background: var(--sage); color: var(--on-accent); }

/* theme toggle button */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  display: grid; place-items: center;
  transition: background .15s, border-color .15s, transform .15s;
  flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--sage); transform: translateY(-1px); }
.theme-toggle svg { display: block; }