/*
 * Behabix design tokens.
 * Derived from .design/brand-refresh/DESIGN_BRIEF.md — warm, human-coach
 * minimalism (Duolingo/Headspace reference), coral accent, Inter for
 * display type, system fonts for body/dense tables.
 *
 * Dark mode is intentionally NOT included — the brief defers it (single
 * light theme for now). Token names are semantic so a [data-theme="dark"]
 * block can be added later without renaming anything that already
 * references these variables.
 *
 * This project has no build step (server-rendered Django templates +
 * Bootstrap 5.3 via CDN, no bundler). Bootstrap 5.3 themes itself through
 * CSS custom properties, so the second block below remaps Bootstrap's own
 * `--bs-*` variables onto these tokens — existing markup using stock
 * classes (btn-primary, text-muted, card, etc.) picks up the new palette
 * without every template needing class changes.
 */

:root {
  /* ---------------------------------------------------------------- */
  /* Color                                                             */
  /* ---------------------------------------------------------------- */

  --color-bg-primary:    #fffbf8; /* page background — warm off-white, not stark/cool white */
  --color-bg-secondary:  #ffffff; /* card/surface background */
  --color-bg-tertiary:   #f5efea; /* subtle wells: inputs, table stripes */
  --color-bg-inverse:    #2b2420; /* warm near-black, for any inverse section */

  --color-text-primary:   #2b2420; /* warm near-black, not pure #000 */
  --color-text-secondary: #6b5f56; /* muted warm gray, replaces Bootstrap's cool #6c757d */
  --color-text-tertiary:  #a79c92; /* placeholder / disabled */
  --color-text-inverse:   #fffbf8; /* text on inverse backgrounds */
  --color-text-link:      var(--color-accent-primary);

  --color-border-primary:   #e8ddd3; /* replaces Bootstrap's cool #dee2e6 */
  --color-border-secondary: #f0e8e0;
  --color-border-focus:     var(--color-accent-primary);

  --color-accent-primary:        #c2432f; /* warm coral/terracotta — 5.08:1 on white, passes AA for normal text */
  --color-accent-primary-hover:  #a83a28; /* darker on hover */
  --color-accent-primary-active: #8f3121;
  --color-accent-secondary:      #c98a2b; /* warm gold, secondary emphasis / streaks */

  --color-status-success: #267e49; /* darkened from #2f9e5b — that shade only hit 3.41:1 with white badge text, failing WCAG AA (needs 4.5:1); this hits 5.04:1 */
  --color-status-warning: #e2a93b;
  --color-status-error:   #d64545;
  --color-status-info:    #3b82a6;

  --color-surface-overlay: rgba(43, 36, 32, 0.45); /* modal/dropdown backdrop */

  /* ---------------------------------------------------------------- */
  /* Spacing (4px base) — kept close to Bootstrap's own scale so it   */
  /* composes with existing gy/gx/mb/py utilities instead of fighting */
  /* them.                                                             */
  /* ---------------------------------------------------------------- */

  --space-0:  0;
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */
  --space-11: 12rem;    /* 192px */
  --space-12: 16rem;    /* 256px */

  /* ---------------------------------------------------------------- */
  /* Typography                                                        */
  /* ---------------------------------------------------------------- */

  --font-family-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-family-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-size-xs:  0.75rem;   /* 12px */
  --font-size-sm:  0.875rem;  /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md:  1.125rem;  /* 18px */
  --font-size-lg:  1.25rem;   /* 20px */
  --font-size-xl:  1.5rem;    /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px — landing hero */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.15; /* headings */
  --line-height-normal:  1.5;  /* body */
  --line-height-relaxed: 1.7;  /* hero tagline, feature copy */

  --letter-spacing-tight:  -0.02em; /* display headlines */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;  /* all-caps labels (matches existing table-header treatment) */

  /* ---------------------------------------------------------------- */
  /* Layout                                                            */
  /* ---------------------------------------------------------------- */

  --max-width-content: 65ch;   /* prose / feature-highlight copy */
  --max-width-wide:    1140px; /* matches Bootstrap's .container-xl */
  --max-width-page:    1320px; /* matches Bootstrap's .container-xxl */

  --border-radius-sm:   6px;   /* badges, small controls — same as Bootstrap default */
  --border-radius-md:   12px;  /* cards, buttons — warmer than Bootstrap's 6px default */
  --border-radius-lg:   20px;  /* hero panels, prominent cards */
  --border-radius-full: 999px; /* pills */

  --shadow-sm:    0 1px 2px rgba(43, 36, 32, 0.06);
  --shadow-md:    0 2px 8px rgba(43, 36, 32, 0.08);
  --shadow-lg:    0 8px 24px rgba(43, 36, 32, 0.12);
  --shadow-focus: 0 0 0 3px rgba(194, 67, 47, 0.35); /* accent-primary @ 35% */

  /* ---------------------------------------------------------------- */
  /* Motion — provided for future use; this brief does not prescribe  */
  /* specific micro-interactions.                                      */
  /* ---------------------------------------------------------------- */

  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in:      cubic-bezier(0.4, 0, 1, 1);
  --easing-out:     cubic-bezier(0, 0, 0.2, 1);
  --easing-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------------------------------------------------------------- */
  /* Breakpoints — aligned to Bootstrap 5's actual grid breakpoints    */
  /* (not the skill's generic defaults) since every template uses     */
  /* Bootstrap's col-md/col-lg utilities already.                     */
  /* ---------------------------------------------------------------- */

  --breakpoint-sm:  576px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  992px;
  --breakpoint-xl:  1200px;
  --breakpoint-2xl: 1400px;
}

/*
 * Bootstrap 5.3 theming hook: remap Bootstrap's own CSS variables onto
 * the semantic tokens above, so stock Bootstrap classes already used
 * throughout the templates (btn-primary, card, text-muted, bg-light,
 * table, alert, dropdown, ...) inherit the new brand without needing
 * class-level changes on every page.
 */
:root {
  --bs-body-font-family: var(--font-family-body);
  --bs-body-color: var(--color-text-primary);
  --bs-body-bg: var(--color-bg-primary);
  --bs-border-color: var(--color-border-primary);
  --bs-border-radius: var(--border-radius-md);
  --bs-border-radius-sm: var(--border-radius-sm);
  --bs-border-radius-lg: var(--border-radius-lg);
  --bs-border-radius-pill: var(--border-radius-full);

  --bs-primary: var(--color-accent-primary);
  --bs-primary-rgb: 194, 67, 47;
  --bs-link-color: var(--color-accent-primary);
  --bs-link-hover-color: var(--color-accent-primary-hover);
  --bs-link-color-rgb: 194, 67, 47;
  --bs-link-hover-color-rgb: 168, 58, 40;

  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-bg: var(--color-bg-tertiary);
  --bs-secondary-bg: var(--color-bg-tertiary);

  --bs-success: var(--color-status-success);
  --bs-warning: var(--color-status-warning);
  --bs-danger: var(--color-status-error);
  --bs-info: var(--color-status-info);

  /* .bg-success/.bg-warning/.bg-danger/.bg-info (used by the goal-status
     badges) read the *-rgb variant for opacity composition, not the base
     --bs-success/etc. above — verified against the actual compiled CDN
     CSS. Both need setting or the badges silently stay Bootstrap-default
     green/yellow/red/blue. */
  --bs-success-rgb: 38, 126, 73;
  --bs-warning-rgb: 226, 169, 59;
  --bs-danger-rgb: 214, 69, 69;
  --bs-info-rgb: 59, 130, 166;
}

/*
 * .alert-* variants read --bs-alert-bg/-color/-border-color, which Bootstrap
 * points at separate --bs-{variant}-bg-subtle/-text-emphasis/-border-subtle
 * variables baked in as literal hex at Sass-compile time (verified against
 * the actual compiled CDN CSS) — completely disconnected from --bs-success
 * etc. above, so Django's messages-framework banner and every alert-*
 * usage in the templates need a direct override here. Text-emphasis colors
 * are darkened enough to clear 4.5:1 contrast against their own bg-subtle.
 */
.alert-success {
  --bs-alert-bg: #e9f2ed;
  --bs-alert-border-color: #a8cbb6;
  --bs-alert-color: #1e653a;
  --bs-alert-link-color: #1e653a;
}
.alert-danger {
  --bs-alert-bg: #fbecec;
  --bs-alert-border-color: #efb5b5;
  --bs-alert-color: #8b2d2d;
  --bs-alert-link-color: #8b2d2d;
}
.alert-warning {
  --bs-alert-bg: #fcf6eb;
  --bs-alert-border-color: #f3ddb1;
  --bs-alert-color: #886523;
  --bs-alert-link-color: #886523;
}
.alert-info {
  --bs-alert-bg: #ebf2f6;
  --bs-alert-border-color: #b1cddb;
  --bs-alert-color: #26546c;
  --bs-alert-link-color: #26546c;
}
.alert-light {
  --bs-alert-bg: var(--color-bg-tertiary);
  --bs-alert-border-color: var(--color-border-primary);
  --bs-alert-color: var(--color-text-secondary);
  --bs-alert-link-color: var(--color-accent-primary);
}

/* .btn-primary is generated from Sass at Bootstrap build time, not from
   --bs-primary at runtime, so the CDN build needs an explicit override
   here rather than relying on the variable remap above. */
.btn-primary {
  --bs-btn-bg: var(--color-accent-primary);
  --bs-btn-border-color: var(--color-accent-primary);
  --bs-btn-hover-bg: var(--color-accent-primary-hover);
  --bs-btn-hover-border-color: var(--color-accent-primary-hover);
  --bs-btn-active-bg: var(--color-accent-primary-active);
  --bs-btn-active-border-color: var(--color-accent-primary-active);
  --bs-btn-focus-shadow-rgb: 194, 67, 47;
}

.btn-outline-primary {
  --bs-btn-color: var(--color-accent-primary);
  --bs-btn-border-color: var(--color-accent-primary);
  --bs-btn-hover-bg: var(--color-accent-primary);
  --bs-btn-hover-border-color: var(--color-accent-primary);
  --bs-btn-active-bg: var(--color-accent-primary-active);
  --bs-btn-active-border-color: var(--color-accent-primary-active);
  --bs-btn-focus-shadow-rgb: 194, 67, 47;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-family-display);
  letter-spacing: var(--letter-spacing-tight);
}

/* Bootstrap scopes navbar/dropdown theming to the component class itself
   (not :root), so these need their own selector to win over the compiled
   CDN CSS rather than being folded into the :root remap above. */
.navbar {
  --bs-navbar-color: var(--color-text-secondary);
  --bs-navbar-hover-color: var(--color-accent-primary);
  --bs-navbar-active-color: var(--color-accent-primary);
  --bs-navbar-disabled-color: var(--color-text-tertiary);
  --bs-navbar-brand-color: var(--color-accent-primary);
  --bs-navbar-brand-hover-color: var(--color-accent-primary-hover);
  --bs-navbar-toggler-border-color: var(--color-border-primary);
}

.dropdown-menu {
  --bs-dropdown-link-hover-color: var(--color-accent-primary);
  --bs-dropdown-link-hover-bg: var(--color-bg-tertiary);
  --bs-dropdown-link-active-bg: var(--color-accent-primary);
}

/* Bootstrap 5.3.3's compiled CSS hardcodes these three focus rings as a
   literal rgba(13,110,253,...) blue with no CSS variable indirection at
   all (verified against the actual CDN file, not assumed) — .btn-primary
   and .dropdown-item already pick up the accent color via variables set
   above, but form controls and nav-link focus states need a direct
   override to not show a stray blue ring against the new palette. */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent-primary);
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}