/* ============================================
   LineMind Novelist — Brand CSS
   Purpose: fonts + base color tokens + Bootstrap mappings
   Scope: foundational only (no component redesigns)
   ============================================ */

/* ---------- Brand Tokens ---------- */
:root {
  /* Typography */
  --lmn-font-body: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --lmn-font-header: "Raleway", "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --lmn-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Palette (from Branding & Graphic Standards) */
  --lmn-color-ink:    #000000; /* Primary Black - text, core wordmark */
  --lmn-color-crimson:#B32734; /* Editorial Crimson - accent */
  --lmn-color-gray:   #A6A6A6; /* Neutral Gray - secondary, subtle accents */
  --lmn-color-paper:  #FFFFFF; /* White - primary workspace */

  /* Support tones derived for UI affordances (kept subtle) */
  --lmn-color-border: #E6E6E6; /* light border line */
  --lmn-color-muted:  #666666; /* muted text on white */
}

/* ---------- Bootstrap Root Variable Overrides ----------
   Keep this minimal so Bootstrap components inherit brand.
   ------------------------------------------------------ */
:root {
  --bs-body-font-family: var(--lmn-font-body);
  --bs-body-color:       var(--lmn-color-ink);
  --bs-body-bg:          var(--lmn-color-paper);

  /* Action/brand color */
  --bs-primary:    var(--lmn-color-crimson);
  --bs-primary-rgb: 179, 39, 52; /* <-- CRIMSON for .link-primary, badges, etc. */

  /* LINKS: switch to brand crimson globally (normal text links) */
  --bs-link-color:           var(--lmn-color-crimson);
  --bs-link-hover-color:     var(--lmn-color-crimson);
  /* RGB fallbacks used by some Bootstrap utilities */
  --bs-link-color-rgb:       179, 39, 52;  /* #B32734 */
  --bs-link-hover-color-rgb: 139, 31, 43;  /* ~darker crimson */

  /* Underline color variables used by Bootstrap 5.3 */
  --bs-link-underline-color-rgb: 179, 39, 52;
  --bs-link-underline-color: rgba(179, 39, 52, .4);

  --bs-border-color: var(--lmn-color-border);
}


/* ---------- Base Elements (light touch) ---------- */
html, body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lmn-font-header);
  letter-spacing: 0.01em;
}

/* Keep body copy firmly “editorial clean” */
p, li, input, textarea, button {
  font-family: var(--lmn-font-body);
  line-height: 1.6;
  color: var(--lmn-color-ink);
}

/* Mono contexts (useful for code-style snippets in diagnostics, if any) */
code, pre, kbd, samp { font-family: var(--lmn-font-mono); }

/* Links: scarlet by default; on hover only the underline appears (also scarlet) */
a {
  color: var(--bs-link-color);
  text-decoration: none;
  text-decoration-color: currentColor;
}
a:hover,
a:focus {
  color: var(--bs-link-color);
  text-decoration: underline;
  text-decoration-color: currentColor; /* ensure underline matches crimson, not blue */
}

/* Guard for Bootstrap utility class usage on links */
.link-primary:hover,
.link-primary:focus {
  color: var(--lmn-color-crimson) !important;
  text-decoration-color: currentColor !important;
}

/* Borders and muted text */
.hr, hr { border: 0; height: 1px; background: var(--bs-border-color); }
.text-muted { color: var(--lmn-color-muted) !important; }

/* ---------- Bootstrap Button Primary ----------
   Let Bootstrap handle shapes; we just align hues using the brand crimson.
   ------------------------------------------------------ */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  /* Subtle darken on interactive states (keeps within crimson family) */
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);

  /* Focus ring harmonized with accent but restrained */
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 as rgb */
}

/* ---------- Editorial Accent Utilities ----------
   Small helpers to express brand motifs without redesigning components.
   Use sparingly (per standards).
   ------------------------------------------------------ */

/* Crimson text accent */
.accent { color: var(--lmn-color-crimson) !important; }

/* Underline accent (editorial “red ink” underline) */
.underline-accent {
  text-decoration-line: underline;
  text-decoration-color: var(--lmn-color-crimson);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 3px; /* ~7–8% of cap height at common sizes */
}

/* Sharpening line: faint→bold crimson horizontal rule */
.sharpening-line {
  height: 2px;
  border: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--lmn-color-crimson) 25%, white) 0%,
    var(--lmn-color-crimson) 60%,
    var(--lmn-color-crimson) 100%
  );
}

/* Margin-note feel: controlled left gutter for SRF numbering (optional) */
.srf-margin-left { padding-left: 1.25rem; border-left: 3px solid var(--bs-border-color); }

/* Cards/inputs keep soft borders that respect brand radius from tokens.css */
.card, .form-control, .btn { border-radius: var(--lmn-radius, 12px); }

/* Optional: make <mark> look like editorial highlight without neon */
mark {
  background: color-mix(in srgb, var(--lmn-color-crimson) 12%, white);
  padding: .1em .2em;
}

.brand-hero-logo { max-width: 340px; height: auto; }

/* ============================
   Brand Button Mapping (add-on)
   ============================ */

/* Secondary = Ink (black) for neutral actions */
:root { --bs-secondary: var(--lmn-color-ink); }

.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lmn-color-ink);
  --bs-btn-border-color: var(--lmn-color-ink);

  /* Slight lighten on hover/active since black can't "darken" meaningfully */
  --bs-btn-hover-bg: color-mix(in srgb, var(--lmn-color-ink) 88%, white);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--lmn-color-ink) 88%, white);
  --bs-btn-active-bg: color-mix(in srgb, var(--lmn-color-ink) 82%, white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lmn-color-ink) 82%, white);

  --bs-btn-focus-shadow-rgb: 0, 0, 0; /* Ink */
}

/* Outline Primary = Crimson outline/text, fills on hover */
.btn-outline-primary {
  --bs-btn-color: var(--lmn-color-crimson);
  --bs-btn-border-color: var(--lmn-color-crimson);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lmn-color-crimson);
  --bs-btn-hover-border-color: var(--lmn-color-crimson);

  --bs-btn-active-bg: color-mix(in srgb, var(--lmn-color-crimson) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lmn-color-crimson) 85%, black);

  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* Crimson */
}

/* Outline Secondary = Ink outline/text, fills on hover */
.btn-outline-secondary {
  --bs-btn-color: var(--lmn-color-ink);
  --bs-btn-border-color: var(--lmn-color-ink);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--lmn-color-ink);
  --bs-btn-hover-border-color: var(--lmn-color-ink);

  --bs-btn-active-bg: color-mix(in srgb, var(--lmn-color-ink) 82%, white);
  --bs-btn-active-border-color: color-mix(in srgb, var(--lmn-color-ink) 82%, white);

  --bs-btn-focus-shadow-rgb: 0, 0, 0; /* Ink */
}

/* Link button: keep it quiet and brand-consistent (Ink) */
.btn-link {
  color: var(--lmn-color-ink);               /* explicitly Ink, not crimson */
  text-decoration: none;
}

.btn-link:hover,
.btn-link:focus { text-decoration: underline; }

/* Optional: make “Light” & “Dark” obey brand neutrals a bit more */
.btn-light {
  --bs-btn-color: var(--lmn-color-ink);
  --bs-btn-bg: #f7f7f7;
  --bs-btn-border-color: var(--lmn-color-border);
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lmn-color-ink);
  --bs-btn-border-color: var(--lmn-color-ink);
}

/* Accessibility nudge: ensure contrast on disabled states */
.btn:disabled, .btn.disabled {
  opacity: .55; /* Bootstrap default; acceptable with our palette */
}


/* -- Force crimson as "primary" on the elements themselves -- */
.btn-primary,
.btn-outline-primary {
  /* If any container redefines --bs-primary, the element-level var wins */
  --bs-primary: var(--lmn-color-crimson) !important;
}

/* -- Fully specify disabled states so they don't fall back to defaults -- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);

  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 */
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  /* Disabled outline stays outline (no surprise fills) */
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52;
}





/* =========================================================
   Ensure brand variables apply even under Bootstrap themes.
   (Bootstrap 5.3+ uses [data-bs-theme] to scope variables.)
   ========================================================= */
:root,
[data-bs-theme],
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  /* Typography */
  --bs-body-font-family: var(--lmn-font-body);
  --bs-body-color:       var(--lmn-color-ink);
  --bs-body-bg:          var(--lmn-color-paper);

  /* Brand hues */
  --bs-primary:              var(--lmn-color-crimson); /* Editorial Crimson */
  --bs-primary-rgb:          179, 39, 52;  /* <-- ensures .link-primary is crimson under data-bs-theme */

  /* LINKS: ensure crimson in any theme scope */
  --bs-link-color:           var(--lmn-color-crimson);
  --bs-link-hover-color:     var(--lmn-color-crimson);
  --bs-link-color-rgb:       179, 39, 52;
  --bs-link-hover-color-rgb: 139, 31, 43;

  /* Underline color variables (Bootstrap 5.3) */
  --bs-link-underline-color-rgb: 179, 39, 52;
  --bs-link-underline-color: rgba(179, 39, 52, .4);

  --bs-border-color:         var(--lmn-color-border);
}


/* Keep our .btn-primary mapping intact under any theme */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 92%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 88%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
  --bs-btn-focus-shadow-rgb: 179, 39, 52; /* #B32734 */
}


/* Hide [x-cloak] elements until Alpine initializes */
[x-cloak] { display: none !important; }


/* Pro-tier accent bar (subtle celebratory line) */
.pro-accent {
  height: 3px;
  background: var(--lmn-color-crimson);
  border-radius: 999px;
}



/* Editorial query mark (circled "?") — inherits text color */
.qmark {
  /* Tunables */
  --q-size: 1.50em;          /* circle diameter */
  --q-stroke: 1px;           /* ring thickness */
  --q-glyph-scale: 0.50;     /* question-mark size relative to circle */
  --q-pad: 0.18em;           /* inner padding between "?" and ring */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Make padding reduce the content box (keeps outer size stable) */
  box-sizing: border-box;
  width: var(--q-size);
  height: var(--q-size);
  padding: var(--q-pad);

  border-radius: 50%;
  border: var(--q-stroke) solid currentColor; /* inherits surrounding text color */
  color: currentColor;

  font-family: var(--lmn-font-header);
  font-weight: 700;
  font-size: calc(var(--q-size) * var(--q-glyph-scale));
  line-height: 1;
  margin-right: .15rem;
  flex: 0 0 auto;
  transform: translateY(-0.05em); /* tiny optical nudge */
}
.qmark::before { content: "?"; }

/* Optional size shortcuts */
.qmark.sm { --q-size: 1.3em; --q-stroke: 1px; }
.qmark.lg { --q-size: 1.8em;  --q-stroke: 1px;   }



/* tagline */
.tagline {
  font-family: var(--lmn-font-header);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: .25rem 0 0;
  text-transform: none; /* never auto-cap */
  color: var(--lmn-color-ink);
}


/* Footer polish */
.site-footer { background: var(--bs-body-bg); }
.site-footer .footer-title { color: var(--lmn-color-ink); }
.site-footer .link-secondary { color: var(--lmn-color-muted); }
.site-footer .link-secondary:hover { color: var(--lmn-color-ink); text-decoration: underline; }
.site-footer ul li + li { margin-top: .25rem; }


/* Gentle rhythm for legal/help prose */
.prose p, .prose ul, .prose ol { max-width: 70ch; }
.prose ul, .prose ol { padding-left: 1.1rem; }
.prose li + li { margin-top: .25rem; }