/**
 * @file
 * Design tokens for TDSpares D10 theme.
 *
 * Colour palette sourced directly from the live D7 tdspareszen theme CSS
 * (sites/all/themes/tdspareszen/css/). All values are exact matches to the
 * live site to preserve brand continuity.
 *
 * Naming convention: --td-{category}-{variant}
 */

:root {

  /* ==========================================================================
     Colour palette
     Source: tdspareszen/css/colour scheme notes.txt + pages.css + nice_menus.css
     ========================================================================== */

  /* Primary blues (dark to light) */
  --td-color-primary-darkest:  #112135;  /* html background dark, deepest tone */
  --td-color-primary-dark:     #1d385b;  /* page container dark bg variant */
  --td-color-primary:          #256591;  /* nav bar bg, primary buttons, headers */
  --td-color-primary-mid:      #1b4b6c;  /* logo border-bottom, nav border */
  --td-color-primary-text:     #24475F;  /* body text colour (from #page rule) */
  --td-color-primary-content:  #476486;  /* content highlight areas */
  --td-color-primary-light:    #56a4da;  /* hover states, active nav, light heading */
  --td-color-primary-lighter:  #98C7FF;  /* table borders, light accents */
  --td-color-primary-lightest: #E5F1FF;  /* very light blue tint backgrounds */
  --td-color-link-on-dark:     #96D4FF;  /* links on dark primary backgrounds */

  /* Accent / CTA */
  --td-color-accent:           #00BDFF;  /* primary CTA button (Add to Cart etc.) */
  --td-color-accent-dark:      #2f7ac9;  /* button border / hover dark */
  --td-color-accent-alt:       #2698f2;  /* secondary link/button accent */
  --td-color-accent-alt-bg:    #e4eef3;  /* light background for accent panels */

  /* Success / positive (green — used for "Add to Cart" alternate styling) */
  --td-color-success:          #79ad3d;
  --td-color-success-light:    #86c142;

  /* Warning / error */
  --td-color-sale:             #ed1c24;  /* CLEARANCE nav item, error states */
  --td-color-orange-border:    #ec6800;  /* orange border on red buttons */

  /* Neutrals */
  --td-color-text:             #000000;  /* primary body text */
  --td-color-text-muted:       #666666;  /* secondary/muted text */
  --td-color-text-faint:       #888888;  /* hints, placeholders */
  --td-color-border:           #bbbbbb;  /* standard border */
  --td-color-border-light:     #dddddd;  /* light dividers */
  --td-color-border-faint:     #eeeeee;  /* very light dividers / zebra rows */
  --td-color-bg:               #ffffff;  /* main content background */
  --td-color-bg-subtle:        #f5f5f5;  /* page outer background */
  --td-color-bg-muted:         #fbfbfb;  /* slightly off-white panels */
  --td-color-bg-alt:           #eeeeee;  /* alternating rows, input bg */
  --td-color-white:            #ffffff;

  /* Semantic aliases — use these in component CSS */
  --td-color-link:             var(--td-color-primary);
  --td-color-link-hover:       var(--td-color-primary-light);
  --td-color-button-bg:        var(--td-color-accent);
  --td-color-button-text:      var(--td-color-white);
  --td-color-nav-bg:           var(--td-color-primary);
  --td-color-nav-text:         var(--td-color-white);
  --td-color-nav-link:         var(--td-color-link-on-dark);
  --td-color-nav-hover-bg:     var(--td-color-primary-light);
  --td-color-nav-border:       var(--td-color-primary-light);
  --td-color-header-bg:        rgba(255, 255, 255, 0.95); /* white, slight opacity on live */


  /* ==========================================================================
     Typography
     Source: tdspareszen pages.css — body font Istok Web (Google), fallback Arial.
     The live site uses 16px base / 24px line-height per _base.scss.
     ========================================================================== */

  --td-font-body:     'Istok Web', Arial, 'Nimbus Sans L', sans-serif;
  --td-font-heading:  'Istok Web', Arial, 'Nimbus Sans L', sans-serif;
  --td-font-mono:     'Courier New', 'DejaVu Sans Mono', monospace;

  --td-font-size-base: 1rem;         /* 16px */
  --td-line-height:    1.5;          /* 24px at 16px base */

  /* Heading scale — matches live _base.scss ratios */
  --td-font-size-h1:  2rem;          /* 32px */
  --td-font-size-h2:  1.5rem;        /* 24px */
  --td-font-size-h3:  1.17rem;       /* ~18.7px */
  --td-font-size-h4:  1rem;          /* 16px */

  /* Supporting sizes */
  --td-font-size-sm:  0.875rem;      /* 14px — labels, meta */
  --td-font-size-xs:  0.75rem;       /* 12px — fine print */
  --td-font-size-lg:  1.125rem;      /* 18px — introductory text */
  --td-font-size-xl:  1.25rem;       /* 20px — featured callouts */

  --td-font-weight-normal: 400;
  --td-font-weight-bold:   700;


  /* ==========================================================================
     Spacing scale
     Base unit: 4px (0.25rem). Scale follows powers of 2.
     ========================================================================== */

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


  /* ==========================================================================
     Layout
     ========================================================================== */

  --td-container-width-max: 1280px;
  --td-container-width-desktop: 768px;
  --td-container-width-tablet: 600px;
  --td-container-width-mobile: 480px;
  --td-container-padding: var(--td-space-md);  /* side padding */
  --td-sidebar-width: 220px;                   /* facets / category nav sidebar */
  --td-gutter: var(--td-space-lg);             /* gap between content and sidebar */


  /* ==========================================================================
     Transitions
     ========================================================================== */

  --td-transition-duration: 0.2s;
  --td-transition-easing:   ease-in-out;
  --td-transition:          all var(--td-transition-duration) var(--td-transition-easing);


  /* ==========================================================================
     Border radius
     ========================================================================== */

  --td-radius-sm:   3px;    /* buttons, badges (matches live button radius) */
  --td-radius-md:   6px;    /* cards, panels */
  --td-radius-lg:   10px;   /* modals, large panels */
  --td-radius-full: 9999px; /* pill shapes */


  /* ==========================================================================
     Box shadows
     ========================================================================== */

  --td-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.12);
  --td-shadow-md:  0 2px 8px rgba(0, 0, 0, 0.15);
  --td-shadow-lg:  0 4px 20px rgba(0, 0, 0, 0.18);
  --td-shadow-page: 0 0 50px rgba(0, 0, 0, 0.4); /* matches live #page box-shadow */

}