/*
Template tokens.

For a new design, change this file first. The large template CSS and YOOtheme
selectors use these variables, so most restyling should not require editing
the active template CSS.
*/
:root {
  /* Fonts */
  --f: "Source Sans 3", "Segoe UI", sans-serif;
  --fb: "Playfair Display", Georgia, serif;
  --fm: "JetBrains Mono", monospace;
  --font-body: var(--f);
  --font-display: var(--fb);
  --font-mono: var(--fm);

  /* Base colors */
  --white: #fff;
  --black: #111;
  --green-900: #080e08;
  --green-800: #0e1a0e;
  --green-700: #1b5e20;
  --green-600: #2e7d32;
  --green-500: #43a047;
  --green-400: #66bb6a;
  --green-100: #c8e6c9;
  --green-50: #e8f5e9;
  --yellow-500: #ffd600;
  --yellow-400: #ffea00;
  --yellow-300: #fff176;
  --yellow-100: #fff9c4;
  --gray-900: #1a1a1a;
  --gray-800: #2d2d2d;
  --gray-700: #424242;
  --gray-600: #616161;
  --gray-500: #9e9e9e;
  --gray-400: #bdbdbd;
  --gray-300: #e0e0e0;
  --gray-200: #eeeeee;
  --gray-100: #f5f5f5;
  --gray-50: #fafafa;
  --bg: #fafafa;
  --bg-alt: #fafff9;
  --bg-card: #fff;
  --tx: #1a1a1a;
  --txm: #616161;
  --txl: #9e9e9e;
  --acc: #1b5e20;
  --acc-l: #43a047;
  --acc-d: #080e08;
  --org: #ffd600;
  --org-l: #ffea00;
  --brd: #eeeeee;
  --brd-l: #f5f5f5;

  /* Text colors */
  --text-body: var(--gray-900);
  --text-heading: var(--gray-900);
  --text-subheading: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-soft: var(--gray-500);
  --text-inverse: var(--white);
  --text-inverse-muted: rgba(255,255,255,.78);
  --text-inverse-soft: rgba(255,255,255,.58);
  --text-link: var(--green-700);
  --text-link-hover: var(--green-600);
  --text-accent: var(--green-700);
  --text-accent-soft: var(--green-500);
  --text-gold: var(--yellow-500);
  --text-gold-dark: #080e08;
  --text-danger: #b71c1c;
  --text-success: var(--green-600);
  --text-on-accent: var(--white);
  --text-on-gold: #080e08;
  --text-footer: rgba(255,255,255,.58);
  --text-footer-soft: rgba(255,255,255,.42);
  --text-footer-link: rgba(255,255,255,.62);
  --text-footer-link-hover: var(--yellow-500);
  --text-menu: rgba(255,255,255,.76);
  --text-menu-hover: var(--yellow-500);
  --text-menu-heading: rgba(255,214,0,.55);
  --text-card-dark: var(--white);
  --text-card-dark-muted: rgba(255,255,255,.58);
  --text-card-dark-soft: rgba(255,255,255,.28);

  /* Shape and shadows */
  --r: 12px;
  --rl: 18px;
  --rs: 8px;
  --radius: var(--r);
  --radius-lg: var(--rl);
  --radius-xl: 24px;
  --max-w: 1240px;
  --sh: 0 1px 3px rgba(0,0,0,.08);
  --sh-lg: 0 8px 30px rgba(0,0,0,.15);
  --sh-acc: 0 4px 20px rgba(255,214,0,.25);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.15);
  --shadow-xl: 0 12px 50px rgba(0,0,0,.2);
  --gold-glow: rgba(255,214,0,.25);

  /* Animations */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: ease-out;
  --duration-fast: .15s;
  --duration-base: .2s;
  --duration-card: .3s;
  --duration-fade: .5s;
  --duration-dropdown: .18s;
  --anim-fade-up-distance: 24px;
  --anim-dropdown-distance: -6px;

  /* Header */
  --site-header-bg: #080e08;
  --site-header-border: rgba(255,214,0,.12);
  --site-header-shadow: 0 4px 30px rgba(0,0,0,.55);
  --site-header-text: var(--text-menu);
  --site-header-text-active: var(--text-inverse);
  --site-header-hover-bg: rgba(255,214,0,.08);
  --site-header-active-bg: rgba(255,214,0,.1);
  --site-header-active-text: var(--text-menu-hover);
  --site-logo-image-height: 42px;
  --site-logo-gap: 10px;
  --site-logo-text-size: 16px;
  --site-logo-text-weight: 800;
  --site-logo-word-primary: var(--text-inverse);
  --site-logo-word-accent: var(--text-gold);
  --site-dropdown-bg: #0a140a;
  --site-dropdown-border: rgba(255,214,0,.16);
  --site-dropdown-shadow: 0 24px 64px rgba(0,0,0,.68);
  --site-menu-heading: var(--text-menu-heading);
  --site-menu-heading-rule: rgba(255,214,0,.12);
  --site-menu-link: var(--text-menu);
  --site-menu-link-hover: var(--text-menu-hover);
  --site-menu-link-hover-bg: rgba(255,214,0,.08);
  --site-menu-radius: var(--rs);

  /* Footer */
  --site-footer-bg: #080e08;
  --site-footer-border: rgba(255,214,0,.1);
  --site-footer-text: var(--text-footer);
  --site-footer-link: var(--text-footer-link);
  --site-footer-link-hover: var(--text-footer-link-hover);
  --site-footer-heading: var(--text-gold);
  --site-footer-card-bg: rgba(255,255,255,.04);
  --site-footer-card-border: rgba(255,214,0,.1);
}