/* ============================================================
   ATI Retail · Brand Tokens
   ============================================================
   SINGLE SOURCE OF TRUTH pentru identitatea vizuală.

   Importă acest fișier ÎNAINTEA oricărui CSS al unui modul nou:
       <link rel="stylesheet" href="/assets/brand/brand-tokens.css">

   Folosește variabilele CSS, NU hardcoda culori sau spacing.
   ============================================================ */

:root {
  /* === BRAND COLORS — gradient stops === */
  --brand-blue:        #3b82f6;   /* gradient stop 1 (light bg) */
  --brand-violet:      #8b5cf6;   /* gradient stop 2 + theme color */
  --brand-pink:        #ec4899;   /* gradient stop 3 + accent dot */
  --brand-violet-text: #7c3aed;   /* text accent (taglines, links pe alb) */
  --brand-violet-soft: #a78bfa;   /* text accent pe dark */
  --brand-violet-deep: #6d28d9;   /* hover/active state */
  --brand-violet-tint: #f5f3ff;   /* background subtle, hover state */

  /* === BRAND GRADIENT === */
  --brand-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
  --brand-gradient-soft: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
  --brand-gradient-hover: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #db2777 100%);

  /* === NEUTRALS === */
  --brand-ink:          #09090b;   /* text primary */
  --brand-ink-2:        #18181b;   /* surface dark */
  --brand-paper:        #ffffff;   /* background light */
  --brand-cream:        #fafafa;   /* background subtle */
  --brand-line:         #e4e4e7;   /* border default */
  --brand-line-strong:  #d4d4d8;   /* border focus / divider strong */
  --brand-muted:        #71717a;   /* text secondary */
  --brand-muted-soft:   #a1a1aa;   /* text on dark / disabled */
  --brand-muted-deep:   #52525b;   /* text body secondary */

  /* === SEMANTIC COLORS === */
  --brand-success:      #16a34a;
  --brand-success-bg:   #dcfce7;
  --brand-warning:      #d97706;
  --brand-warning-bg:   #fef3c7;
  --brand-error:        #dc2626;
  --brand-error-bg:     #fee2e2;
  --brand-info:         #7c3aed;   /* INFO uses brand violet */
  --brand-info-bg:      #ede9fe;

  /* === TYPOGRAPHY === */
  --brand-font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --brand-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --brand-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* === RADIUS === */
  --brand-radius-sm:    6px;
  --brand-radius-md:    8px;
  --brand-radius-lg:    12px;
  --brand-radius-xl:    20px;
  --brand-radius-pill:  999px;
  --brand-radius-mark:  20px;     /* mark icon (gradient square) corner */

  /* === SHADOW === */
  --brand-shadow-sm:    0 1px 2px rgba(9, 9, 11, 0.04);
  --brand-shadow-md:    0 4px 12px rgba(9, 9, 11, 0.08);
  --brand-shadow-lg:    0 12px 32px rgba(9, 9, 11, 0.10);
  --brand-shadow-glow:  0 8px 32px rgba(139, 92, 246, 0.20);
  --brand-shadow-glow-strong: 0 16px 48px rgba(139, 92, 246, 0.32);

  /* === SPACING === */
  --brand-space-1:      4px;
  --brand-space-2:      8px;
  --brand-space-3:      12px;
  --brand-space-4:      16px;
  --brand-space-5:      20px;
  --brand-space-6:      24px;
  --brand-space-8:      32px;
  --brand-space-10:     40px;

  /* === Z INDEX === */
  --brand-z-modal:      1000;
  --brand-z-toast:      1100;
  --brand-z-tooltip:    1200;

  /* === BREAKPOINTS (referinta SSOT — CSS custom props nu pot fi folosite
     direct in @media, dar tin valorile aliniate intre toate modulele) ===
       xs = telefon mic, sm = telefon, md = tableta, lg = desktop */
  --bp-xs:              380px;
  --bp-sm:              640px;
  --bp-md:              980px;
  --bp-lg:              1280px;

  /* === TYPOGRAPHY SCALE — fluid cu clamp() (mobile->desktop) ===
     min la viewport mic, max la viewport mare; scaleaza lin intre ele.
     Toate raman >=12px ca sa respecte minimul de lizibilitate pe mobil. */
  --text-xs:            clamp(12px, 0.70rem + 0.20vw, 13px);
  --text-sm:            clamp(13px, 0.78rem + 0.25vw, 14px);
  --text-base:          clamp(15px, 0.90rem + 0.35vw, 16px);
  --text-lg:            clamp(17px, 1.00rem + 0.55vw, 20px);
  --text-xl:            clamp(20px, 1.15rem + 0.95vw, 26px);
  --text-2xl:           clamp(24px, 1.35rem + 1.80vw, 36px);
  --text-3xl:           clamp(30px, 1.60rem + 3.40vw, 52px);
}

/* === Asset URLs (folosește pentru img src/CSS background) === */
:root {
  --brand-asset-mark-svg:    "/assets/brand/ati-mark.svg";
  --brand-asset-mark-128:    "/assets/brand/ati-mark-128.png";
  --brand-asset-mark-256:    "/assets/brand/ati-mark-256.png";
  --brand-asset-logo-light:  "/assets/brand/ati-retail-logo-light.svg";
  --brand-asset-logo-dark:   "/assets/brand/ati-retail-logo-dark.svg";
  --brand-asset-og:          "/assets/brand/ati-retail-og.png";
}