@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cinzel+Decorative:wght@400;700&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none; }


/* Second Breath — Color Palettes */

:root {
  /* ── Parchment — warm cream page backgrounds ── */
  --parchment-50:  #FBF6EC;
  --parchment-100: #F5ECD7;
  --parchment-200: #EDE0C4;
  --parchment-300: #E0CFA3;
  --parchment-400: #D0BA80;
  --parchment-500: #C0A460;

  /* ── Leather — warm brown neutrals ── */
  --leather-100: #C4966A;
  --leather-200: #A67848;
  --leather-300: #8B6340;
  --leather-400: #6B4C2A;
  --leather-500: #4A3018;
  --leather-600: #2C1A08;
  --leather-700: #1A0F04;

  /* ── Ink — warm near-blacks for text ── */
  --ink-100: #4A3824;
  --ink-200: #2E1F0E;
  --ink-300: #1A1208;
  --ink-400: #0D0804;

  /* ── Gold — primary accent ── */
  --gold-100: #F5E27A;
  --gold-200: #E8C84A;
  --gold-300: #D4AF37;
  --gold-400: #C9A227;
  --gold-500: #B8860B;
  --gold-600: #8B6400;

  /* ── Jewel tones — chapter / callout accents ── */
  --jewel-sapphire:       #1B4B8A;
  --jewel-sapphire-light: #3A6BAE;
  --jewel-ruby:           #8B1A1A;
  --jewel-ruby-light:     #B03030;
  --jewel-emerald:        #1A5C3A;
  --jewel-emerald-light:  #2E7D52;
  --jewel-amethyst:       #5C1A8B;
  --jewel-amethyst-light: #7A3AA8;
  --jewel-jade:           #1A5C4A;
  --jewel-jade-light:     #2A7A62;
  --jewel-amber:          #83400D;
  --jewel-amber-light:    #A75A20;

  /* ── Silver — cool metallic counterpoint to gold ── */
  --silver-100: #F0F1F3;
  --silver-200: #D6D9DE;
  --silver-300: #B4B9C2;
  --silver-400: #8E95A1;
  --silver-500: #6C737F;

  /* ── Ebony — jet / cool black ── */
  --ebony-100: #3A3D44;
  --ebony-200: #25272D;
  --ebony-300: #16181C;
  --ebony-400: #0A0B0D;
}

/* Colors */
:root {
  /* Light theme (default) */
  --bg-primary: var(--parchment-200);
  --bg-secondary: var(--parchment-100);
  --text-primary: var(--ink-400);
  --text-muted: var(--ink-100);
  --border-color: var(--parchment-100);
  --highlight-primary: var(--gold-300);
  --highlight-secondary: var(--gold-500);
  --palette-red: var(--jewel-ruby);
  --palette-red-bright: var(--jewel-ruby-light);
  --palette-green: var(--jewel-emerald);
  --palette-green-bright: var(--jewel-emerald-light);
  --palette-blue: var(--jewel-sapphire);
  --palette-blue-bright: var(--jewel-sapphire-light);
  --palette-yellow: var(--gold-500);
  --palette-yellow-bright: var(--gold-500);
  --palette-purple: var(--jewel-amethyst);
  --palette-purple-bright: var(--jewel-amethyst-light);
  --palette-gray: var(--silver-500);
  --palette-gray-bright: var(--silver-400);
  --palette-brown: var(--leather-500);
  --palette-brown-bright: var(--leather-400);
  --palette-orange: var(--jewel-amber);
  --palette-orange-bright: var(--jewel-amber-light);
  --palette-black: var(--ebony-400);
}
[data-theme="light"] {
  /* Light theme overrides (if needed) */
}
[data-theme="dark"] {
  /* Dark theme overrides */
  --bg-primary: var(--leather-700);
  --bg-secondary: var(--ink-400);
  --text-primary: var(--parchment-300);
  --text-muted: var(--leather-100);
  --border-color: var(--leather-700);
}


/* Typography

   Four roles, settled here and consumed by var() everywhere else. Nothing
   below this block names a family, a size or a letter-spacing directly —
   naming them locally is what let the old values drift apart.

     title   Cinzel Decorative, uppercase. The "Second Breath" wordmark, and
             nothing else.
     header  Cinzel, uppercase. Card names, section heads, field labels,
             buttons — the small capitalised chrome. Four steps, because a
             card name and a field label are not the same kind of thing.
     body    Crimson Pro. Everything the reader actually reads.
     flavor  Crimson Pro italic — a voice, not a size. It borrows the body
             steps, so it needs no sizes of its own.

   Letter-spacing runs inversely to size: the smaller the step, the wider it
   is set, which is what keeps 9px Cinzel legible without tracking a 12px
   card name into next week. */
:root {
  --font-title: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-header: 'Cinzel', Georgia, serif;
  --font-body: 'Crimson Pro', Georgia, serif;

  /* Display steps, largest to smallest */
  --fs-title: 16px;
  --fs-head-lg: 12px;
  --fs-head: 11px;
  --fs-control: 10px;
  --fs-label: 9px;

  /* Tracking, tied to the step above rather than to the role */
  --ls-tight: 0.06em;
  --ls-mid: 0.12em;
  --ls-wide: 0.14em;

  /* Body steps */
  --fs-body: 14px;
  --fs-body-sm: 13px;
  --fs-micro: 11px;
  --lh-body: 1.55;
}


/* Icons */
.lucide-small {
  width: 12px;
  height: 12px;
  stroke-width: 1.5px;
}
.lucide-medium {
  width: 16px;
  height: 16px;
  stroke-width: 1.5px;
}

/* Base */
html, body {
  height: 100%;
  margin: 0;
  /* The body face, inherited everywhere. It lives here rather than on
     .app so the sign-in page — which has no .app wrapper — gets it. */
  font-family: var(--font-body);
}
.app {
  display: flex;
  height: 100vh;
  background: var(--bg-primary);
  min-height: 520px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}


/* Buttons */
.btn {
  font-family: var(--font-header);
  font-size: var(--fs-control);
  letter-spacing: var(--ls-mid);
  padding: 6px 8px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  transition: all 0.15s;
}
.btn:hover {
  background: var(--bg-primary);
  color: var(--highlight-primary);
  border-color: var(--highlight-secondary);
}
.btn.primary { 
  border-color: #c8960a; 
  color: #e8b820; 
}
.btn.primary:hover { 
  background: #c8960a; 
  color: #1c1a14; 
}
/* The lock toggle. Shown to every reader so the state is legible, but inert
   for anyone but the object's author — hence a disabled style that still
   reads clearly rather than fading out of view. */
.btn[disabled] {
  cursor: default;
  opacity: 0.55;
}
.btn[disabled]:hover {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}


/* Sign-in page */
.login-page {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}
.login-box {
  width: 320px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 26px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 2px;
}
/* The mark sits inside the box's own padding, so it aligns with the fields
   below it and the flex gap keeps the spacing the rest of the box uses. */
.login-logo {
  display: block;
  width: 100%;
  height: auto;
}
.login-title {
  font-family: var(--font-title);
  font-size: var(--fs-title);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--highlight-secondary);
  text-align: center;
}
.login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-field label {
  font-family: var(--font-header);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.login-field input {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 6px 8px;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 2px;
}
.login-field input:focus {
  outline: none;
  border-color: var(--highlight-secondary);
}
.login-error {
  font-size: var(--fs-body-sm);
  padding: 6px 8px;
  color: var(--palette-red);
  border: 1px solid var(--palette-red);
  border-radius: 2px;
}
.login-note {
  font-size: var(--fs-micro);
  line-height: var(--lh-body);
  color: var(--text-muted);
  text-align: center;
}
.login-note code { font-size: 0.92em; }

/* Signed-in user row (sidebar footer) */
.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border-color);
}
.session-user {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}