/* ============================================================
   TMG Books — Design Tokens (CSS Custom Properties)
   Version: 1.0.0
   Source: tokens.json extracted from tmgbooks.com

   SINGLE SOURCE OF TRUTH for all TMG brand styling.
   Import this file before components.css in any build.
   ============================================================ */

:root {
  /* ------------------------------------------------------------------
     COLORS — Brand
     ------------------------------------------------------------------ */
  --color-brand-primary:       #000000;  /* Black — header, primary buttons, body text, dark sections */
  --color-brand-accent:        #DDD68C;  /* Gold — CTAs, hover states, nav highlights, TMG in logo */
  --color-brand-accent-hover:  #31A050;  /* Green — CTA hover on some buttons */
  --color-brand-white:         #FFFFFF;  /* Contrast — text on dark, card/section backgrounds */

  /* ------------------------------------------------------------------
     COLORS — Backgrounds
     ------------------------------------------------------------------ */
  --color-bg-dark:             #000000;  /* Hero, header, footer, dark sections */
  --color-bg-light:            #FFFFFF;  /* White content sections */
  --color-bg-muted:            #EBEBEB;  /* Light gray alternating sections */
  --color-bg-accent-wash:      rgba(222, 215, 140, 0.76);  /* Translucent gold wash */
  --color-bg-cream:            #F2F1E6;  /* Warm cream alternative to white */
  --color-bg-header-contrast:  #1F1F1F;  /* Near-black header contrast */

  /* ------------------------------------------------------------------
     COLORS — Text
     ------------------------------------------------------------------ */
  --color-text-on-dark:        #FFFFFF;
  --color-text-on-light:       #0A1015;
  --color-text-heading:        #0D141A;
  --color-text-body:           #0A1015;
  --color-text-body-alt:       #1B1F1C;
  --color-text-muted:          #4D5156;
  --color-text-dark:           #1D1E20;
  --color-text-accent:         #DDD68C;

  /* ------------------------------------------------------------------
     COLORS — Borders
     ------------------------------------------------------------------ */
  --color-border-dark:         #0D141A;
  --color-border-light:        #FFFFFF;
  --color-border-input:        #B8C0CC;
  --color-border-input-hover:  #0D141A;

  /* ------------------------------------------------------------------
     COLORS — Shapes (decorative)
     ------------------------------------------------------------------ */
  --color-shape-dark-green:    #1B1F1C;
  --color-shape-gold:          #DDD68C;
  --color-shape-cream:         #F2F1E6;

  /* ------------------------------------------------------------------
     COLORS — States
     ------------------------------------------------------------------ */
  --color-state-hover:         #1D1E20;
  --color-state-hover-accent:  #31A050;

  /* ------------------------------------------------------------------
     COLORS — System / Feedback
     ------------------------------------------------------------------ */
  --color-system-success:      #00b090;
  --color-system-danger:       #fc5185;
  --color-system-warning:      #ffcd35;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Font Families
     ------------------------------------------------------------------ */
  --font-primary:    'Roboto', sans-serif;       /* Headings */
  --font-secondary:  'Roboto', sans-serif;       /* Body, buttons, nav */
  --font-display:    'Montserrat', sans-serif;   /* Display CTAs */
  --font-decorative: 'Bebas Neue', sans-serif;   /* Decorative headlines */
  --font-alt:        'Open Sans', sans-serif;    /* Alternate body */

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Type Scale (desktop)
     ------------------------------------------------------------------ */
  --text-h1:            64px;
  --text-h1-mobile:     40px;
  --text-h2:            56px;
  --text-h2-mobile:     36px;
  --text-h3:            48px;
  --text-h3-mobile:     32px;
  --text-h4:            40px;
  --text-h4-mobile:     24px;
  --text-h5:            26px;
  --text-h5-mobile:     20px;
  --text-h6:            18px;
  --text-h6-mobile:     18px;
  --text-body-lg:       18px;
  --text-body:          16px;
  --text-body-sm:       14px;
  --text-button:        16px;
  --text-button-display:26px;
  --text-nav:           16px;
  --text-footer:        14px;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Weights
     ------------------------------------------------------------------ */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ------------------------------------------------------------------
     TYPOGRAPHY — Line Heights
     ------------------------------------------------------------------ */
  --leading-tight:   1.3;
  --leading-normal:  1.5;

  /* ------------------------------------------------------------------
     SPACING — Scale
     ------------------------------------------------------------------ */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   32px;
  --space-xl:   40px;
  --space-2xl:  54px;
  --space-3xl:  56px;

  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container-max-width:  1224px;
  --column-gap:           24px;
  --row-gap:              16px;
  --header-padding:       22px 16px;
  --logo-width:           222px;
  --logo-width-mobile:    121px;

  /* ------------------------------------------------------------------
     SHAPE — Border Radii
     ------------------------------------------------------------------ */
  --radius-none:    0px;
  --radius-sm:      10px;   /* Input fields */
  --radius-md:      20px;   /* Form containers */
  --radius-lg:      28px;   /* Hero CTA */
  --radius-pill:    50px;   /* Form submit buttons */
  --radius-full:    999px;  /* Primary/secondary buttons */
  --radius-circle:  100px;  /* Circular decorative elements */

  /* ------------------------------------------------------------------
     SHAPE — Borders
     ------------------------------------------------------------------ */
  --border-thin:    1px solid;
  --border-medium:  2px solid;
  --border-thick:   3px solid;

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --transition-button: 0.2s ease;

  /* ------------------------------------------------------------------
     BREAKPOINTS (for reference; use in @media queries)
     ------------------------------------------------------------------ */
  /* --bp-mobile:        360px;  */
  /* --bp-tablet:        768px;  */
  /* --bp-sm-desktop:   1024px;  */
  /* --bp-desktop:      1224px;  */
  /* --bp-wide-desktop: 1440px;  */
}