/*
 * RecoveryCompass — Design Token System
 * Single source of truth for all CSS custom properties.
 * Loaded after style.css (rc-style dependency), before components.css.
 *
 * Structure:
 *   1. Primitive values (_rc-*) — raw hex/values, never used directly in component CSS
 *   2. Semantic tokens (rc-color-*, rc-space-*, etc.) — used in all component CSS
 *   3. Legacy aliases — keeps existing style.css rules working without modification
 */

:root {

  /* =============================================
     PRIMITIVE COLOR VALUES
     ============================================= */
  --_rc-navy:     #0A1628;
  --_rc-navy-mid: #0F1E35;
  --_rc-teal-dk:  #0E4D6C;
  --_rc-teal-mid: #2A9D8F;
  --_rc-teal-lt:  rgba(42, 157, 143, 0.08);
  --_rc-gold:     #C9A84C;
  --_rc-gold-dk:  #B8943E;
  --_rc-cream:    #F5F0E8;
  --_rc-mist:     #E8E4DC;
  --_rc-text-dk:  #1A1410;
  --_rc-text-md:  #2A2420;
  --_rc-text-sm:  #5A5550;
  --_rc-text-xs:  #8A8580;

  /* =============================================
     SEMANTIC — BACKGROUND TOKENS
     ============================================= */
  --rc-color-bg-primary:         #F8F7F4;
  --rc-color-bg-surface:         #FFFFFF;
  --rc-color-bg-elevated:        #F0EDE6;
  --rc-color-bg-inverse:         var(--_rc-navy);
  --rc-color-bg-inverse-surface: var(--_rc-navy-mid);

  /* =============================================
     SEMANTIC — TEXT TOKENS
     ============================================= */
  --rc-color-text-primary:       var(--_rc-text-dk);
  --rc-color-text-body:          var(--_rc-text-md);
  --rc-color-text-muted:         var(--_rc-text-sm);
  --rc-color-text-subtle:        var(--_rc-text-xs);
  --rc-color-text-inverse:       var(--_rc-cream);
  --rc-color-text-inverse-muted: rgba(245, 240, 232, 0.72);

  /* =============================================
     SEMANTIC — ACCENT TOKENS (Gold)
     ============================================= */
  --rc-color-accent:        var(--_rc-gold);
  --rc-color-accent-hover:  var(--_rc-gold-dk);
  --rc-color-accent-soft:   rgba(201, 168, 76, 0.10);
  --rc-color-accent-border: rgba(201, 168, 76, 0.25);
  --rc-color-accent-on:     var(--_rc-navy);

  /* =============================================
     SEMANTIC — TRUST / CALM TOKENS (Teal)
     ============================================= */
  --rc-color-trust:       var(--_rc-teal-dk);
  --rc-color-calm:        var(--_rc-teal-mid);
  --rc-color-calm-hover:  #21867A;
  --rc-color-calm-soft:   rgba(42, 157, 143, 0.08);
  --rc-color-calm-medium: rgba(42, 157, 143, 0.25);

  /* =============================================
     SEMANTIC — BORDER TOKENS
     ============================================= */
  --rc-color-border:         #E2E8F0;
  --rc-color-border-strong:  #C8D0DC;
  --rc-color-border-inverse: rgba(245, 240, 232, 0.10);

  /* Status colors */
  --rc-color-success:        #1a6b3a;
  --rc-color-success-soft:   rgba(26, 107, 58, 0.08);

  /* White — used as text color on tinted/dark backgrounds */
  --rc-color-white:          #ffffff;

  /* =============================================
     SPACING TOKENS (8px base grid)
     ============================================= */
  --rc-space-1:  4px;
  --rc-space-2:  8px;
  --rc-space-3:  12px;
  --rc-space-4:  16px;
  --rc-space-6:  24px;
  --rc-space-8:  32px;
  --rc-space-10: 40px;
  --rc-space-12: 48px;
  --rc-space-16: 64px;
  --rc-space-20: 80px;
  --rc-space-24: 96px;
  --rc-space-32: 128px;

  /* Semantic spacing aliases */
  --rc-space-xs:  var(--rc-space-2);   /* 8px  */
  --rc-space-sm:  var(--rc-space-4);   /* 16px */
  --rc-space-md:  var(--rc-space-6);   /* 24px */
  --rc-space-lg:  var(--rc-space-12);  /* 48px */
  --rc-space-xl:  var(--rc-space-20);  /* 80px */
  --rc-space-2xl: var(--rc-space-32);  /* 128px */

  /* =============================================
     RADIUS TOKENS
     ============================================= */
  --rc-radius-sm:   6px;
  --rc-radius-md:   10px;
  --rc-radius-lg:   16px;
  --rc-radius-xl:   24px;
  --rc-radius-full: 9999px;

  /* =============================================
     SHADOW TOKENS
     ============================================= */
  --rc-shadow-sm:    0 1px 3px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --rc-shadow-md:    0 4px 16px rgba(10, 22, 40, 0.08), 0 2px 4px rgba(10, 22, 40, 0.04);
  --rc-shadow-lg:    0 12px 40px rgba(10, 22, 40, 0.12), 0 4px 8px rgba(10, 22, 40, 0.06);
  --rc-shadow-focus: 0 0 0 3px rgba(42, 157, 143, 0.30);
  --rc-shadow-gold:  0 0 0 3px rgba(201, 168, 76, 0.30);

  /* =============================================
     TYPOGRAPHY TOKENS
     ============================================= */
  --rc-font-sans:       'DM Sans', system-ui, -apple-system, sans-serif;
  --rc-font-display:    'Playfair Display', Georgia, serif;
  --rc-font-body-serif: 'Source Serif 4', Georgia, serif;

  /* Font sizes */
  --rc-text-xs:   0.75rem;    /* 12px */
  --rc-text-sm:   0.875rem;   /* 14px */
  --rc-text-base: 1rem;       /* 16px */
  --rc-text-lg:   1.125rem;   /* 18px */
  --rc-text-xl:   1.375rem;   /* 22px */
  --rc-text-2xl:  1.75rem;    /* 28px */
  --rc-text-3xl:  2.25rem;    /* 36px */
  --rc-text-4xl:  3rem;       /* 48px */

  /* Font weights */
  --rc-weight-normal:   400;
  --rc-weight-medium:   500;
  --rc-weight-semibold: 600;
  --rc-weight-bold:     700;

  /* =============================================
     TRANSITION TOKENS
     ============================================= */
  --rc-transition-fast: 120ms;
  --rc-transition-base: 200ms;
  --rc-transition-slow: 350ms;
  --rc-ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);
  --rc-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* =============================================
     LAYOUT TOKENS
     ============================================= */
  --rc-max-width:     1200px;
  --rc-content-width: 740px;

  /* =============================================
     LEGACY ALIASES
     Maps old token names used in style.css to the new semantic values.
     Do not use these in new CSS — use semantic tokens above.
     ============================================= */
  --rc-navy:    var(--_rc-navy);
  --rc-teal:    var(--_rc-teal-dk);
  --rc-gold:    var(--_rc-gold);
  --rc-cream:   var(--_rc-cream);
  --rc-mist:    var(--_rc-mist);
  --rc-text:    var(--_rc-text-md);

  /* Legacy spacing (style.css uses these) */
  --rc-spacing-xs:  var(--rc-space-2);
  --rc-spacing-sm:  var(--rc-space-4);
  --rc-spacing-md:  var(--rc-space-8);
  --rc-spacing-lg:  var(--rc-space-12);
  --rc-spacing-xl:  var(--rc-space-20);

  /* Legacy radius */
  /* --rc-radius-sm, --rc-radius-md, --rc-radius-lg already match new values */

  /* Legacy shadow */
  --rc-shadow-sm: 0 1px 3px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --rc-shadow-md: 0 4px 16px rgba(10, 22, 40, 0.08), 0 2px 4px rgba(10, 22, 40, 0.04);
  --rc-shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.12), 0 4px 8px rgba(10, 22, 40, 0.06);

  /* Legacy transition */
  --rc-transition: var(--rc-transition-base) var(--rc-ease-smooth);

  /* =============================================
     DECISION PORTAL TOKEN ALIASES
     Maps dp-* tokens to rc-* equivalents.
     Keeps existing portal CSS working without modification.
     ============================================= */
  --dp-teal:     var(--rc-color-calm);
  --dp-teal-dk:  var(--rc-color-calm-hover);
  --dp-teal-lt:  var(--rc-color-calm-soft);
  --dp-teal-mid: var(--rc-color-calm-medium);
  --dp-text:     var(--rc-color-text-primary);
  --dp-text-md:  var(--rc-color-text-muted);
  --dp-text-sm:  var(--rc-color-text-subtle);
  --dp-border:   var(--rc-color-border);
  --dp-border-md:var(--rc-color-border-strong);
  --dp-bg:       var(--rc-color-bg-primary);
  --dp-bg-alt:   var(--rc-color-bg-elevated);
  --dp-ease:     var(--rc-ease-smooth);
  --dp-spring:   var(--rc-ease-spring);
  --dp-sh-sm:    var(--rc-shadow-sm);
  --dp-sh:       var(--rc-shadow-md);
  --dp-sh-lg:    var(--rc-shadow-lg);
  --dp-r:        var(--rc-radius-md);
  --dp-r-sm:     var(--rc-radius-sm);
}

/* =============================================
   REDUCED MOTION — global override
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =============================================
   BASE OVERRIDES — applied via token system
   Supplements style.css base resets.
   ============================================= */
body {
  background-color: var(--rc-color-bg-primary);
  font-family: var(--rc-font-body-serif);
  color: var(--rc-color-text-body);
}

/* Universal focus ring strategy */
:focus-visible {
  outline: none;
  box-shadow: var(--rc-shadow-focus);
  border-radius: var(--rc-radius-sm);
}

/* Ensure buttons always have a focus ring */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--rc-shadow-focus);
}