/* ==========================================================================
   Design Tokens — Figma "Hardware-LP" Implementation page
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-blue-50:  #E2F2FE;
  --color-blue-100: #BADDFD;
  --color-blue-200: #8DC8FC;
  --color-blue-500: #0493F8;
  --color-blue-600: #0985EA;
  --color-blue-700: #0A72D6;
  --color-blue-800: #0961C4;

  --color-gray-100: #F5F5F5;
  --color-gray-200: #EFEFEF;
  --color-gray-500: #9F9F9F;
  --color-gray-900: #222222;

  --color-white:    #FFFFFF;
  --color-black:    #222222;

  --color-orange-500: #FE950C;
  --color-green-50:   #E7F7E5;
  --color-green-500:  #21BF25;
  --color-green-600:  #10AF1B;
  --color-green-800:  #008C00;
  --color-green-900:  #006D00;
  --color-red-50:     #FCE4ED;
  --color-red-500:    #EF0267;
  --color-red-600:    #DE0164;

  --color-text-black: #222222;
  --color-text-gray:  #767676;
  --color-text-white: #FFFFFF;
  --color-border:     #E1E1E1;
  --color-text-inactive: rgba(34, 34, 34, 0.3);

  /* ---- Shadows ---- */
  --shadow-widget: 0 8px 24px rgba(34, 34, 34, 0.1);

  /* ---- Border Radius ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* ---- Responsive: Small (Mobile) defaults ---- */
  --h1-flex: 32px;
  --h2-flex: 24px;
  --h3-flex: 20px;
  --h4-flex: 16px;
  --section-padding: 16px;
}

/* ---- Medium (Tablet): 720px+ ---- */
@media (min-width: 720px) {
  :root {
    --h1-flex: 40px;
    --h2-flex: 32px;
    --h3-flex: 28px;
    --h4-flex: 24px;
    --section-padding: 40px;
  }
}

/* ---- Large (Desktop): 1280px+ ---- */
@media (min-width: 1280px) {
  :root {
    --h1-flex: 48px;
    --h2-flex: 40px;
    --h3-flex: 36px;
    --h4-flex: 32px;
    --section-padding: 80px;
  }
}