/* ========================================
   Ticco Robotics — Design Tokens
   ======================================== */

:root {
  /* === Colors === */
  --color-primary: #0A5EB0;
  --color-primary-dark: #084A8F;
  --color-primary-deep: #062B50;
  --color-accent: #20B9D8;
  --color-electric: #66F7FF;
  --color-neon-green: #8DFFB5;
  --color-accent-soft: #E7F9FC;
  --color-primary-light: #E8F2FB;
  --color-primary-15: rgba(10, 94, 176, 0.15);

  --color-black: #1A1A1A;
  --color-dark-gray: #333333;
  --color-mid-gray: #666666;
  --color-light-gray: #F4F7FA;
  --color-soft-panel: #EEF4F9;
  --color-border: #E0E0E0;
  --color-white: #FFFFFF;

  --gradient-hero: linear-gradient(135deg, #04101E 0%, #073F79 54%, #0A5EB0 100%);
  --gradient-dark: linear-gradient(180deg, #1A1A1A 0%, #333333 100%);
  --gradient-primary: linear-gradient(135deg, #0A5EB0 0%, #062B50 72%, #031527 100%);

  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-header-bg: rgba(255, 255, 255, 0.95);

  /* === Typography === */
  --font-heading: 'DM Sans', 'Noto Sans SC', sans-serif;
  --font-body: 'Nunito Sans', 'Noto Sans SC', sans-serif;

  --text-display: 60px;
  --text-h1: 48px;
  --text-h2: 36px;
  --text-h3: 24px;
  --text-h4: 20px;
  --text-body: 18px;
  --text-body-sm: 16px;
  --text-caption: 14px;
  --text-small: 12px;

  --leading-tight: 1.1;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

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

  /* === Spacing === */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 60px;
  --space-2xl: 80px;
  --space-3xl: 120px;
  --space-4xl: 150px;

  /* === Container === */
  --container-max: 1200px;
  --container-padding: 24px;

  /* === Effects === */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-card: 0 18px 45px rgba(11, 40, 68, 0.08);
  --shadow-hover: 0 24px 60px rgba(11, 40, 68, 0.16);
  --shadow-neon: 0 22px 70px rgba(32, 185, 216, 0.24);
  --shadow-header: 0 10px 30px rgba(11, 40, 68, 0.08);

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}