/* ============================================================
   REVLINE PANEL BEATING & PERFORMANCE
   variables.css — Design tokens
   Carbon-black premium automotive system
   ============================================================ */

:root {

  /* ---------------------------------------------------------- */
  /* CORE PALETTE                                               */
  /* ---------------------------------------------------------- */

  --carbon:            #0D0D0D;   /* primary background */
  --carbon-deep:       #070707;   /* deepest black */
  --graphite:          #141518;   /* secondary background */
  --graphite-light:    #1C1E22;   /* raised surfaces */
  --graphite-lighter:  #26282E;   /* borders / hover */
  --steel:             #3A3D44;   /* muted lines */

  /* Performance Red */
  --red:               #FF2A32;
  --red-bright:        #FF4A50;
  --red-deep:          #C40D14;
  --red-glow:          rgba(255, 42, 50, 0.55);
  --red-glow-soft:     rgba(255, 42, 50, 0.18);

  /* Racing Yellow / Gold */
  --yellow:            #FFC400;
  --yellow-bright:     #FFD84D;
  --yellow-deep:       #E0A800;
  --yellow-glow:       rgba(255, 196, 0, 0.45);
  --yellow-glow-soft:  rgba(255, 196, 0, 0.15);

  /* Text */
  --white:             #FFFFFF;
  --text:              #F2F3F5;
  --text-secondary:    #B4B8BF;
  --text-muted:        #7C818A;
  --text-faint:        #565A62;

  /* Semantic */
  --success:           #2ECC71;
  --error:             var(--red);
  --info:              #3B9EFF;

  /* ---------------------------------------------------------- */
  /* GLASS MORPHISM                                             */
  /* ---------------------------------------------------------- */

  --glass-bg:          rgba(20, 21, 24, 0.55);
  --glass-bg-strong:   rgba(13, 13, 13, 0.78);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-hover:rgba(255, 255, 255, 0.16);
  --glass-blur:        blur(18px) saturate(140%);
  --glass-highlight:   rgba(255, 255, 255, 0.04);

  /* ---------------------------------------------------------- */
  /* CARBON FIBRE TEXTURE                                       */
  /* ---------------------------------------------------------- */

  --carbon-fibre:
    linear-gradient(27deg,  #151515 5px, transparent 5px) 0    5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg,  #1e1e1e 5px, transparent 5px) 0px  10px,
    linear-gradient(207deg, #1e1e1e 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg,  #1a1a1a 10px, transparent 10px),
    linear-gradient(#171717 25%, #141414 25%, #141414 50%, transparent 50%, transparent 75%, #1c1c1c 75%, #1c1c1c);
  --carbon-fibre-size: 20px 20px;

  /* ---------------------------------------------------------- */
  /* TYPOGRAPHY                                                 */
  /* ---------------------------------------------------------- */

  --font-display: 'Rajdhani', 'Oswald', 'Arial Narrow', sans-serif; /* headings */
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;      /* body */
  --font-mono:    'Rajdhani', 'Courier New', monospace;              /* stats / labels */

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.875rem;   /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   1.375rem;   /* 22 */
  --fs-xl:   1.75rem;    /* 28 */
  --fs-2xl:  2.25rem;    /* 36 */
  --fs-3xl:  3rem;       /* 48 */
  --fs-4xl:  4rem;       /* 64 */
  --fs-5xl:  5.5rem;     /* 88 */
  --fs-hero: clamp(2.75rem, 8vw, 6.5rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:  1.05;
  --lh-snug:   1.25;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-wider:  0.14em;
  --ls-widest: 0.24em;

  /* ---------------------------------------------------------- */
  /* SPACING                                                    */
  /* ---------------------------------------------------------- */

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  --section-y: clamp(4rem, 9vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 2rem);
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 780px;

  /* ---------------------------------------------------------- */
  /* RADIUS                                                     */
  /* ---------------------------------------------------------- */

  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-2xl:  36px;
  --r-pill: 999px;

  /* ---------------------------------------------------------- */
  /* SHADOWS & GLOW                                             */
  /* ---------------------------------------------------------- */

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:  0 18px 50px rgba(0,0,0,0.6);
  --shadow-xl:  0 30px 80px rgba(0,0,0,0.7);

  --glow-red:      0 0 30px var(--red-glow-soft);
  --glow-red-lg:   0 8px 40px var(--red-glow);
  --glow-yellow:   0 0 30px var(--yellow-glow-soft);
  --glow-yellow-lg:0 8px 40px var(--yellow-glow);

  /* ---------------------------------------------------------- */
  /* GRADIENTS                                                  */
  /* ---------------------------------------------------------- */

  --grad-red:     linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
  --grad-red-yellow: linear-gradient(120deg, var(--red) 0%, var(--yellow) 130%);
  --grad-fade:    linear-gradient(180deg, transparent 0%, var(--carbon) 100%);
  --grad-carbon:  linear-gradient(180deg, var(--carbon) 0%, var(--graphite) 100%);
  --grad-sheen:   linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%);

  /* ---------------------------------------------------------- */
  /* TRANSITIONS                                                */
  /* ---------------------------------------------------------- */

  --t-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:    280ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:    500ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring:  550ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-smooth:  700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------------------------------------------------------- */
  /* Z-INDEX                                                    */
  /* ---------------------------------------------------------- */

  --z-base:     1;
  --z-raised:   10;
  --z-nav:      1000;
  --z-overlay:  2000;
  --z-modal:    3000;
  --z-toast:    4000;
  --z-loader:   9999;

  /* ---------------------------------------------------------- */
  /* BACK-COMPAT ALIASES (older markup / injected styles)       */
  /* ---------------------------------------------------------- */

  --color-primary:        var(--red);
  --color-primary-dark:   var(--red-deep);
  --color-white:          var(--white);
  --color-bg-body:        var(--carbon);
  --color-text-primary:   var(--text);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted:     var(--text-muted);
  --color-success:        var(--success);
  --color-error:          var(--error);
}