/*
 * VIVUM Studio design system — theme overrides for BasecoatUI.
 *
 * Loaded after the basecoat-css CDN stylesheet (see app/views/layouts/application.html.erb),
 * so these :root custom property overrides win the cascade and re-theme every
 * BasecoatUI component (button, card, badge, alert, input, etc.) without
 * touching component markup. Source: docs/web/design-system/vivum-tokens.css
 * and docs/web/web/colors_and_type.css.
 */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/CormorantGaramond-VariableFont_wght-50a96138.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/CormorantGaramond-Italic-VariableFont_wght-29796d6f.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/DMSans-VariableFont_opsz_wght-e5442f61.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/DMSans-Italic-VariableFont_opsz_wght-eb9f1fb7.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-VariableFont_wght-27438e59.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/JetBrainsMono-Italic-VariableFont_wght-99e91e3c.ttf") format("truetype-variations");
  font-weight: 100 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ─── VIVUM Studio palette ──────────────────────────────── */
  /* Color values are defined once in app/assets/tailwind/application.css's
     @theme block (--color-forest etc.) so they're available as Tailwind
     utilities (bg-forest, text-moss, border-cork...) too. */
  --forest:   var(--color-forest);
  --deep:     var(--color-deep);
  --moss:     var(--color-moss);
  --linen:    var(--color-linen);
  --charcoal: var(--color-charcoal);
  --cork:     var(--color-cork);
  --surface:  var(--color-surface);
  --fg2:      #6A6A68;
  --fg3:      #9A9A98;
  --line:     #D8D4CB;
  --confirm:  #4A7A5A;
  --warn:     #9A7B4B;
  --error:    #7A3A2E;

  /* ─── Typefaces ──────────────────────────────────────────── */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Courier New", monospace;

  /* ─── BasecoatUI semantic token remap ───────────────────── */
  --background:        var(--linen);
  --foreground:        var(--charcoal);

  --card:              var(--surface);
  --card-foreground:   var(--charcoal);

  --popover:           var(--surface);
  --popover-foreground: var(--charcoal);

  --primary:           var(--forest);
  --primary-foreground: var(--linen);

  --secondary:         var(--moss);
  --secondary-foreground: var(--deep);

  --muted:             var(--surface);
  --muted-foreground:  var(--fg2);

  --accent:            var(--cork);
  --accent-foreground: var(--charcoal);

  --destructive:       var(--error);

  --border:            var(--line);
  --input:             var(--line);
  --ring:              var(--moss);

  /* rounded-md (4px) on data elements per VIVUM Labs spec */
  --radius: 0.375rem;

  /* Extra semantic tokens not provided by basecoat-css */
  --warning:           var(--warn);
  --warning-foreground: var(--linen);
  --success:           var(--confirm);
  --success-foreground: var(--linen);
}

body {
  font-family: var(--font-body);
}

/* ─── Semantic typography ─────────────────────────────────── */

.h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--forest);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.3;
  color: var(--forest);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--charcoal);
}

.h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--charcoal);
}

.lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--fg2);
}

.caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg3);
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--forest);
}

/* Rendered Markdown (protocols, journal entries) */
.markdown-content :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  color: var(--forest);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.markdown-content :where(h1, h2) {
  font-size: 1.5rem;
}

.markdown-content :where(h3, h4) {
  font-size: 1.25rem;
}

.markdown-content :where(p, ul, ol) {
  margin-bottom: 0.75em;
  line-height: 1.6;
}

.markdown-content :where(ul, ol) {
  padding-left: 1.5em;
}

.markdown-content a {
  color: var(--moss);
  text-decoration: underline;
}

.markdown-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--muted);
  border-radius: 0.25rem;
  padding: 0.1em 0.3em;
}

/* turbo-frame is inline by default — make it block so banners stretch full-width */
turbo-frame {
  display: block;
}

/* Warning banner — used for the checkin-debt banner */
.alert-warning {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing, 0.25rem) * 2);
  width: 100%;
  padding-inline: calc(var(--spacing, 0.25rem) * 4);
  padding-block: calc(var(--spacing, 0.25rem) * 2.5);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  background-color: color-mix(in srgb, var(--warning) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  color: color-mix(in srgb, var(--warning) 80%, var(--foreground));
}

.badge-warning {
  background-color: var(--warning);
  color: var(--warning-foreground);
  border-color: transparent;
}

.badge-success {
  background-color: var(--success);
  color: var(--success-foreground);
  border-color: transparent;
}

/* ─── Flash / notice / alert ──────────────────────────────── */

.alert,
.alert-destructive {
  font-weight: 600;
  box-shadow: 0 1.25rem 2.5rem rgba(26, 51, 36, 0.12);
}

.alert {
  background: #f4f8f0;
  border-color: rgba(139, 175, 143, 0.55);
  color: var(--deep);
}

.alert-destructive {
  background: #fff4ee;
  border-color: #e7b9a0;
  color: #7a2e18;
}

/* ─── Page background ─────────────────────────────────────── */

html {
  background: var(--linen);
}

body.vivum-app {
  background:
    linear-gradient(135deg, rgba(46, 83, 57, 0.08), transparent 28rem),
    var(--linen);
}

/* ─── Manager shell (sidebar + content layout) ────────────── */

.manager-shell {
  min-height: 100vh;
}

.manager-sidebar {
  background:
    radial-gradient(circle at top left, rgba(139, 175, 143, 0.16), transparent 18rem),
    var(--deep);
  box-shadow: 12px 0 32px rgba(26, 51, 36, 0.10);
}

.manager-brand-mark {
  background: var(--linen);
  border: 1px solid rgba(245, 243, 238, 0.32);
  border-radius: 4px;
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 500;
}

.manager-brand-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.18em;
}

.manager-content {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 18rem),
    transparent;
}

.manager-content h1 {
  font-family: var(--font-display);
  font-weight: 400;
}

.manager-content h1,
.manager-content h2,
.manager-content h3 {
  letter-spacing: 0;
}

/* Cards / panels get a soft border + radius + green-tinted shadow */
.manager-content .card {
  border-color: rgba(216, 212, 203, 0.95);
  border-radius: 6px;
}

/* basecoat gives .card > header/section/footer horizontal padding but not
   bare <form> children, leaving form fields flush against the card edge */
.card > form {
  padding-inline: 1.5rem;
}

.manager-content .shadow-sm {
  box-shadow: 0 2px 10px rgba(26, 51, 36, 0.07);
}

/* Form inputs */
.manager-content input,
.manager-content select,
.manager-content textarea {
  border-radius: 4px;
}

.manager-content input:focus,
.manager-content select:focus,
.manager-content textarea:focus {
  box-shadow: 0 0 0 3px rgba(139, 175, 143, 0.28);
}

/* ─── Organic section rule ────────────────────────────────── */

.rule-organic {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 20%, var(--moss) 50%, var(--line) 80%, transparent 100%);
  margin: 2rem 0;
}