/* ============================================================
   METALOBIRŽA.LT — Design Tokens (Industrial Metallic Theme)
   ============================================================ */

:root {
  /* --- BRAND COLORS --- */
  --color-primary:        #0f172a;
  --color-primary-dark:   #020617;
  --color-primary-light:  #1e293b;
  --color-primary-alpha:  rgba(15, 23, 42, 0.1);

  --color-secondary:      #ea7300;
  --color-secondary-dark: #c95900;
  --color-secondary-mid:  #f5850b;
  --color-secondary-alpha:rgba(234, 115, 0, 0.85);

  --color-accent:         #0284c7;
  --color-accent-dark:    #0369a1;

  --color-bg-white:       #FFFFFF;
  --color-bg-light:       #F8FAFC;
  --color-bg-subtle:      #F1F5F9;

  --color-text-dark:      #0F172A;
  --color-text-muted:     #475569;
  --color-text-light:     #64748B;
  --color-text-white:     #FFFFFF;

  --color-border:         #E2E8F0;
  --color-border-dark:    #CBD5E1;

  --color-success:        #16a34a;
  --color-success-light:  #dcfce7;
  --color-error:          #dc2626;
  --color-error-light:    #fee2e2;
  --color-warning:        #ea7300;
  --color-warning-light:  #fef3c7;

  /* --- SEMANTIC LIGHT THEME VARIABLES --- */
  --bg-app:               #f8fafc;
  --bg-surface:           #ffffff;
  --bg-surface-elevated:  #f1f5f9;
  --bg-surface-hover:     #e2e8f0;

  --border-color:         #cbd5e1;
  --border-color-hover:   #94a3b8;

  --text-main:            #0f172a;
  --text-secondary:       #334155;
  --text-muted:           #64748b;

  --color-primary-400:    #0284c7;
  --color-primary-500:    #0369a1;
  --color-primary-600:    #ea7300;
  --color-primary-700:    #c95900;
  --color-primary-800:    #0f172a;

  /* --- TYPOGRAPHY --- */
  --font-family: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  --font-size-xs:    11px;
  --font-size-sm:    13px;
  --font-size-base:  15px;
  --font-size-md:    16px;
  --font-size-lg:    18px;
  --font-size-xl:    22px;
  --font-size-2xl:   28px;
  --font-size-3xl:   36px;
  --font-size-4xl:   48px;
  --font-size-5xl:   60px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:   1.2;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.65;

  /* --- SPACING --- */
  --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;

  /* --- BORDER RADIUS --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* --- SHADOWS --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.12);

  /* --- TRANSITIONS --- */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- LAYOUT --- */
  --container-max:    1200px;
  --container-pad:    24px;
  --header-height:    72px;
}