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


/* ── Chatorizer brand palette ────────────────────────────────────────
   WhatsApp-adjacent. Teal is the voice, green marks what's live and good,
   amber marks what needs attention, slate carries the quiet structure,
   cream is the page.

     --teal      #128C7E   primary — header, buttons, headings, wordmark
     --teal-deep #075E54   dark surfaces, hover, the deep body ink
     --green     #25D366   "live and good" — active tab, success, the icon
     --amber     #F5A524   the highlight — attention ONLY (what matters)
     --slate     #B9C1D3   muted text, dividers, disabled, secondary lines
     --cream     #FBF8F2   page background
     --white     #FFFFFF   cards and surfaces on cream
     --ink-soft  #4B6B66   secondary text on light surfaces
   ──────────────────────────────────────────────────────────────────── */

:root {
  /* brand primitives */
  --teal: #128C7E;
  --teal-deep: #075E54;
  --green: #25D366;
  --amber: #F5A524;
  --slate: #B9C1D3;
  --cream: #FBF8F2;
  --ink-soft: #4B6B66;

  /* ── typography ────────────────────────────────────────────── */
  --font-display: 'Manrope', sans-serif;
  --font-sans: 'Manrope', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, monospace;
  --font-weight-display: 700;
  --line-height-display: 1.15;
  --tracking-display: -0.02em;
  --font-weight-body: 500;
  --line-height-body: 1.55;
  --tracking-body: 0em;
  --font-weight-mono: 400;

  /* ── shadcn base tokens ────────────────────────────────────── */
  --background: #FBF8F2;
  --foreground: #075E54;
  --card: #FFFFFF;
  --card-foreground: #075E54;
  --popover: #FFFFFF;
  --popover-foreground: #075E54;
  --primary: #128C7E;
  --primary-foreground: #FFFFFF;
  --secondary: #FFFFFF;
  --secondary-foreground: #075E54;
  --muted: #F1EEE6;
  --muted-foreground: #5C6E6A;
  --accent: #E7F2EF;
  --accent-foreground: #075E54;
  --destructive: #E5484D;
  --destructive-foreground: #FFFFFF;
  --border: #D6DEDB;
  --input: #C9D3D0;
  --ring: color-mix(in srgb, var(--teal) 45%, var(--background));
  /* Green is "success" (live and good), amber is "warning" (needs attention) */
  --success: #25D366;
  --warning: #F5A524;

  /* ── sidebar ───────────────────────────────────────────────── */
  --sidebar: #FFFFFF;
  --sidebar-foreground: #075E54;
  --sidebar-primary: #128C7E;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E7F2EF;
  --sidebar-accent-foreground: #075E54;
  --sidebar-border: #D6DEDB;
  --sidebar-ring: color-mix(in srgb, var(--teal) 45%, var(--background));

  /* ── surface hierarchy ─────────────────────────────────────── */
  --background-secondary: #F3EFE7;
  --surface-hover: #F3EFE7;
  --surface-active: #EDE8DE;
  --surface-elevated: #FFFFFF;

  /* ── border hierarchy (slate hairlines) ────────────────────── */
  --border-subtle: #ECEAE3;
  --border-muted: #DCE0E9;
  --border-strong: #B9C1D3;

  /* ── text hierarchy ────────────────────────────────────────── */
  --foreground-secondary: #4B6B66;

  /* ── teal surface accents (header, active pills) ───────────── */
  --accent-dark: #128C7E;
  --accent-light: #DCEFEA;

  /* ── primary depth (teal) ──────────────────────────────────── */
  --primary-hover: #075E54;
  --primary-muted: #A9D6CF;
  --primary-soft: #DCEFEA;
  --primary-tint: #ECF6F3;

  /* ── the amber highlight ───────────────────────────────────── */
  --highlight: #F5A524;
  --highlight-foreground: #075E54;
  --highlight-soft: #FDEFD4;

  /* ── focus & error ─────────────────────────────────────────── */
  --focus-ring: color-mix(in srgb, var(--teal) 35%, transparent);
  --error: #E5484D;
  --error-foreground: #FFFFFF;

  /* ── radius ────────────────────────────────────────────────── */
  --radius: 0.75rem;
  --radius-none: 0rem;
  --radius-sm: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* ── shadows (kept whisper-quiet — the brand is flat) ──────── */
  --shadow-sm: 0 1px 2px rgba(7, 94, 84, 0.05);
  --shadow-md: 0 4px 14px rgba(7, 94, 84, 0.06);
  --shadow-lg: 0 14px 40px rgba(7, 94, 84, 0.08);

  /* ── motion ────────────────────────────────────────────────── */
  --duration-fast: 100ms;
  --duration-normal: 180ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);

  /* ── spacing ───────────────────────────────────────────────── */
  --spacing-base: 0.25rem;
}

body {
  background-color: #FBF8F2;
}