/* SpraySync design tokens.
   Brand palette from tailwind.config.js; neutrals are Tailwind slate. */

:root {
  /* Brand */
  --app-light-green:       #558d6e;   /* primary: buttons, borders, focus rings */
  --app-light-green-hover: #466e58;
  --app-vibrant-green:     #5ed48e;   /* logo pulse / success only */
  --app-dark-green:        #272e2c;   /* menu text on white */
  --app-dark-gray:         #535857;   /* navbar background */
  --app-light-gray:        #b8c6be;   /* sidebar hover (sage) */

  /* Slate neutrals */
  --app-slate-50:  #f8fafc;
  --app-slate-100: #f1f5f9;           /* modal backdrop wash */
  --app-slate-200: #e2e8f0;           /* .content-slate card surface */
  --app-slate-300: #cbd5e1;
  --app-slate-400: #94a3b8;
  --app-slate-500: #64748b;
  --app-slate-600: #475569;
  --app-slate-700: #334155;
  --app-slate-800: #1e293b;
  --app-slate-900: #0f172a;

  /* Semantic */
  --app-bg:           #ffffff;
  --app-bg-card:      var(--app-slate-200);
  --app-bg-inset:     var(--app-slate-100);
  --app-fg:           var(--app-slate-900);
  --app-fg-muted:     var(--app-slate-500);
  --app-fg-on-brand:  #ffffff;
  --app-border:       var(--app-slate-300);
  --app-border-card:  #ffffff;        /* 2px white hairline on card-on-card */

  --app-primary:      var(--app-light-green);
  --app-primary-fg:   #ffffff;
  --app-warn:         #f97316;
  --app-danger:       #ef4444;
  --app-info:         #3b82f6;
  --app-link:         #2563eb;
  --app-link-hover:   #1e40af;
  --app-link-visited: #7e22ce;

  /* Type */
  --app-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --app-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                   "Liberation Mono", "Courier New", monospace;

  --app-text-xs:   0.75rem;
  --app-text-sm:   0.875rem;
  --app-text-base: 1rem;
  --app-text-lg:   1.125rem;
  --app-text-xl:   1.25rem;
  --app-text-2xl:  1.5rem;
  --app-text-3xl:  1.875rem;

  --app-weight-normal: 400;
  --app-weight-medium: 500;
  --app-weight-bold:   700;

  /* Geometry / shadow */
  --app-radius-sm:   2px;             /* inputs, popovers */
  --app-radius-md:   6px;             /* cards, modals */
  --app-radius-lg:   8px;
  --app-radius-full: 9999px;          /* every button */

  --app-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --app-shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1),
                   0 1px 2px -1px rgb(0 0 0 / 0.1);

  --app-dur-fast: 150ms;
  --app-ease: ease;

  /* Layout */
  --app-pad-card:    20px;
  --app-pad-card-sm: 12px;
  --app-gap:         16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--app-font-sans);
  color: var(--app-fg);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
}