/* wcyd-tokens.css
 * ------------------------------------------------------------
 * Central design tokens for WhatCanYouDO (WCYD) theme.
 *
 * Purpose:
 *  - Centralize brand colors, fonts, motion, layout sizing, and
 *    shared UI primitives (overlays, rings, common thumbnail sizes).
 *  - Allow feature CSS files to reference shared values via var(--wcyd-*)
 *  - Map WCYD tokens into Olivero variables for compatibility
 *
 * NOTE:
 *  - This file contains ONLY variables (no selectors / rules).
 * ------------------------------------------------------------
 */

@charset "utf-8";

:root {
  /************************************************************
   * Typography
   ************************************************************/

  --wcyd-font-sans: "Open Sans", Helmet, Freesans, sans-serif;
  --wcyd-font-serif: Georgia, "Times New Roman", Times, serif;

  --wcyd-font-size-base-px: 16px;
  --wcyd-font-size-base-rem: 1.6rem;
  --wcyd-line-height-body: 1.7em;

  --wcyd-font-weight-light: 300;
  --wcyd-font-weight-regular: 400;
  --wcyd-font-weight-medium: 500;
  --wcyd-font-weight-semibold: 600;
  --wcyd-font-weight-bold: 700;

  /* Common WP-ish type presets used across PSA/hero/sidebar */
  --wcyd-type-title-size: 20px;
  --wcyd-type-title-lh: 34px;
  --wcyd-type-title-weight: var(--wcyd-font-weight-bold);

  --wcyd-type-subtitle-size: 18px;
  --wcyd-type-subtitle-lh: 30.6px;
  --wcyd-type-subtitle-weight: var(--wcyd-font-weight-semibold);

  --wcyd-type-body-size: 16px;
  --wcyd-type-body-lh: 27.2px;
  --wcyd-type-body-weight: var(--wcyd-font-weight-regular);
  --wcyd-type-body-weight-light: var(--wcyd-font-weight-light);

  --wcyd-type-section-size: 18px;
  --wcyd-type-section-lh: 27.2px;
  --wcyd-type-section-weight: var(--wcyd-font-weight-bold);

  /************************************************************
   * Core palette
   ************************************************************/

  --wcyd-white: #ffffff;
  --wcyd-black: #000000;

  --wcyd-text: #333333;
  --wcyd-bg: #ffffff;

  /* WCYD brand/link blues */
  --wcyd-link: #0580a3;
  --wcyd-link-hover: #034659;

  --wcyd-brand-blue: #0580a3;        /* alias */
  --wcyd-brand-blue-hover: #036885;  /* rgb(3,104,133) */
  --wcyd-brand-blue-deeper: #035c76; /* rgb(3,92,118) */
  --wcyd-brand-blue-alt: #026fa8;    /* rgb(2,111,168) */

  /* WCYD brand reds */
  --wcyd-brand-red: #96031e;

  /* Grays */
  --wcyd-gray-ccc: #cccccc;
  --wcyd-gray-hr: #eeeeee;
  --wcyd-gray-border: #999999;
  --wcyd-gray-muted: #d0d0d0;
  --wcyd-gray-frame: #dddddd;

  --wcyd-gray-text-666: #666666;
  --wcyd-gray-text-74777b: #74777b; /* news tabs text */
  --wcyd-gray-bg-e7ecea: #e7ecea;   /* news tabs pill bg */

  /************************************************************
   * Card / surface primitives (reused across PSA/gallery/sidebar)
   ************************************************************/

  --wcyd-card-bg: var(--wcyd-white);
  --wcyd-card-border-dotted: 1px dotted var(--wcyd-gray-border); /* 1px dotted #999 */
  --wcyd-card-border-solid: 1px solid var(--wcyd-gray-muted);    /* 1px solid #d0d0d0 */

  --wcyd-card-pad-md: 16px;
  --wcyd-card-pad-lg: 20px;

  --wcyd-card-gap-md: 24px;
  --wcyd-card-gap-lg: 28px;

  --wcyd-card-radius-sm: 4px;

  --wcyd-card-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.08);

  /************************************************************
   * Section / band backgrounds
   ************************************************************/

  /* Subscribe CTA band */
  --wcyd-band-subscribe-bg: #D4EEF5;
  --wcyd-band-subscribe-hover-text: #056c75;

  /* PSA gallery band gradient */
  --wcyd-psa-band-grad-start: #3b87bd;
  --wcyd-psa-band-grad-end: #04538c;

  /* News tabs active background (year tabs) */
  --wcyd-news-tab-active-bg: #026fa8;      /* matches --wcyd-brand-blue-alt */
  --wcyd-news-tab-alt-active-bg: #4f90d1;  /* rgb(79,144,209) (older style) */

  /************************************************************
   * Motion
   ************************************************************/

  --wcyd-transition-fast: 0.2s ease-out;
  --wcyd-transition-medium: 0.3s ease-out;
  --wcyd-transition-slow: 0.42s ease-out; /* close animation */

  /* Video overlay fade commonly uses ease-in-out in your feature CSS */
  --wcyd-overlay-transition: 0.2s ease-in-out;

  /* Arrow link nudge pattern */
  --wcyd-arrow-shift: 4px;
  --wcyd-arrow-gap: 6px;
  --wcyd-arrow-gap-hover: calc(var(--wcyd-arrow-gap) + var(--wcyd-arrow-shift));

  /************************************************************
   * Glyph tokens (used in ::before / ::after)
   ************************************************************/

  --wcyd-arrow-after: " ➔";
  --wcyd-list-marker: "➔";

  /* Back link prefix (pick one canonical; override per page if needed) */
  --wcyd-back-arrow-before: "‹ ";
  --wcyd-back-arrow-before-alt: "🡸 ";

  /************************************************************
   * Shared overlays / UI primitives
   ************************************************************/

  --wcyd-overlay-black-25: rgba(0, 0, 0, 0.25);
  --wcyd-overlay-black-35: rgba(0, 0, 0, 0.35);
  --wcyd-overlay-black-60: rgba(0, 0, 0, 0.60);

  /* Dotted ring appearance (video thumbs) */
  --wcyd-ring-size: 84px;
  --wcyd-ring-border: 3px;
  --wcyd-ring-style: dotted;
  --wcyd-ring-color: rgba(255, 255, 255, 0.95);
  --wcyd-ring-fill: rgba(0, 0, 0, 0.15);

  /* Play triangle (pure CSS triangle) */
  --wcyd-play-tri-border-y: 14px;
  --wcyd-play-tri-border-x: 22px;
  --wcyd-play-tri-color: #ffffff;
  --wcyd-play-tri-offset-x: -38%;

  /* Play triangle SVG (used where pseudo-elements are already consumed) */
  --wcyd-play-tri-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpolygon points='18,14 18,34 34,24' fill='%23ffffff'/%3E%3C/svg%3E");

  /* Common text shadow treatments */
  --wcyd-text-shadow-dark: 1px 1px 0 #000000;
  --wcyd-text-shadow-light: 1px 1px 0 #ffffff;

  /************************************************************
   * Layout sizing
   ************************************************************/

  /* Core content width (WP match) */
  --wcyd-container-width: 1315px;

  /* Common horizontal paddings used to match WP */
  --wcyd-page-pad-x: 33.5px;
  --wcyd-container-pad-left: clamp(16px, 4vw, 90px);
  --wcyd-article-pad-x: 4px;

  /* Full-bleed band trick */
  --wcyd-fullbleed-shadow-size: 100vmax;

  /************************************************************
   * Hero / carousel sizing
   ************************************************************/

  --wcyd-hero-carousel-height: 578px;
  --wcyd-hero-caption-max-width: 600px;

  --wcyd-hero-height: 280px;
  --wcyd-hero-height-tall: 550px; /* node 445 special case */

  /* Headline left alignment calc: 50% - X */
  --wcyd-hero-align-halfminus: 575px;

  /************************************************************
   * Shared thumbnail sizing
   ************************************************************/

  --wcyd-thumb-width-lg: 210px;
  --wcyd-thumb-aspect-w: 16;
  --wcyd-thumb-aspect-h: 9;

  /* Sidebar featured video thumbnail target (WP-ish) */
  --wcyd-sidebar-video-thumb-width: 450px;

  /************************************************************
   * Header / nav / mega menu tokens
   ************************************************************/

  --wcyd-dropdown-gap: 50px;
  --wcyd-mega-backdrop: #d4d7dc;
  --wcyd-mega-open-height: 0px;

  --wcyd-mega-top: 176px; /* aligns panel below nav baseline */
  --wcyd-mega-gap: 100px;
  --wcyd-mega-nudge-y: -5px;

  --wcyd-menu-open-ms: 160ms;
  --wcyd-menu-close-ms: 420ms;
  --wcyd-menu-ease: ease-out;

  --wcyd-navlink-h: 42px;

  /* Header top bar */
  --wcyd-header-topbar-bg: #96031e;
  --wcyd-header-topbar-pad-y: 8px;

  /* Search pill */
  --wcyd-search-pill-bg: #ffffff;
  --wcyd-search-pill-border: #cccccc;
  --wcyd-search-pill-radius: 999px;
  --wcyd-search-pill-height: 35px;
  --wcyd-search-pill-minw: 220px;
  --wcyd-search-pill-maxw: 260px;

  /* Header social icon */
  --wcyd-header-social-size: 24px;
  --wcyd-header-social-opacity-hover: 0.75;

  /************************************************************
   * Footer tokens
   ************************************************************/

  --wcyd-footer-bg: #cccccc;
  --wcyd-footer-icon-color: #333333;
  --wcyd-footer-icon-hover: #034659;

  /************************************************************
   * Olivero compatibility layer
   ************************************************************/

  --font-serif: var(--wcyd-font-sans);
  --font-sans-serif: var(--wcyd-font-sans);
  --font-body: var(--wcyd-font-sans);
  --font-heading: var(--wcyd-font-sans);

  --wcyd-hero-height-mobile: 260px;

  /************************************************************
   * Icon tokens (SVG data URLs)
   ************************************************************/
  
  /* Arrow icon as SVG mask (inherits currentColor via background-color) */
  --wcyd-icon-arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 5l7 7-7 7M5 12h14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  
  /* Sizing + spacing for icon-after-link pattern */
  --wcyd-icon-after-size: 0.9em;
  --wcyd-icon-after-gap: 6px;
}