/* ============================================================
   THEME: forest  (default)
   Deep teal-green on warm white.

   A theme file only ever sets colours. Never add layout,
   spacing or font rules here — those live in main.css, which
   is what guarantees every theme looks structurally identical.

   To make your own theme: copy this file, rename it, change the
   values, then set `theme_color:` in _config.yml to the new name.
   ============================================================ */

:root {
  /* Surfaces */
  --color-bg:            #ffffff;
  --color-surface:       #ffffff;
  --color-surface-alt:   #f1f6f4;
  --color-canvas-bg:     #fbfdfc;
  --color-header-bg:     rgba(255, 255, 255, 0.86);
  --color-footer-bg:     #f1f6f4;

  /* Text */
  --color-text:          #23302e;
  --color-text-muted:    #536360;
  --color-heading:       #14211f;
  --color-footer-text:   #23302e;
  --color-footer-heading:#14211f;

  /* Accent */
  --color-accent:        #10695a;
  --color-accent-hover:  #0a4f43;
  --color-accent-soft:   #e3efec;
  --color-on-accent:     #ffffff;

  /* Links */
  --color-link:          #0f6153;
  --color-link-hover:    #0a4034;
  --color-footer-link:   #0f6153;

  /* Lines & effects */
  --color-border:        #dde6e3;
  --color-border-strong: #b6c7c2;
  --color-ui-border:     #7e938e;   /* outlines of interactive controls; must hit 3:1 */
  --color-shadow:        rgba(16, 45, 40, 0.09);
  --color-focus:         #10695a;
  --color-track:         #d3e2de;
  --color-selection:     #cfe7e0;
  --color-selection-text:#0a4034;
  --color-lightbox-bg:   rgba(12, 26, 24, 0.92);

  /* Hero treatment */
  --hero-image-opacity:  0.55;
  --hero-image-filter:   saturate(0.85);
  --hero-overlay:        linear-gradient(100deg, #ffffff 12%, rgba(255,255,255,0.86) 46%, rgba(255,255,255,0.30) 100%);

  /* Canvas palette — read by the Learning Lab demos so the
     interactive figures follow whichever theme is active. */
  --demo-ink:    #14211f;
  --demo-muted:  #92a5a1;
  --demo-grid:   #e4ecea;
  --demo-chain:  #10695a;
  --demo-chain2: #4fa192;
  --demo-warm:   #c2622d;
  --demo-alt:    #3f6fa8;

  /* Header/brand mark: fixed two-tone navy + steel-blue, independent
     of the accent palette above, so the logo reads as a consistent
     brand mark rather than reskinning with the theme. */
  --logo-ink:    #101B33;
  --logo-faint:  #9AA8BC;
}