/* ==========================================================================
   Varidian — Ocean Depth Design System
   public/css/app.css
   Single source of truth for all CSS custom properties.
   All Blade templates reference these variables via asset('css/app.css').
   ========================================================================== */

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

:root {
  /* --- Ocean Depth core --- */
  --v-bg:          #eef4fb;  /* page background */
  --v-card:        #ffffff;  /* card surface */
  --v-border:      #daeaf8;  /* card / input border */
  --v-border-mid:  #b8d4f0;  /* dividers, stronger separators */
  --v-border-hov:  #378add;  /* hover border */

  /* --- Blue scale --- */
  --v-blue-1:      #1a5fa8;  /* primary — headings, buttons, active nav */
  --v-blue-2:      #378add;  /* mid — links, focus, card accents */
  --v-blue-3:      #5a8fc4;  /* muted — secondary icons (sign-out) */
  --v-blue-4:      #5ba3e8;  /* lower share in data viz */
  --v-blue-5:      #93b8d8;  /* inactive nav icon */
  --v-blue-6:      #bfdbfe;  /* lightest — ocean fill, map defaults */

  /* --- Text --- */
  --v-text:        #1e293b;  /* body */
  --v-text-mid:    #475569;  /* secondary */
  --v-text-mute:   #94a3b8;  /* captions, labels */

  /* --- Semantic --- */
  --v-green:       #1d9e75;  /* success, up-trend, confirmed reaction */
  --v-amber:       #ef9f27;  /* warning, watching, concentration */
  --v-red:         #ef4444;  /* error, down-trend, disagree */
  --v-violet:      #8b5cf6;  /* platform content, AI summary accent */
  --v-orange:      #f97316;  /* signal events in community feed */
  --v-cyan:        #06b6d4;  /* practitioner posts in community feed */
  --v-slate:       #64748b;  /* curated sources, no-impact reaction */

  /* --- Elevation --- */
  --v-shadow-sm:   0 1px 3px rgba(0,0,0,0.05);
  --v-shadow-md:   0 2px 8px rgba(26,95,168,0.08);
  --v-shadow-blue: 0 4px 14px rgba(55,138,221,0.15);

  /* --- Radius --- */
  --v-radius-sm:   6px;    /* small chips, inline pills */
  --v-radius-md:   8px;    /* buttons, inputs */
  --v-radius-lg:   14px;   /* cards, panels */
  --v-radius-pill: 999px;  /* tag pills, avatar */
}

/* --- Base reset --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-text);
  background-color: var(--v-bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--v-bg);
  color: var(--v-text);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--v-text);
  margin: 0 0 0.5em;
  line-height: 1.25;
}

h1 { font-size: 20px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }

a { color: var(--v-blue-1); text-decoration: none; }
a:hover { color: var(--v-blue-2); }

/* --- Form inputs (16px prevents iOS auto-zoom) --- */
input, select, textarea {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  color: var(--v-text);
}

/* --- Bottom nav (56px height, Ocean Depth spec) --- */
.v-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: var(--v-card);
  border-top: 1px solid var(--v-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
  box-shadow: 0 -1px 4px rgba(26,95,168,0.06);
}

.v-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--v-blue-5);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  justify-content: center;
  padding: 0 12px;
  transition: color 0.15s;
}

.v-bottom-nav__item.is-active { color: var(--v-blue-1); }

/* --- Cards --- */
.v-card {
  background: var(--v-card);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-lg);
  box-shadow: var(--v-shadow-sm);
  padding: 20px 24px;
}

/* --- Buttons --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--v-blue-1);
  color: #ffffff;
  border: none;
  border-radius: var(--v-radius-md);
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--v-blue-2); color: #ffffff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  background: var(--v-card);
  color: var(--v-text-mid);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  font: 600 14px/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s;
}

.btn-secondary:hover { border-color: var(--v-blue-2); color: var(--v-blue-2); }

/* --- Status badges --- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--v-radius-pill);
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.status-badge.active   { background: rgba(29,158,117,0.12); color: var(--v-green); }
.status-badge.inactive { background: rgba(239,68,68,0.12);  color: var(--v-red); }
.status-badge.draft    { background: rgba(100,116,139,0.12); color: var(--v-slate); }

/* --- Utility --- */
.text-mute  { color: var(--v-text-mute); }
.text-mid   { color: var(--v-text-mid); }
.text-blue  { color: var(--v-blue-1); }
.text-green { color: var(--v-green); }
.text-amber { color: var(--v-amber); }
.text-red   { color: var(--v-red); }