/* ============================================================
   JASCO TECH — CSS DESIGN TOKENS
   Brand: Home Automation & Electronic Security Solutions
   ============================================================ */

:root {
  /* ---- BRAND COLOR PALETTE ---- */
  --color-black:       #000000;
  --color-bg-primary:  #FFFFFF;
  --color-bg-alt:      #F5FAF8; /* Soft mint tint background */
  --color-bg-card:     #FFFFFF;
  --color-bg-elevated: #EBF5F1; /* Slightly darker soft mint */

  /* Brand Spectrum */
  --color-lime:   #ABD25B;
  --color-green:  #8ACB78;
  --color-mint:   #67C495;
  --color-teal:   #49BDB0;
  --color-blue:   #11B3E0;
  --color-white:  #FFFFFF;

  /* Text Colors */
  --color-text-primary:   #222222; /* Dark Gray for readability */
  --color-text-secondary: #555555;
  --color-text-muted:     #888888;
  --color-text-accent:    #11B3E0; /* Sky blue as primary text accent */

  /* Borders */
  --color-border:        rgba(0, 0, 0, 0.08);
  --color-border-hover:  rgba(0, 0, 0, 0.14);
  --color-border-accent: rgba(17, 179, 224, 0.25);

  /* ---- BRAND GRADIENTS ---- */
  --gradient-brand:       linear-gradient(135deg, #ABD25B 0%, #8ACB78 25%, #67C495 50%, #49BDB0 75%, #11B3E0 100%);
  --gradient-brand-hover: linear-gradient(135deg, #11B3E0 0%, #49BDB0 45%, #67C495 100%);
  --gradient-brand-45:    linear-gradient(45deg,  #ABD25B 0%, #8ACB78 25%, #67C495 50%, #49BDB0 75%, #11B3E0 100%);
  --gradient-brand-90:    linear-gradient(90deg,  #ABD25B 0%, #8ACB78 25%, #67C495 50%, #49BDB0 75%, #11B3E0 100%);
  --gradient-overlay:     linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0.95) 100%);
  --gradient-hero-overlay:linear-gradient(90deg,  rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0.3) 70%, rgba(255,255,255,0) 100%);
  --gradient-card-hover:  linear-gradient(135deg, rgba(17,179,224,0.06) 0%, rgba(73,189,176,0.04) 100%);
  --gradient-section-dark:linear-gradient(180deg, #FFFFFF 0%, #F5FAF8 100%);
  --gradient-cta:         linear-gradient(135deg, #F0FDF4 0%, #EFF6FF 100%);

  /* Glow effects */
  --glow-lime: rgba(171, 210, 91, 0.15);
  --glow-blue: rgba(17, 179, 224, 0.15);
  --glow-teal: rgba(73, 189, 176, 0.12);

  /* ---- TYPOGRAPHY ---- */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Font Scale — fluid with clamp() */
  --fs-hero:    clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:      clamp(2rem,   4vw, 3.5rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-h4:      clamp(1.1rem,  1.5vw, 1.35rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;
  --fs-label:   0.7rem;

  /* Line Heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-relaxed:1.75;

  /* Letter Spacing */
  --ls-tight:  -0.03em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-wider:  0.12em;
  --ls-label:  0.1em;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ---- SPACING SCALE ---- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section Spacing */
  --section-py:   80px;
  --section-py-sm:60px;

  /* ---- LAYOUT ---- */
  --container-max:   1280px;
  --container-wide:  1440px;
  --container-gutter: 1.5rem;

  /* ---- BORDER RADIUS ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* ---- SHADOWS ---- */
  --shadow-card:    0 8px 30px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(17, 179, 224, 0.15);
  --shadow-button:  0 4px 16px rgba(17, 179, 224, 0.2);
  --shadow-nav:     0 2px 24px rgba(0, 0, 0, 0.06);
  --shadow-ambient: 0 4px 40px rgba(0, 0, 0, 0.15);

  /* ---- ALIASES ---- */
  --color-primary: #11B3E0;

  /* ---- TRANSITIONS ---- */
  --transition-fast:    all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal:  all 0.3s  cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:    all 0.6s  cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce:  all 0.4s  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-INDEX LAYERS ---- */
  --z-base:    1;
  --z-card:    10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     1000;
  --z-tooltip: 1100;

  /* ---- NAVBAR ---- */
  --nav-height:         72px;
  --nav-height-mobile:  64px;
}