/**
 * reelcalendar.css — Design Token System (T36)
 *
 * Defines all CSS custom properties (--rc-*) used across every ReelCalendar
 * page, funnel skin, form, and component. All tokens are declared in :root so
 * they are available on FunnelKit canvas pages that strip the theme template
 * wrapper. Variable definitions in :root apply no visible styles on their own —
 * they are inert until referenced inside a selector.
 *
 * Loading order (WordPress child theme functions.php):
 *   1. rc-tokens / reelcalendar.css  ← THIS FILE (loaded globally)
 *   2. rc-funnel.css                 (conditional: FunnelKit pages)
 *   3. rc-forms.css                  (conditional: intake page)
 *   4. rc-landing.css                (conditional: landing page template)
 *
 * All downstream stylesheets (rc-funnel.css, rc-forms.css, rc-landing.css,
 * reelcalendar-preview.css) reference --rc-* tokens defined here. Never
 * redefine these tokens in component files.
 *
 * Target audience: women 25–40, luxury beauty aesthetic. Design expression:
 * warm off-white surfaces, teal accent, clean DM Sans typography, generous
 * whitespace, consistent border radius.
 *
 * @package  ReelCalendar
 * @since    1.0.0 (T36 — supersedes T35 placeholder)
 */


/* ===========================================================================
   1. CSS CUSTOM PROPERTIES — :root
   All --rc-* tokens. Safe to load globally; variables are inert until used.
   =========================================================================== */

:root {

  /* -------------------------------------------------------------------------
     Color
     ------------------------------------------------------------------------- */

  --rc-accent:        #3B8EA5;   /* Primary teal — buttons, links, highlights  */
  --rc-accent-dark:   #2A7080;   /* Hover / pressed state for accent            */
  --rc-surface:       #F7F5F2;   /* Page background — warm off-white            */
  --rc-surface-alt:   #EDECEA;   /* Secondary surface, zebra rows, chips        */
  --rc-text:          #1A1A1A;   /* Body copy — near-black                      */
  --rc-text-muted:    #6B7280;   /* Helper text, labels, secondary copy         */
  --rc-border:        #E2E0DC;   /* Input borders, card borders, dividers       */
  --rc-success:       #2D8A5F;   /* Confirmation messages, success states       */
  --rc-warning:       #B45309;   /* Warnings, soft alerts                       */
  --rc-error:         #B91C1C;   /* Validation errors, destructive actions      */

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */

  --rc-font:          'DM Sans', sans-serif;  /* Primary typeface — loaded via Google Fonts in functions.php */
  --rc-size-xs:       0.75rem;    /*  12 px */
  --rc-size-sm:       0.875rem;   /*  14 px */
  --rc-size-base:     1rem;       /*  16 px */
  --rc-size-lg:       1.125rem;   /*  18 px */
  --rc-size-xl:       1.25rem;    /*  20 px */
  --rc-size-2xl:      1.5rem;     /*  24 px */
  --rc-size-3xl:      1.875rem;   /*  30 px */
  --rc-size-4xl:      2.25rem;    /*  36 px */
  --rc-leading:       1.6;        /* Base line-height */

  /* -------------------------------------------------------------------------
     Spacing
     ------------------------------------------------------------------------- */

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

  /* -------------------------------------------------------------------------
     Shape
     ------------------------------------------------------------------------- */

  --rc-radius-sm:     4px;
  --rc-radius:        6px;
  --rc-radius-lg:     12px;
  --rc-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.06);
  --rc-shadow:        0 1px 3px rgba(0, 0, 0, 0.08);
  --rc-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
}


/* ===========================================================================
   2. BASE RESET — scoped to .reelcalendar-page
   Applied by the body_class filter (functions.php) to RC pages, the intake
   form page, and FunnelKit funnel pages.
   =========================================================================== */

.reelcalendar-page *,
.reelcalendar-page *::before,
.reelcalendar-page *::after {
  box-sizing: border-box;
}

.reelcalendar-page {
  font-family:            var(--rc-font);
  color:                  var(--rc-text);
  background:             var(--rc-surface);
  line-height:            var(--rc-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===========================================================================
   3. TYPOGRAPHY SCALE — scoped to .reelcalendar-page
   Headings h1–h4 use weight 700/600/600/500. Body uses --rc-size-base.
   .rc-label is a utility class for form labels and small callout text.
   =========================================================================== */

.reelcalendar-page h1 {
  font-family:  var(--rc-font);
  font-size:    var(--rc-size-4xl);
  font-weight:  700;
  line-height:  1.15;
  letter-spacing: -0.01em;
  color:        var(--rc-text);
  margin-block: 0 var(--rc-space-md);
}

.reelcalendar-page h2 {
  font-family:  var(--rc-font);
  font-size:    var(--rc-size-3xl);
  font-weight:  600;
  line-height:  1.2;
  color:        var(--rc-text);
  margin-block: 0 var(--rc-space-md);
}

.reelcalendar-page h3 {
  font-family:  var(--rc-font);
  font-size:    var(--rc-size-2xl);
  font-weight:  600;
  line-height:  1.25;
  color:        var(--rc-text);
  margin-block: 0 var(--rc-space-sm);
}

.reelcalendar-page h4 {
  font-family:  var(--rc-font);
  font-size:    var(--rc-size-xl);
  font-weight:  500;
  line-height:  1.3;
  color:        var(--rc-text);
  margin-block: 0 var(--rc-space-sm);
}

.reelcalendar-page body,
.reelcalendar-page p {
  font-size:   var(--rc-size-base);
  line-height: var(--rc-leading);
  color:       var(--rc-text);
}

.reelcalendar-page small {
  font-size: var(--rc-size-sm);
  color:     var(--rc-text-muted);
}

/* Utility class for small caps / form labels */
.reelcalendar-page .rc-label {
  font-size:      var(--rc-size-xs);
  font-weight:    600;
  letter-spacing: 0.04em;
  color:          var(--rc-text-muted);
  text-transform: uppercase;
}


/* ===========================================================================
   4. SHARED BUTTON COMPONENTS
   No gradient fills — solid --rc-accent only, per style guide.
   Min-height 44px ensures WCAG 2.1 tap-target compliance at 375 px.
   =========================================================================== */

.rc-btn-primary {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-height:    44px;
  background:    var(--rc-accent);
  color:         #ffffff;
  border:        none;
  border-radius: var(--rc-radius);
  padding:       0.75rem 1.5rem;
  font-family:   var(--rc-font);
  font-weight:   600;
  font-size:     var(--rc-size-base);
  cursor:        pointer;
  text-decoration: none;
  transition:    background-color 0.15s ease;
}

.rc-btn-primary:hover,
.rc-btn-primary:focus-visible {
  background: var(--rc-accent-dark);
  color:      #ffffff;
}

.rc-btn-secondary {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-height:    44px;
  background:    transparent;
  color:         var(--rc-accent);
  border:        1.5px solid var(--rc-accent);
  border-radius: var(--rc-radius);
  padding:       0.75rem 1.5rem;
  font-family:   var(--rc-font);
  font-weight:   600;
  font-size:     var(--rc-size-base);
  cursor:        pointer;
  text-decoration: none;
  transition:    border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-btn-secondary:hover,
.rc-btn-secondary:focus-visible {
  background: rgba(59, 142, 165, 0.06);
}

.rc-btn-ghost {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  min-height:    44px;
  background:    transparent;
  color:         var(--rc-text-muted);
  border:        none;
  border-radius: var(--rc-radius);
  padding:       0.75rem 1.5rem;
  font-family:   var(--rc-font);
  font-weight:   400;
  font-size:     var(--rc-size-base);
  cursor:        pointer;
  text-decoration: none;
  transition:    color 0.15s ease;
}

.rc-btn-ghost:hover,
.rc-btn-ghost:focus-visible {
  color: var(--rc-text);
}

/* Focus ring — accessible for all button variants */
.rc-btn-primary:focus-visible,
.rc-btn-secondary:focus-visible,
.rc-btn-ghost:focus-visible {
  outline:        2px solid var(--rc-accent);
  outline-offset: 3px;
}


/* ===========================================================================
   5. SHARED CARD COMPONENT
   White background on the warm surface, 1 px border, soft shadow.
   =========================================================================== */

.rc-card {
  background:    #ffffff;
  border:        1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  box-shadow:    var(--rc-shadow);
  padding:       var(--rc-space-xl);
}


/* ===========================================================================
   6. FORMAT BADGES — Single / Carousel / Reel
   Used in the pricing section (#41) and confirmation page (#40).
   Three variants distinguish content format. Neutral pill chip shape; accent
   or surface fill keeps them unobtrusive within pricing cards.
   =========================================================================== */

/* Base chip — shared across all three variants */
.rc-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            0.25rem;
  font-family:    var(--rc-font);
  font-size:      var(--rc-size-xs);
  font-weight:    600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius:  var(--rc-radius-sm);
  padding:        0.25em 0.625em;
  white-space:    nowrap;
  line-height:    1.4;
}

/* Single post — accent tint */
.rc-badge--single {
  background: rgba(59, 142, 165, 0.1);
  color:      var(--rc-accent);
}

/* Carousel — neutral surface-alt */
.rc-badge--carousel {
  background: var(--rc-surface-alt);
  color:      var(--rc-text-muted);
  border:     1px solid var(--rc-border);
}

/* Reel — slightly deeper tint to signal video / premium */
.rc-badge--reel {
  background: rgba(59, 142, 165, 0.18);
  color:      var(--rc-accent-dark);
}


/* ===========================================================================
   7. ACCESSIBILITY UTILITIES
   =========================================================================== */

/* Global focus-visible ring (also picked up by third-party widgets) */
.reelcalendar-page :focus-visible {
  outline:        2px solid var(--rc-accent);
  outline-offset: 3px;
}

/* Visually hidden but accessible to screen readers */
.rc-sr-only {
  position:   absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}