/* Lore design tokens + Bootstrap 5.3.8 theme layer over vanilla Bootstrap
 * (CDN, see the layout), light + dark. Why vanilla and not Bootswatch:
 * docs/features/design-system/overview.md#key-design-decisions
 * pc- blocks live in custom.css + feature stylesheets per docs/conventions/css.md. */

/* ----- Color tokens: warm cream neutrals with a green cast, the leaf-green
   brand family, and the growth ramp (stages 0-4) that moves dusty sage →
   deep verdant as a plant gains richness. ----- */

:root {
  --lore-ink: #262922;
  --lore-ink-soft: #575C4E;
  --lore-ink-faint: #878C7B;
  --lore-ink-inverse: #F6F4EC;

  --lore-surface: #F6F4EC;         /* page */
  --lore-surface-raised: #FDFCF7;  /* cards, sheets */
  --lore-surface-sunken: #EEEBE0;  /* wells, soft buttons */
  --lore-border: #E1DED0;
  --lore-border-strong: #C9C6B4;

  --lore-green-100: #E7F0E1;
  --lore-green-200: #CFE2C6;
  --lore-green-300: #ADCCA0;
  --lore-green-400: #82AF73;
  --lore-green-500: #5C9451;
  --lore-green-600: #467B41;   /* brand */
  --lore-green-700: #396338;
  --lore-green-800: #2C4E2C;
  --lore-green-900: #223D24;
  --lore-brand: var(--lore-green-600);

  /* Growth ramp: core = stage color (aura, dots), soft = wash for card
     figures, deep = text-safe label color. */
  --lore-stage-0: #A9AB96;  --lore-stage-0-soft: #EFEEE4;  --lore-stage-0-deep: #63665A;  /* seed */
  --lore-stage-1: #9AAD72;  --lore-stage-1-soft: #EAEFDA;  --lore-stage-1-deep: #5A6C33;  /* sprout */
  --lore-stage-2: #7BA254;  --lore-stage-2-soft: #E2ECD0;  --lore-stage-2-deep: #48632B;  /* budding */
  --lore-stage-3: #55913E;  --lore-stage-3-soft: #DBE8C8;  --lore-stage-3-deep: #38601F;  /* flourishing */
  --lore-stage-4: #2F7439;  --lore-stage-4-soft: #D2E4CE;  --lore-stage-4-deep: #1F5429;  /* abundant */

  /* Fruit doubles as warning and marks milestones; clay is danger
     (tender, not alarming); lake is info. */
  --lore-fruit: #C08327;   --lore-fruit-soft: #F5E7CB;   --lore-fruit-deep: #7F5A14;
  --lore-clay:  #B4563E;   --lore-clay-soft:  #F3DDD4;   --lore-clay-deep:  #8C3D2B;
  --lore-lake:  #4E7D8C;   --lore-lake-soft:  #DCE9EE;   --lore-lake-deep:  #35606D;
}

[data-bs-theme="dark"] {
  --lore-ink: #ECEAE0;
  --lore-ink-soft: #B9BCAB;
  --lore-ink-faint: #83887A;
  --lore-ink-inverse: #22251D;

  --lore-surface: #191B15;
  --lore-surface-raised: #232620;
  --lore-surface-sunken: #131510;
  --lore-border: #363A2E;
  --lore-border-strong: #4C5140;

  /* Greens flip toward luminous-on-dark */
  --lore-green-100: #24361F;
  --lore-green-200: #2E4526;
  --lore-green-300: #3F6134;
  --lore-green-400: #558145;
  --lore-green-500: #6FA25B;
  --lore-green-600: #8CBB79;
  --lore-green-700: #A9CD97;
  --lore-green-800: #C7DFB9;
  --lore-green-900: #E0EEDA;
  /* Redeclared so it re-resolves under subtree-scoped dark */
  --lore-brand: var(--lore-green-600);

  /* Growth ramp on dark: same journey, luminous instead of deep */
  --lore-stage-0: #8B8E79;  --lore-stage-0-soft: #24261D;  --lore-stage-0-deep: #B9BCA4;
  --lore-stage-1: #9DB16B;  --lore-stage-1-soft: #272B1C;  --lore-stage-1-deep: #C4D19E;
  --lore-stage-2: #93B25C;  --lore-stage-2-soft: #2A301C;  --lore-stage-2-deep: #C2D695;
  --lore-stage-3: #87B54F;  --lore-stage-3-soft: #2C351B;  --lore-stage-3-deep: #BEDB8F;
  --lore-stage-4: #74B953;  --lore-stage-4-soft: #2A3A20;  --lore-stage-4-deep: #B4DF97;

  --lore-fruit: #D9A44E;   --lore-fruit-soft: #3A2E17;   --lore-fruit-deep: #EDCB8F;
  --lore-clay:  #CE7C63;   --lore-clay-soft:  #3A241D;   --lore-clay-deep:  #ECB5A4;
  --lore-lake:  #7FA9B7;   --lore-lake-soft:  #1E2C31;   --lore-lake-deep:  #B4D2DC;
}

/* ----- Type: Literata for display + long reads, Instrument Sans for UI
   (both via Google Fonts CDN, see the layout). ----- */

:root {
  --lore-font-display: "Literata", "Iowan Old Style", Georgia, serif;
  --lore-font-ui: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --lore-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --lore-text-caption: 0.75rem;    /* 12 — timestamps, counts */
  --lore-text-small: 0.875rem;     /* 14 — meta, labels */
  --lore-text-body: 1rem;          /* 16 — default UI text */
  --lore-text-lead: 1.125rem;      /* 18 — intro lines, reader body */
  --lore-text-title: 1.375rem;     /* 22 — card/section titles */
  --lore-text-heading: 1.75rem;    /* 28 — screen headings */
  --lore-text-display: 2.25rem;    /* 36 — moments, big questions */

  --lore-leading-tight: 1.2;
  --lore-leading-normal: 1.55;
  --lore-leading-relaxed: 1.7;     /* long reads (fruit) */

  --lore-tracking-tight: -0.01em;  /* display sizes only */

  --lore-weight-regular: 400;
  --lore-weight-medium: 500;
  --lore-weight-semibold: 600;
  --lore-weight-bold: 700;
}

/* ----- Foundations: 4px spacing rhythm, soft adult radii, warm gentle
   shadows, and motion that celebrates but never nags. ----- */

:root {
  --lore-space-1: 0.25rem;
  --lore-space-2: 0.5rem;
  --lore-space-3: 0.75rem;
  --lore-space-4: 1rem;
  --lore-space-5: 1.5rem;
  --lore-space-6: 2rem;
  --lore-space-7: 3rem;
  --lore-space-8: 4rem;

  --lore-radius-sm: 0.5rem;    /*  8 — inputs inside cards, chips */
  --lore-radius: 0.75rem;      /* 12 — buttons, controls (default) */
  --lore-radius-lg: 1rem;      /* 16 — cards */
  --lore-radius-xl: 1.5rem;    /* 24 — sheets, modals */
  --lore-radius-pill: 50rem;

  --lore-shadow-sm: 0 1px 2px rgba(31, 34, 27, 0.05);
  --lore-shadow: 0 2px 10px -2px rgba(31, 34, 27, 0.08);
  --lore-shadow-lg: 0 12px 32px -8px rgba(31, 34, 27, 0.14);

  /* press: tap feedback · ui: hovers, fades · grow: stage changes,
     flash entry, celebration moments */
  --lore-dur-press: 120ms;
  --lore-dur-ui: 200ms;
  --lore-dur-grow: 420ms;
  --lore-ease: cubic-bezier(0.2, 0, 0, 1);
  --lore-ease-celebrate: cubic-bezier(0.3, 1.4, 0.6, 1);
}

[data-bs-theme="dark"] {
  --lore-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --lore-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.45);
  --lore-shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
}

/* ----- Bootstrap theme layer. This is the sanctioned exception to "never
   style bare Bootstrap selectors" (css.md): it IS the global theme.
   Variables wherever Bootstrap reads --bs-*; direct property overrides
   only where 5.3 compiles literals (form focus, checked states, headings). ----- */

:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--lore-surface);
  --bs-body-color: var(--lore-ink);
  --bs-body-color-rgb: 38, 41, 34;
  --bs-body-font-family: var(--lore-font-ui);
  --bs-body-line-height: var(--lore-leading-normal);

  --bs-emphasis-color: #171911;
  --bs-emphasis-color-rgb: 23, 25, 17;
  --bs-secondary-color: var(--lore-ink-soft);
  --bs-secondary-color-rgb: 87, 92, 78;
  --bs-secondary-bg: var(--lore-surface-sunken);
  --bs-tertiary-color: var(--lore-ink-faint);
  --bs-tertiary-bg: #F1EFE5;

  --bs-heading-color: var(--lore-ink);

  --bs-border-color: var(--lore-border);
  --bs-border-color-translucent: rgba(38, 41, 34, 0.12);
  --bs-border-radius: var(--lore-radius);
  --bs-border-radius-sm: var(--lore-radius-sm);
  --bs-border-radius-lg: var(--lore-radius-lg);
  --bs-border-radius-xl: var(--lore-radius-xl);
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-pill: var(--lore-radius-pill);

  --bs-primary: var(--lore-brand);
  --bs-primary-rgb: 70, 123, 65;
  --bs-primary-text-emphasis: var(--lore-green-800);
  --bs-primary-bg-subtle: var(--lore-green-100);
  --bs-primary-border-subtle: var(--lore-green-200);

  --bs-success: var(--lore-green-600);
  --bs-success-rgb: 70, 123, 65;
  --bs-success-text-emphasis: var(--lore-green-800);
  --bs-success-bg-subtle: var(--lore-green-100);
  --bs-success-border-subtle: var(--lore-green-200);

  --bs-danger: var(--lore-clay);
  --bs-danger-rgb: 180, 86, 62;
  --bs-danger-text-emphasis: var(--lore-clay-deep);
  --bs-danger-bg-subtle: var(--lore-clay-soft);
  --bs-danger-border-subtle: #E5C3B6;

  --bs-warning: var(--lore-fruit);
  --bs-warning-rgb: 192, 131, 39;
  --bs-warning-text-emphasis: var(--lore-fruit-deep);
  --bs-warning-bg-subtle: var(--lore-fruit-soft);
  --bs-warning-border-subtle: #EAD3A6;

  --bs-info: var(--lore-lake);
  --bs-info-rgb: 78, 125, 140;
  --bs-info-text-emphasis: var(--lore-lake-deep);
  --bs-info-bg-subtle: var(--lore-lake-soft);
  --bs-info-border-subtle: #C2DAE2;

  --bs-light: var(--lore-surface-raised);
  --bs-light-rgb: 253, 252, 247;
  --bs-dark: var(--lore-ink);
  --bs-dark-rgb: 38, 41, 34;

  --bs-link-color: var(--lore-green-700);
  --bs-link-color-rgb: 57, 99, 56;
  --bs-link-hover-color: var(--lore-green-800);
  --bs-link-hover-color-rgb: 44, 78, 44;

  --bs-code-color: var(--lore-clay-deep);
  --bs-highlight-bg: var(--lore-fruit-soft);
  --bs-focus-ring-color: rgba(70, 123, 65, 0.28);
}

/* Declared here (not only in Bootstrap's own block) so our dark tokens
   out-cascade Bootstrap's [data-bs-theme=dark]. */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --bs-body-bg: var(--lore-surface);
  --bs-body-color: var(--lore-ink);
  --bs-body-color-rgb: 236, 234, 224;

  --bs-emphasis-color: #F8F7F0;
  --bs-emphasis-color-rgb: 248, 247, 240;
  --bs-secondary-color: var(--lore-ink-soft);
  --bs-secondary-color-rgb: 185, 188, 171;
  --bs-secondary-bg: var(--lore-surface-sunken);
  --bs-tertiary-color: var(--lore-ink-faint);
  --bs-tertiary-bg: #20231B;

  --bs-heading-color: var(--lore-ink);

  --bs-border-color: var(--lore-border);
  --bs-border-color-translucent: rgba(236, 234, 224, 0.12);

  --bs-primary: var(--lore-brand);
  --bs-primary-rgb: 140, 187, 121;
  --bs-primary-text-emphasis: var(--lore-green-800);
  --bs-primary-bg-subtle: var(--lore-green-100);
  --bs-primary-border-subtle: var(--lore-green-200);

  --bs-success: var(--lore-green-600);
  --bs-success-rgb: 140, 187, 121;
  --bs-success-text-emphasis: var(--lore-green-800);
  --bs-success-bg-subtle: var(--lore-green-100);
  --bs-success-border-subtle: var(--lore-green-200);

  --bs-danger: var(--lore-clay);
  --bs-danger-rgb: 206, 124, 99;
  --bs-danger-text-emphasis: var(--lore-clay-deep);
  --bs-danger-bg-subtle: var(--lore-clay-soft);
  --bs-danger-border-subtle: #4E3126;

  --bs-warning: var(--lore-fruit);
  --bs-warning-rgb: 217, 164, 78;
  --bs-warning-text-emphasis: var(--lore-fruit-deep);
  --bs-warning-bg-subtle: var(--lore-fruit-soft);
  --bs-warning-border-subtle: #4E3E20;

  --bs-info: var(--lore-lake);
  --bs-info-rgb: 127, 169, 183;
  --bs-info-text-emphasis: var(--lore-lake-deep);
  --bs-info-bg-subtle: var(--lore-lake-soft);
  --bs-info-border-subtle: #2A3E45;

  --bs-light: var(--lore-surface-raised);
  --bs-light-rgb: 35, 38, 32;
  --bs-dark: var(--lore-ink);
  --bs-dark-rgb: 236, 234, 224;

  --bs-link-color: var(--lore-green-700);
  --bs-link-color-rgb: 169, 205, 151;
  --bs-link-hover-color: var(--lore-green-800);
  --bs-link-hover-color-rgb: 199, 223, 185;

  --bs-code-color: var(--lore-clay-deep);
  --bs-highlight-bg: var(--lore-fruit-soft);
  --bs-focus-ring-color: rgba(140, 187, 121, 0.35);
}

body {
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--lore-font-display);
  font-weight: var(--lore-weight-semibold);
  letter-spacing: var(--lore-tracking-tight);
  line-height: var(--lore-leading-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

::selection {
  background: var(--lore-green-200);
}

.btn {
  --bs-btn-font-weight: var(--lore-weight-semibold);
  white-space: nowrap;
  transition: color var(--lore-dur-ui) var(--lore-ease),
              background-color var(--lore-dur-ui) var(--lore-ease),
              border-color var(--lore-dur-ui) var(--lore-ease),
              box-shadow var(--lore-dur-ui) var(--lore-ease),
              transform var(--lore-dur-press) var(--lore-ease);
}

/* Scoped so .btn-sm / .btn-lg keep their own padding; ≈44px hit target */
.btn:not(.btn-sm):not(.btn-lg) {
  --bs-btn-padding-y: 0.5625rem;
  --bs-btn-padding-x: 1.125rem;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--lore-green-600);
  --bs-btn-border-color: var(--lore-green-600);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--lore-green-700);
  --bs-btn-hover-border-color: var(--lore-green-700);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--lore-green-800);
  --bs-btn-active-border-color: var(--lore-green-800);
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--lore-green-300);
  --bs-btn-disabled-border-color: var(--lore-green-300);
  --bs-btn-focus-shadow-rgb: 70, 123, 65;
}

[data-bs-theme="dark"] .btn-primary {
  /* Dark: luminous green surface wants a deep-ink label */
  --bs-btn-color: #14200F;
  --bs-btn-hover-color: #14200F;
  --bs-btn-active-color: #14200F;
  --bs-btn-disabled-color: rgba(20, 32, 15, 0.6);
  --bs-btn-focus-shadow-rgb: 140, 187, 121;
}

.btn-outline-primary {
  --bs-btn-color: var(--lore-green-700);
  --bs-btn-border-color: var(--lore-border-strong);
  --bs-btn-hover-color: var(--lore-green-800);
  --bs-btn-hover-bg: var(--lore-green-100);
  --bs-btn-hover-border-color: var(--lore-green-300);
  --bs-btn-active-color: var(--lore-green-800);
  --bs-btn-active-bg: var(--lore-green-200);
  --bs-btn-active-border-color: var(--lore-green-300);
  --bs-btn-disabled-color: var(--lore-ink-faint);
  --bs-btn-disabled-border-color: var(--lore-border);
  --bs-btn-focus-shadow-rgb: 70, 123, 65;
}

.btn-secondary {
  /* Soft neutral — the quiet sibling, not a gray primary */
  --bs-btn-color: var(--lore-ink);
  --bs-btn-bg: var(--lore-surface-sunken);
  --bs-btn-border-color: var(--lore-surface-sunken);
  --bs-btn-hover-color: var(--lore-ink);
  --bs-btn-hover-bg: var(--lore-border);
  --bs-btn-hover-border-color: var(--lore-border);
  --bs-btn-active-color: var(--lore-ink);
  --bs-btn-active-bg: var(--lore-border-strong);
  --bs-btn-active-border-color: var(--lore-border-strong);
  --bs-btn-disabled-color: var(--lore-ink-faint);
  --bs-btn-disabled-bg: var(--lore-surface-sunken);
  --bs-btn-disabled-border-color: var(--lore-surface-sunken);
  --bs-btn-focus-shadow-rgb: 87, 92, 78;
}

.btn-outline-secondary {
  --bs-btn-color: var(--lore-ink-soft);
  --bs-btn-border-color: var(--lore-border-strong);
  --bs-btn-hover-color: var(--lore-ink);
  --bs-btn-hover-bg: var(--lore-surface-sunken);
  --bs-btn-hover-border-color: var(--lore-border-strong);
  --bs-btn-active-color: var(--lore-ink);
  --bs-btn-active-bg: var(--lore-border);
  --bs-btn-active-border-color: var(--lore-border-strong);
  --bs-btn-disabled-color: var(--lore-ink-faint);
  --bs-btn-disabled-border-color: var(--lore-border);
  --bs-btn-focus-shadow-rgb: 87, 92, 78;
}

.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-focus-shadow-rgb: 70, 123, 65;
}

/* Forms: 5.3 compiles focus/checked literals, so these are direct overrides */
.form-control:not(.form-control-sm):not(.form-control-lg),
.form-select:not(.form-select-sm):not(.form-select-lg) {
  padding: 0.5625rem 0.875rem;  /* ≈44px hit target */
}

.form-control:focus,
.form-select:focus {
  border-color: var(--lore-green-400);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control::placeholder {
  color: var(--lore-ink-faint);
}

.form-label {
  font-weight: var(--lore-weight-medium);
  font-size: var(--lore-text-small);
  margin-bottom: 0.375rem;
}

.form-text {
  color: var(--lore-ink-soft);
}

.form-check-input:checked {
  background-color: var(--lore-brand);
  border-color: var(--lore-brand);
}

.form-check-input:focus {
  border-color: var(--lore-green-400);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.card {
  --bs-card-bg: var(--lore-surface-raised);
  --bs-card-border-color: var(--lore-border);
  --bs-card-border-radius: var(--lore-radius-lg);
  --bs-card-inner-border-radius: calc(var(--lore-radius-lg) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-spacer-y: var(--lore-space-4);
  --bs-card-spacer-x: var(--lore-space-4);
}

.badge {
  --bs-badge-font-weight: var(--lore-weight-semibold);
  --bs-badge-padding-x: 0.75em;
  --bs-badge-border-radius: var(--lore-radius-pill);
}

.progress,
.progress-stacked {
  --bs-progress-height: 0.5rem;
  --bs-progress-bg: var(--lore-surface-sunken);
  --bs-progress-bar-bg: var(--lore-brand);
  --bs-progress-border-radius: var(--lore-radius-pill);
}

.modal {
  --bs-modal-bg: var(--lore-surface-raised);
  --bs-modal-border-radius: var(--lore-radius-xl);
  --bs-modal-box-shadow: var(--lore-shadow-lg);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--lore-surface-raised);
  --bs-dropdown-border-color: var(--lore-border);
  --bs-dropdown-border-radius: var(--lore-radius);
  --bs-dropdown-box-shadow: var(--lore-shadow-lg);
  --bs-dropdown-link-hover-bg: var(--lore-surface-sunken);
  --bs-dropdown-link-active-bg: var(--lore-green-100);
  --bs-dropdown-link-active-color: var(--lore-green-800);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:active {
    transform: none;
  }
}