/**
 * SiloKala Theme - Design Tokens
 * Master variables aligned with SiloKala brand guidelines and UI components.
 */

:root {
  /* Brand Navy Blues */
  --silo-blue-950: #0d203d;
  --silo-blue-900: #15315c;
  --silo-blue-800: #1b3a6b; /* Primary Brand Color */
  --silo-blue-700: #224a85;
  --silo-blue-600: #2c5ca3;
  --silo-blue-500: #3a72c4;
  --silo-blue-200: #b9d2f3;
  --silo-blue-100: #eef2ff;
  --silo-blue-50:  #f5f8ff;

  /* SiloKala Official Primary Brand Orange (#ef852e) — Matching Exchange Kit & Specification */
  --silo-orange-900: #5e2903;
  --silo-orange-800: #8c3e06;
  --silo-orange-700: #b9580b;
  --silo-orange-600: #d8721e;
  --silo-orange-500: #ef852e;
  --silo-orange-400: #f69749;
  --silo-orange-300: #faae6d;
  --silo-orange-200: #fcc89b;
  --silo-orange-100: #feeedb;
  --silo-orange-50:  #fff7ee;

  /* CTA Action Tokens */
  --color-action-primary-bg: #ef852e;
  --color-action-primary-bg-hover: #d8721e;
  --color-action-primary-bg-active: #b9580b;
  --color-action-primary-fg: #ffffff;
  --color-action-primary-ring: rgba(239, 133, 46, 0.28);
  --shadow-cta: 0 4px 14px rgba(239, 133, 46, 0.35);
  --shadow-cta-hover: 0 8px 20px rgba(239, 133, 46, 0.28);
  /* Neutrals & Monochromes */
  --silo-white:    #ffffff;
  --silo-gray-50:  #fafafa;
  --silo-gray-100: #f5f5f5;
  --silo-gray-150: #f0f4fa;
  --silo-gray-200: #ebebeb;
  --silo-gray-300: #e0e0e0;
  --silo-gray-400: #bdbdbd;
  --silo-gray-500: #8c8c8c;
  --silo-gray-600: #6b6b6b;
  --silo-gray-700: #4f4f4f;
  --silo-gray-800: #333333;
  --silo-gray-900: #2d2d2d;
  --silo-black:    #111827;

  /* Semantic Feedback */
  --silo-success:    #10b981;
  --silo-success-bg: #ecfdf5;
  --silo-warning:    #f59e0b;
  --silo-warning-bg: #fffbeb;
  --silo-danger:     #ef4444;
  --silo-danger-bg:  #fef2f2;
  --silo-info:       #3b82f6;
  --silo-info-bg:    #eff6ff;

  /* Typography */
  --silo-font-family: "iranyekan", "IRANYekan", "IRANYekan Web", Tahoma, sans-serif;
  --silo-font-size-xs:   11px;
  --silo-font-size-sm:   13px;
  --silo-font-size-base: 15px;
  --silo-font-size-md:   16px;
  --silo-font-size-lg:   18px;
  --silo-font-size-xl:   20px;
  --silo-font-size-2xl:  24px;
  --silo-font-size-3xl:  30px;
  --silo-font-size-4xl:  40px;

  /* Layout & Containers */
  --silo-container-max: 1500px;
  --silo-container-wide: 1600px;
  --silo-container-pad: 20px;

  /* Radii */
  --silo-radius-xs: 4px;
  --silo-radius-sm: 6px;
  --silo-radius-md: 8px;
  --silo-radius-lg: 12px;
  --silo-radius-xl: 16px;
  --silo-radius-2xl: 18px;
  --silo-radius-full: 9999px;

  /* Shadows */
  --silo-shadow-sm: 0 1px 2px rgba(27, 58, 107, 0.05);
  --silo-shadow-md: 0 4px 12px rgba(27, 58, 107, 0.08);
  --silo-shadow-lg: 0 10px 28px rgba(27, 58, 107, 0.10);
  --silo-shadow-xl: 0 14px 36px rgba(27, 58, 107, 0.12);
  --silo-shadow-orange: 0 10px 24px rgba(239, 133, 46, 0.25);
  --silo-shadow-gold: 0 10px 24px rgba(239, 133, 46, 0.25);
  /* Transitions */
  --silo-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --silo-transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --silo-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-indices */
  --silo-z-header: 1000;
  --silo-z-dropdown: 1050;
  --silo-z-sticky: 1100;
  --silo-z-sheet: 1150;
  --silo-z-modal: 1200;
  --silo-z-toast: 1300;
  --silo-z-bottom-nav: 900;
}