/* ==========================================================================
   richter2026 — variables.css
   Design tokens for the Automaten Richter theme modernization.
   Milestone: 0.1 Foundation

   Edit values here to re-theme the whole shop. Nothing else in this
   theme should hardcode a color, radius, shadow, or spacing value —
   everything references these custom properties.
   ========================================================================== */

:root {

  /* ---- Brand colors -----------------------------------------------------
     Dark graphite header + deep blue primary + orange accent,
     per the agreed design direction. */
  --color-graphite:        #20242b;   /* header / footer background */
  --color-graphite-light:  #2c313a;   /* hover surfaces on graphite */
  --color-graphite-border: #3a4049;

  --color-primary:         #1d4f91;   /* deep blue — links, primary actions */
  --color-primary-dark:    #163c70;
  --color-primary-light:   #2c66b3;

  --color-accent:          #e8742c;   /* orange — CTAs, price highlights */
  --color-accent-dark:     #cf5f1c;
  --color-accent-light:    #f08c4d;

  /* ---- Neutrals ----------------------------------------------------------
     White background, clean greys for a spacious, premium feel. */
  --color-bg:              #ffffff;
  --color-bg-subtle:       #f6f7f9;   /* section backgrounds, cards */
  --color-bg-muted:        #eef0f3;

  --color-border:          #e3e6ea;
  --color-border-strong:   #cbd0d7;

  --color-text:            #1f2329;
  --color-text-muted:      #5b6270;
  --color-text-faint:      #8a909c;
  --color-text-on-dark:    #f3f4f6;
  --color-text-on-dark-muted: #aab0bb;

  /* ---- Feedback colors ---------------------------------------------------
     Kept close to OpenCart defaults so success/warning/info still read
     correctly, just softened to match the new palette. */
  --color-success:         #2f8f4e;
  --color-success-bg:      #eaf7ee;
  --color-success-border:  #bfe5cb;

  --color-warning:         #c23b3b;
  --color-warning-bg:      #fdecec;
  --color-warning-border:  #f5c2c2;

  --color-attention:       #b9821c;
  --color-attention-bg:    #fdf3e0;
  --color-attention-border: #f0dba8;

  --color-price-old:       #b3392c;
  --color-stock-in:        #2f8f4e;
  --color-stock-out:       #c23b3b;

  /* ---- Typography --------------------------------------------------------
     System font stack: fast, modern, no webfont loading cost. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);

  --font-size-xs:    12px;
  --font-size-sm:    13px;
  --font-size-base:  15px;
  --font-size-md:    16px;
  --font-size-lg:    19px;
  --font-size-xl:    24px;
  --font-size-2xl:   32px;
  --font-size-3xl:   40px;

  --line-height-tight: 1.2;
  --line-height-base:  1.55;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Spacing scale -------------------------------------------------------
     Larger, more generous spacing than the legacy theme. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---- Layout ------------------------------------------------------------ */
  --container-width: 1280px;
  --container-padding: var(--space-5);

  /* v1.19 — reduced from 96px after the user asked whether the header
     was taller than it needed to be. 96px gave the 52px-tall search
     input about 22px of empty space above and below it within the
     row; 80px tightens that to a still-comfortable ~14px while
     leaving enough room that nothing inside the row (logo image,
     cart pill, search input) needs to shrink to fit. Easy to tune
     further either way — this is the only place that needs to
     change, everything in the header row sizes itself relative to
     this variable rather than a hardcoded height. */
  --header-height: 80px;
  --header-height-mobile: 64px;

  /* ---- Radii / shadows -----------------------------------------------------
     Subtle rounded corners + soft shadows for the "premium" feel,
     never sharp/skeuomorphic like the legacy theme.
     v1.7: shadows softened further (larger blur, lower opacity) per
     design review feedback — avoids the "harsh box shadow" look. */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(20, 22, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 22, 26, 0.07);
  --shadow-lg: 0 16px 40px rgba(20, 22, 26, 0.10);
  --shadow-header: 0 2px 16px rgba(20, 22, 26, 0.08);

  /* ---- Motion ------------------------------------------------------------ */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ---- Z-index scale -------------------------------------------------------
     Centralised so header / dropdowns / sticky search never collide. */
  --z-dropdown: 50;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* ---- Breakpoints (referenced in comments only — CSS vars can't be
     used inside @media queries, kept here for documentation) -------------
     --bp-mobile:  0–599px
     --bp-tablet:  600–991px
     --bp-laptop:  992–1279px
     --bp-desktop: 1280px+
  */
}