/* ==========================================================================
   NavRun Design Tokens
   "Field Guide x Campfire" v3 -- pine/cream/rust token ramp, flat
   ========================================================================== */

/* -------------------------------------------------------------------------
   Display Typeface
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Bazook';
  src: url("../fonts/Bazook.7504a8e030cb.otf") format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -------------------------------------------------------------------------
     Brand Palette
     ------------------------------------------------------------------------- */
  --brand-red: #A24336;
  --brand-red-dark: #8A3A2E;
  --brand-red-light: #C96A5C;
  --brand-peach: #D9986F;
  --brand-cream: #EAD9BC;
  --brand-pine: #202B2A;
  --brand-pine-deep: #1A2523;

  /* Text-on-pine / text-on-rust -- used by the left sidebar nav */
  --color-pine-ink: #F5EEDB;
  --color-on-rust: #FBF3E7;

  /* -------------------------------------------------------------------------
     Primary Palette
     ------------------------------------------------------------------------- */
  --color-primary: #A24336;
  --color-primary-light: #C96A5C;
  --color-primary-dark: #8A3A2E;
  --color-primary-subtle: rgba(162, 67, 54, 0.1);

  /* Link hover ink. An alias on purpose, never a colour of its own, so each
     rust is still written down in exactly one place. Light mode steps darker
     on hover. Dark mode steps LIGHTER, because darker is the wrong direction
     on a dark page: --color-primary-dark (#C96A5C) on --color-surface-raised
     measures 3.60:1, under the 4.5:1 body-text bar, where
     --color-primary-light measures 6.55:1. */
  --color-link-hover: var(--color-primary-dark);

  /* Accent - Achievement Green */
  --color-accent: #10b981;
  --color-accent-dark: #059669;
  --color-accent-subtle: rgba(16, 185, 129, 0.1);

  /* -------------------------------------------------------------------------
     Run Type Colors
     ------------------------------------------------------------------------- */
  --color-easy: #22c55e;
  --color-long: #3b82f6;
  --color-tempo: #f59e0b;
  --color-interval: #ef4444;
  --color-recovery: #8b5cf6;
  --color-rest: #64748b;

  /* -------------------------------------------------------------------------
     Neutral Colors -- cream paper / pine ink
     ------------------------------------------------------------------------- */
  --color-bg: #FBF9F5;
  --color-bg-subtle: #F5F1EA;
  --color-surface: #FEFDFB;
  --color-surface-raised: #FFFFFF;
  --color-border: #E7DFD3;
  --color-border-light: #F0EAE0;
  --color-text: #2E2E33;
  --color-text-muted: #5A726C;
  --color-text-subtle: #65817A;

  /* -------------------------------------------------------------------------
     Semantic Colors

     Four roles per semantic, and they are not interchangeable:

       --color-X          the hue itself. Borders, icons, progress bars.
       --color-X-subtle   a 10% alpha wash. Only ever over a known surface.
       --color-X-bg       an OPAQUE tinted surface for an alert or a toast.
                          Opaque because a toast floats over page content: an
                          alpha value renders it see-through and unreadable.
       --color-X-ink      body ink that clears WCAG AA on --color-X-bg. The
                          hue itself does not: --color-info on --color-info-bg
                          is 3.01:1. Measured ratios are recorded below.

     Measured -ink on -bg, light mode (WCAG 2.x, AA body text needs 4.5:1):
       success  6.78:1    warning  6.37:1    danger  6.80:1    info  8.49:1

     --color-info-ink is blue-900, not the blue-800 that shipped here before.
     Blue-800 was simultaneously NavRun's pre-rebrand primary-dark and the
     natural info ink, so it is on the retired-hex deny list in
     tests/test_palette.py and may never ship again, in code or in a comment.
     One step darker in the same ramp looks the same and reads better: 8.49:1,
     up from the 7.15:1 the retired value gave.

     Keep every declaration on one line with nothing after the semicolon.
     tests/test_palette.py parses this file line by line and a trailing comment
     makes a token invisible to it.
     ------------------------------------------------------------------------- */
  --color-success: #22c55e;
  --color-success-subtle: rgba(34, 197, 94, 0.1);
  --color-success-bg: #d1fae5;
  --color-success-ink: #065f46;
  --color-warning: #f59e0b;
  --color-warning-subtle: rgba(245, 158, 11, 0.1);
  --color-warning-bg: #fef3c7;
  --color-warning-ink: #92400e;
  --color-danger: #ef4444;
  --color-danger-subtle: rgba(239, 68, 68, 0.1);
  --color-danger-bg: #fee2e2;
  --color-danger-ink: #991b1b;
  --color-info: #3b82f6;
  --color-info-subtle: rgba(59, 130, 246, 0.1);
  --color-info-bg: #dbeafe;
  --color-info-ink: #1e3a8a;

  /* -------------------------------------------------------------------------
     Shadows -- warm "specimen" shadows, pine-tinted (hsl 170)
     ------------------------------------------------------------------------- */
  --shadow-xs: 1px 2px 4px hsl(170 22% 30% / 0.10);
  --shadow-sm: 2px 3px 7px hsl(170 22% 28% / 0.12);
  --shadow-md: 3px 5px 14px hsl(170 22% 26% / 0.16), 0 1px 3px hsl(170 22% 26% / 0.09);
  --shadow-lg: 4px 7px 22px hsl(170 22% 24% / 0.20);
  --shadow-xl: 6px 10px 32px hsl(170 22% 22% / 0.24), 0 2px 6px hsl(170 22% 24% / 0.12);

  /* -------------------------------------------------------------------------
     Spacing Scale
     ------------------------------------------------------------------------- */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */

  /* -------------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------------- */
  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1.1rem;    /* ~17.6px */
  --radius-xl: 1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
  --font-display: 'Bazook', 'Arial Black', sans-serif;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */
  --text-4xl: 2.5rem;    /* 40px */

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

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* -------------------------------------------------------------------------
     Bootstrap Bridge -- lets stock Bootstrap components (.card, .table,
     .list-group, .form-control, .modal, etc.) inherit the warm token ramp
     without touching any markup. (--bs-primary fill is Sass-compiled and
     is handled separately by the existing .btn-primary override.)

     A bridge var only works if Bootstrap reads THAT name. Several Bootstrap
     5.3 rules read a `-rgb` companion holding bare comma-separated channels
     ("162, 67, 54") instead, and a var() holding a hex can never satisfy one.
     Setting only the plain name there is inert: it looks correct in this file
     and changes nothing in the browser. Every such name is handled by a rule
     that sets `color` / `background-color` outright, further down this file or
     in utilities.css, which needs no second copy of any colour.

     Audited against the bootstrap@5.3.8 build base.html actually loads:

       --bs-link-color        REMOVED. Zero consumers in Bootstrap 5.3.8.
                              `a` reads --bs-link-color-rgb, so this line was
                              inert from the day it was written and every
                              unstyled link in the product rendered Bootstrap
                              blue. Replaced by the `a` rule below.
       --bs-link-hover-color  never set here, and would be equally inert:
                              `a:hover` only reassigns --bs-link-color-rgb.
       --bs-body-color        works for `body`. Its -rgb companion feeds
                              .text-body, which utilities.css now sets
                              directly, plus .card's --bs-card-cap-bg (already
                              overridden in components.css) and
                              .form-floating>label (unused).
       --bs-emphasis-color    -rgb companion feeds .table striped/hover
                              (already overridden in components.css), .navbar
                              (NavRun ships its own nav.css) and
                              .link-body-emphasis (unused).
       --bs-body-bg           -rgb companion feeds .toast (components.css
                              restyles .toast outright) and .bg-body (unused).
       --bs-secondary-color   read directly by .text-muted. Correct as written.
     ------------------------------------------------------------------------- */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-text-muted);
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-md);
  --bs-body-font-family: var(--font-sans);
}

/* -------------------------------------------------------------------------
   Links -- rust, in both themes, from the one token.

   Bootstrap 5.3.8 computes
     a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) }
   so the only way to drive it through the bridge is to hand it channels.
   That means storing every link colour twice, once as the hex the rest of
   the system uses and once as "162, 67, 54", in light mode and in both dark
   blocks, with nothing keeping the two spellings in step. Colouring the
   anchor directly costs one rule and keeps a single source: --color-primary
   is already redefined per theme, so this follows the theme for free.

   The tradeoff is that Bootstrap's own link helpers (.icon-link,
   .link-underline, .link-*, .link-opacity-*) still read the -rgb var and stay
   blue. NavRun uses none of them, in any template or stylesheet.

   This rule is specificity (0,0,1), the same as Bootstrap's `a`, and this
   file loads after Bootstrap, so it wins on order. Anything carrying a class
   (.btn, .nav-link, .dropdown-item, .text-* which are !important) is higher
   specificity and is untouched.
   ------------------------------------------------------------------------- */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-link-hover);
}

/* -------------------------------------------------------------------------
   Display Surfaces -- headlines, hero numbers, section titles, wordmark.
   NOT applied to body copy, tables, or form controls (keep those scannable
   on the system sans).
   ------------------------------------------------------------------------- */
h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand {
  font-family: var(--font-display);
}

/* -------------------------------------------------------------------------
   Paper Grain -- fixed, page-wide texture layer (pure CSS/SVG, no assets)
   ------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='navrunGrain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23navrunGrain)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    opacity: 0.02;
  }
}

/* ==========================================================================
   Dark Mode Variables
   ========================================================================== */

/* Automatic dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* -------------------------------------------------------------------------
       Neutral Colors - Dark Mode -- warm charcoal/campfire ramp
       ------------------------------------------------------------------------- */
    --color-bg: #141C1B;
    --color-bg-subtle: #18201F;
    --color-surface: #1E2827;
    --color-surface-raised: #263231;
    --color-border: #4A5B57;
    --color-border-light: #5A6D68;
    --color-text: #ECF0EC;
    --color-text-muted: #9DAAA5;
    --color-text-subtle: #78857F;

    /* -------------------------------------------------------------------------
       Primary Palette - Dark Mode Adjustments
       ------------------------------------------------------------------------- */
    --color-primary: #E0897A;
    --color-primary-light: #EBA598;
    --color-primary-dark: #C96A5C;
    --color-primary-subtle: rgba(224, 137, 122, 0.15);

    /* Hover steps LIGHTER at night, not darker. See the light-mode note. */
    --color-link-hover: var(--color-primary-light);

    /* Accent - Achievement Green - Dark Mode */
    --color-accent: #10b981;
    --color-accent-dark: #059669;
    --color-accent-subtle: rgba(16, 185, 129, 0.15);

    /* -------------------------------------------------------------------------
       Run Type Colors - Dark Mode (slightly brighter)
       ------------------------------------------------------------------------- */
    --color-easy: #34d399;
    --color-long: #60a5fa;
    --color-tempo: #fbbf24;
    --color-interval: #f87171;
    --color-recovery: #a78bfa;
    --color-rest: #94a3b8;

    /* -------------------------------------------------------------------------
       Semantic Colors - Dark Mode

       The -bg tints are the 20% semantic wash this file used to spell as an
       rgba(), flattened onto --color-bg so it is opaque and its contrast can
       actually be measured. A translucent tint has no one contrast ratio.

       Measured -ink on -bg, dark mode (AA body text needs 4.5:1):
         success  6.45:1    warning  6.56:1    danger  4.62:1    info  4.83:1
       ------------------------------------------------------------------------- */
    --color-success: #34d399;
    --color-success-subtle: rgba(52, 211, 153, 0.15);
    --color-success-bg: #133b2f;
    --color-success-ink: #34d399;
    --color-warning: #fbbf24;
    --color-warning-subtle: rgba(251, 191, 36, 0.15);
    --color-warning-bg: #423d1d;
    --color-warning-ink: #fbbf24;
    --color-danger: #f87171;
    --color-danger-subtle: rgba(248, 113, 113, 0.15);
    --color-danger-bg: #422d2c;
    --color-danger-ink: #f87171;
    --color-info: #60a5fa;
    --color-info-subtle: rgba(96, 165, 250, 0.15);
    --color-info-bg: #233748;
    --color-info-ink: #60a5fa;

    /* -------------------------------------------------------------------------
       Shadows - Dark Mode -- deeper, near-black pine-tinted for definition
       ------------------------------------------------------------------------- */
    --shadow-xs: 1px 2px 4px hsl(168 30% 4% / 0.35);
    --shadow-sm: 2px 3px 7px hsl(168 30% 4% / 0.40);
    --shadow-md: 3px 5px 14px hsl(168 30% 3% / 0.45), 0 1px 3px hsl(168 30% 3% / 0.25);
    --shadow-lg: 4px 7px 22px hsl(168 30% 2% / 0.50);
    --shadow-xl: 6px 10px 32px hsl(168 30% 2% / 0.55), 0 2px 6px hsl(168 30% 3% / 0.30);

    /* Sidebar goes even deeper pine at night; text-on-rust flips to dark ink
       since the active/rust chip lightens in dark mode */
    --brand-pine: #0F1615;
    --color-pine-ink: #ECF0EC;
    --color-on-rust: #0F1615;
  }
}

/* Manual dark mode override (when user explicitly selects dark mode) */
[data-theme="dark"] {
  /* -------------------------------------------------------------------------
     Neutral Colors - Dark Mode -- warm charcoal/campfire ramp
     ------------------------------------------------------------------------- */
  --color-bg: #141C1B;
  --color-bg-subtle: #18201F;
  --color-surface: #1E2827;
  --color-surface-raised: #263231;
  --color-border: #4A5B57;
  --color-border-light: #5A6D68;
  --color-text: #ECF0EC;
  --color-text-muted: #9DAAA5;
  --color-text-subtle: #78857F;

  /* -------------------------------------------------------------------------
     Primary Palette - Dark Mode Adjustments
     ------------------------------------------------------------------------- */
  --color-primary: #E0897A;
  --color-primary-light: #EBA598;
  --color-primary-dark: #C96A5C;
  --color-primary-subtle: rgba(224, 137, 122, 0.15);

  /* Hover steps LIGHTER at night, not darker. See the light-mode note. */
  --color-link-hover: var(--color-primary-light);

  /* Accent - Achievement Green - Dark Mode */
  --color-accent: #10b981;
  --color-accent-dark: #059669;
  --color-accent-subtle: rgba(16, 185, 129, 0.15);

  /* -------------------------------------------------------------------------
     Run Type Colors - Dark Mode (slightly brighter)
     ------------------------------------------------------------------------- */
  --color-easy: #34d399;
  --color-long: #60a5fa;
  --color-tempo: #fbbf24;
  --color-interval: #f87171;
  --color-recovery: #a78bfa;
  --color-rest: #94a3b8;

  /* -------------------------------------------------------------------------
     Semantic Colors - Dark Mode

     The -bg tints are the 20% semantic wash this file used to spell as an
     rgba(), flattened onto --color-bg so it is opaque and its contrast can
     actually be measured. A translucent tint has no one contrast ratio.

     Measured -ink on -bg, dark mode (AA body text needs 4.5:1):
       success  6.45:1    warning  6.56:1    danger  4.62:1    info  4.83:1
     ------------------------------------------------------------------------- */
  --color-success: #34d399;
  --color-success-subtle: rgba(52, 211, 153, 0.15);
  --color-success-bg: #133b2f;
  --color-success-ink: #34d399;
  --color-warning: #fbbf24;
  --color-warning-subtle: rgba(251, 191, 36, 0.15);
  --color-warning-bg: #423d1d;
  --color-warning-ink: #fbbf24;
  --color-danger: #f87171;
  --color-danger-subtle: rgba(248, 113, 113, 0.15);
  --color-danger-bg: #422d2c;
  --color-danger-ink: #f87171;
  --color-info: #60a5fa;
  --color-info-subtle: rgba(96, 165, 250, 0.15);
  --color-info-bg: #233748;
  --color-info-ink: #60a5fa;

  /* -------------------------------------------------------------------------
     Shadows - Dark Mode -- deeper, near-black pine-tinted for definition
     ------------------------------------------------------------------------- */
  --shadow-xs: 1px 2px 4px hsl(168 30% 4% / 0.35);
  --shadow-sm: 2px 3px 7px hsl(168 30% 4% / 0.40);
  --shadow-md: 3px 5px 14px hsl(168 30% 3% / 0.45), 0 1px 3px hsl(168 30% 3% / 0.25);
  --shadow-lg: 4px 7px 22px hsl(168 30% 2% / 0.50);
  --shadow-xl: 6px 10px 32px hsl(168 30% 2% / 0.55), 0 2px 6px hsl(168 30% 3% / 0.30);

  /* Sidebar goes even deeper pine at night; text-on-rust flips to dark ink
     since the active/rust chip lightens in dark mode */
  --brand-pine: #0F1615;
  --color-pine-ink: #ECF0EC;
  --color-on-rust: #0F1615;
}

/* Smooth color transitions for theme switching */
:root,
:root * {
  transition: background-color var(--transition-base),
              border-color var(--transition-base),
              color var(--transition-base);
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root,
  :root * {
    transition-duration: 0.01ms !important;
  }
}