/* ===========================================================================
   RugbyFit — Design TOKENS (served slice)
   GENERATED from design-system/colors_and_type.css — tokens only.
   Contains ONLY the :root + day-theme custom properties (no @font-face, no
   base-element styles) so pages can adopt the system tokens WITHOUT inheriting
   element styling. Fonts (Montserrat/Inter) are loaded by each page as today.
   ⚠️ Keep in sync: if design-system/colors_and_type.css tokens change,
   regenerate this file. Source of truth stays in design-system/.
   =========================================================================== */

:root {
  /* 1. RAW PALETTE */
  --rf-black:        #000000;
  --rf-near-black:   #0d0d0d;
  --rf-off-black:    #0a0a0a;
  --rf-border:       #222222;
  --rf-charcoal:     #1a1a1a;
  --rf-cross:        #2a2a2a;
  --rf-white:        #ffffff;
  --rf-text-sec:     #aaaaaa;
  --rf-text-muted:   #767676;
  --rf-disabled:     #333333;
  --rf-red:          #C10E1A;
  --rf-red-dark:     #a00815;
  --rf-red-light:    #ff2428;
  --rf-red-glow:     rgba(193,14,26,0.20);
  --rf-positive:     #22c55e;
  --rf-negative:     #ef4444;
  --rf-warning:      #f59e0b;

  /* 2. SEMANTIC SURFACE / TEXT TOKENS */
  --bg:              var(--rf-black);
  --surface:         var(--rf-near-black);
  --surface-2:       var(--rf-off-black);
  --border:          var(--rf-border);
  --border-subtle:   var(--rf-charcoal);
  --fg1:             var(--rf-white);
  --fg2:             var(--rf-text-sec);
  --fg3:             var(--rf-text-muted);
  --fg-disabled:     var(--rf-disabled);
  --accent:          var(--rf-red);
  --accent-hover:    var(--rf-red-dark);
  --accent-glow:     var(--rf-red-glow);
  --on-accent:       var(--rf-white);

  /* 3. TYPE FAMILIES */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* 4. TYPE SCALE */
  --t-h1:        52px;
  --t-h2:        32px;
  --t-card-title:20px;
  --t-eyebrow:   11px;
  --t-body:      15px;
  --t-feature:   12px;
  --t-button:    11px;
  --t-price:     44px;
  --lh-tight:    1.1;
  --lh-body:     1.6;
  --track-head:  -0.02em;
  --track-label: 5px;
  --track-btn:   2px;

  /* 5. SPACING & RADIUS */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;
  --s-9:  36px;
  --s-section-y: 80px;
  --s-section-x: 20px;
  --radius:    4px;
  --radius-sm: 2px;
  --max-content: 960px;

  /* 6. MOTION */
  --motion-micro: 180ms;
  --motion-trans: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="day"], .day {
  --rf-day-bg:          #ffffff;
  --rf-day-surface:     #f5f5f5;
  --rf-day-surface-2:   #ffffff;
  --rf-day-border:      #d0d0d0;
  --rf-day-border-sub:  #e8e8e8;
  --rf-day-fg1:         #111111;
  --rf-day-fg2:         #666666;
  --rf-day-fg3:         #888888;
  --rf-day-disabled:    #c0c0c0;
  --rf-day-red-glow:    rgba(193,14,26,0.14);

  --bg:            var(--rf-day-bg);
  --surface:       var(--rf-day-surface);
  --surface-2:     var(--rf-day-surface-2);
  --border:        var(--rf-day-border);
  --border-subtle: var(--rf-day-border-sub);
  --fg1:           var(--rf-day-fg1);
  --fg2:           var(--rf-day-fg2);
  --fg3:           var(--rf-day-fg3);
  --fg-disabled:   var(--rf-day-disabled);
  --accent-glow:   var(--rf-day-red-glow);

  --rf-positive:   #16857b;
  --rf-negative:   #c4454d;
  --rf-warning:    #f3c344;
}