/*
Theme Name: NCSFR
Theme URI: https://ncsfr.wsu.edu
Author: WP Theme Studio
Author URI: https://wp-theme-studio.dev
Description: Official theme for the Northwest Center for Small Fruits Research. Premium, institutional, editorial — built for clarity, credibility, and public education.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ncsfr-theme
Tags: custom-logo, custom-menu, featured-images, accessibility-ready, translation-ready
*/

/* ============================================================
   DESIGN TOKENS — NCSFR Brand System
   Primary #6c7c69 · Secondary #50656e · Base #1a1a1a
   All CSS custom properties. Rules live in assets/css/*.css.
   ============================================================ */
:root {

  /* ---- Primary: NCSFR sage green #6c7c69 ---- */
  --color-primary:        #6c7c69;
  --color-primary-dark:   #4a5847;
  --color-primary-light:  #8c9d89;
  --color-primary-pale:   #eaedea;
  --color-primary-70:     rgba(108, 124, 105, 0.70);

  /* ---- Secondary: slate blue-grey #50656e ---- */
  --color-secondary:      #50656e;
  --color-secondary-dark: #394950;
  --color-secondary-light: #7a959f;
  --color-secondary-pale: #e4ecef;

  /* ---- Accent (alias → secondary for UI highlights) ---- */
  --color-accent:         #50656e;
  --color-accent-dark:    #394950;
  --color-accent-pale:    #e4ecef;

  /* ---- Text ---- */
  --color-text:           #1a1a1a;
  --color-text-muted:     #5c6362;
  --color-text-light:     #8c9390;
  --color-text-inverse:   #f4f5f4;

  /* ---- Backgrounds ---- */
  --color-bg:             #ffffff;
  --color-bg-off:         #f5f6f5;
  --color-bg-sage:        #eceeed;
  --color-bg-warm:        #f8f7f4;
  --color-bg-dark:        #1a1a1a;
  --color-bg-darker:      #111111;
  --color-bg-section:     #f2f4f2;

  /* ---- Borders ---- */
  --color-border:         #e0e4e0;
  --color-border-strong:  #c8cec8;
  --color-white:          #ffffff;

  /* ---- Typography ---- */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   Georgia, 'Times New Roman', serif;

  /* ---- Type Scale ---- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Containers ---- */
  --container-xl:      1280px;
  --container-lg:      1080px;
  --container-content: 720px;
  --container-narrow:  560px;

  /* ---- Radii ---- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ---- Button shape ---- */
  --btn-radius: var(--radius-lg);

  /* ---- Shadows (neutral dark base) ---- */
  --shadow-xs: 0 1px 2px 0 rgb(26 26 26 / 0.06);
  --shadow-sm: 0 1px 4px 0 rgb(26 26 26 / 0.08);
  --shadow-md: 0 4px 16px -2px rgb(26 26 26 / 0.10);
  --shadow-lg: 0 12px 32px -4px rgb(26 26 26 / 0.14);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    380ms;
  --dur-reveal:  600ms;

  --transition-fast: var(--dur-fast) var(--ease-out);
  --transition-base: var(--dur-base) var(--ease-out);
  --transition-slow: var(--dur-slow) var(--ease-in-out);

  /* ---- Alpha overlays (used on dark backgrounds) ---- */
  --color-white-60: rgba(255, 255, 255, 0.60);
  --color-white-45: rgba(255, 255, 255, 0.45);
  --color-white-30: rgba(255, 255, 255, 0.30);
  --color-white-10: rgba(255, 255, 255, 0.10);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-06: rgba(255, 255, 255, 0.06);

  /* ---- Layout ---- */
  --header-height: 136px;
}
