/*
 * tokens.css — BYY Design Token System
 * Source: Brand Tokens (2023 BYY App Brand Guide + 2024 Expanded Palette)
 *         Build 0 spec — bestyearyet.com Homepage Build Queue
 *
 * These are the single source of truth for all colors, typography,
 * spacing, border-radius, and transition values used site-wide.
 */

@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;600;700&display=swap');

:root {

  /* ================================================================
   * TYPOGRAPHY
   * ================================================================ */

  --font-heading: 'Catamaran', sans-serif;
  --font-body:    Arial, Helvetica, sans-serif;


  /* ================================================================
   * BRAND CORE COLORS
   * ================================================================ */

  --color-red:        #C93F2F;   /* Primary CTAs, accents, step numbers */
  --color-red-dark:   #962F23;   /* Hover / deep accent */
  --color-red-tint:   #FBDEDD;   /* Section tint, error backgrounds */

  --color-navy:       #134659;   /* Dark sections: methodology, testimonials */

  --color-teal:       #7EC6B8;   /* Checkmarks, success, pull quotes on navy */
  --color-teal-light: #E4F3F0;   /* Section background tint */

  --color-gold:       #EFA625;   /* Badges, star ratings */
  --color-gold-tint:  #FCEED3;   /* Gift section warm background */

  --color-near-black: #1a1a1a;   /* Enterprise teaser background */


  /* ================================================================
   * NEUTRALS
   * ================================================================ */

  --color-off-white:       #FAF9F6;              /* Page background — warm, never stark white */
  --color-light-gray:      #F2F2F2;              /* Card / secondary surface */
  --color-mid-gray:        #C2C1C1;              /* Borders, muted labels */
  --color-text-primary:    #484849;              /* Primary body text */
  --color-text-secondary:  rgba(72, 72, 73, 0.6); /* Supporting / muted text */


  /* ================================================================
   * FULL COLOR RAMPS — Expanded Palette 2024
   * (dark → base → mid → light)
   * ================================================================ */

  /* Red ramp */
  --color-red-900:  #962F23;
  --color-red-500:  #C93F2F;
  --color-red-300:  #E8625C;
  --color-red-100:  #FBDEDD;

  /* Teal ramp */
  --color-teal-900: #327063;
  --color-teal-500: #7EC6B8;
  --color-teal-300: #A0D8CE;
  --color-teal-100: #E4F3F0;

  /* Gold ramp */
  --color-gold-900: #C0820E;
  --color-gold-500: #EFA625;
  --color-gold-300: #F6BC5B;
  --color-gold-100: #FCEED3;

  /* Blue ramp */
  --color-blue-900: #134659;
  --color-blue-700: #268AB2;
  --color-blue-400: #5ABCDC;
  --color-blue-100: #DEF1F8;

  /* Neutral ramp */
  --color-neutral-800: #484849;
  --color-neutral-400: #C2C1C1;
  --color-neutral-100: #F2F2F2;

  /* Purple (accent — use sparingly) */
  --color-purple-900: #331A32;
  --color-purple-500: #663365;
  --color-purple-100: #E7DEE7;


  /* ================================================================
   * SEMANTIC ALIASES
   * Maps intent → value (use these in component code)
   * ================================================================ */

  /* Backgrounds */
  --color-bg-primary:   #FAF9F6;
  --color-bg-secondary: #F2F2F2;
  --color-bg-accent:    #E4F3F0;
  --color-bg-red-tint:  #FBDEDD;

  /* Text */
  --color-text-muted:   #C2C1C1;
  --color-text-inverse: #FAF9F6;

  /* CTA */
  --color-cta-bg:     #C93F2F;
  --color-cta-text:   #FAF9F6;
  --color-cta-hover:  #962F23;
  --color-cta-active: #7A2318;

  /* Borders */
  --color-border-default:   rgba(72, 72, 73, 0.15);
  --color-border-secondary: rgba(72, 72, 73, 0.30);
  --color-border-feature:   #C93F2F;

  /* Semantic states */
  --color-success: #7EC6B8;
  --color-warning: #EFA625;
  --color-info:    #268AB2;
  --color-error:   #C93F2F;

  /* Brand aliases */
  --color-brand-red:    #C93F2F;
  --color-brand-teal:   #7EC6B8;
  --color-brand-gold:   #EFA625;
  --color-brand-blue:   #268AB2;
  --color-brand-purple: #663365;


  /* ================================================================
   * SPACING
   * ================================================================ */

  --space-unit: 8px;   /* Base unit — all spacing is a multiple of this */


  /* ================================================================
   * BORDER RADIUS
   * ================================================================ */

  --radius-card: 16px;
  --radius-btn:  10px;
  --radius-pill: 24px;


  /* ================================================================
   * TRANSITIONS
   * ================================================================ */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

}