/* ==========================================================================
   INFOSEC — Design Tokens
   ========================================================================== */

:root {
  /* ── Colors (official INFOSEC brand palette — light theme) ──────────── */
  --color-bg-primary:      #ffffff;
  --color-bg-secondary:    #f5f5f5;
  --color-bg-card:         #f0f0f0;
  --color-bg-card-hover:   #e8e8e8;
  --color-accent:          #18494D;
  --color-accent-light:    #365E4E;
  --color-accent-bright:   #36939A;
  --color-cyan:            #36939A;
  --color-cyan-light:      #4db0b7;
  --color-gold:            #B8975A;
  --color-gold-light:      #d4b276;
  --color-orange:          #B8975A;
  --color-orange-light:    #d4b276;
  --color-red:             #dc2626;
  --color-green:           #16a34a;
  --color-text-primary:    #1a1a1a;
  --color-text-secondary:  #5F5F61;
  --color-text-muted:      #8a8a8c;
  --color-border:          rgba(24, 73, 77, 0.15);
  --color-border-hover:    rgba(54, 147, 154, 0.35);
  --color-glass:           rgba(255, 255, 255, 0.92);
  --color-glass-border:    rgba(0, 0, 0, 0.06);
  --color-overlay:         rgba(255, 255, 255, 0.94);

  /* ── Gradients ──────────────────────────────────────────────────────── */
  --gradient-accent:       linear-gradient(135deg, var(--color-accent-light), var(--color-accent-bright));
  --gradient-dark:         linear-gradient(180deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
  --gradient-card:         linear-gradient(135deg, rgba(24, 73, 77, 0.06), rgba(54, 147, 154, 0.03));
  --gradient-cta:          linear-gradient(135deg, var(--color-accent-bright), var(--color-gold));
  --gradient-orange:       linear-gradient(135deg, var(--color-gold), var(--color-gold-light));

  /* ── Glow / Shadow Effects ──────────────────────────────────────────── */
  --glow-accent:           0 2px 12px rgba(24, 73, 77, 0.12), 0 4px 24px rgba(24, 73, 77, 0.06);
  --glow-cyan:             0 2px 12px rgba(54, 147, 154, 0.12), 0 4px 24px rgba(54, 147, 154, 0.06);
  --glow-orange:           0 2px 12px rgba(184, 151, 90, 0.15), 0 4px 24px rgba(184, 151, 90, 0.08);
  --glow-card:             0 2px 16px rgba(0, 0, 0, 0.06);

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font-heading:          'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', system-ui, -apple-system, sans-serif;

  --fs-xs:                 0.75rem;    /* 12px */
  --fs-sm:                 0.875rem;   /* 14px */
  --fs-base:               1rem;       /* 16px */
  --fs-md:                 1.125rem;   /* 18px */
  --fs-lg:                 1.25rem;    /* 20px */
  --fs-xl:                 1.5rem;     /* 24px */
  --fs-2xl:                2rem;       /* 32px */
  --fs-3xl:                2.5rem;     /* 40px */
  --fs-4xl:                3rem;       /* 48px */
  --fs-5xl:                3.5rem;     /* 56px */

  --fw-normal:             400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;

  --lh-tight:              1.2;
  --lh-normal:             1.6;
  --lh-relaxed:            1.8;

  --ls-tight:              -0.02em;
  --ls-normal:             0;
  --ls-wide:               0.05em;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --space-xs:              0.25rem;    /* 4px */
  --space-sm:              0.5rem;     /* 8px */
  --space-md:              1rem;       /* 16px */
  --space-lg:              1.5rem;     /* 24px */
  --space-xl:              2rem;       /* 32px */
  --space-2xl:             3rem;       /* 48px */
  --space-3xl:             4rem;       /* 64px */
  --space-4xl:             6rem;       /* 96px */
  --space-5xl:             8rem;       /* 128px */

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --container-max:         1280px;
  --container-padding:     var(--space-lg);
  --section-padding:       var(--space-5xl) 0;

  /* ── Borders ────────────────────────────────────────────────────────── */
  --radius-sm:             0.375rem;   /* 6px */
  --radius-md:             0.5rem;     /* 8px */
  --radius-lg:             0.75rem;    /* 12px */
  --radius-xl:             1rem;       /* 16px */
  --radius-full:           9999px;

  /* ── Transitions ────────────────────────────────────────────────────── */
  --ease-out:              cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:           cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:           cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:         150ms;
  --duration-normal:       300ms;
  --duration-slow:         500ms;

  /* ── Z-Index Scale ──────────────────────────────────────────────────── */
  --z-behind:              -1;
  --z-base:                1;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-overlay:             300;
  --z-modal:               400;
  --z-toast:               500;
}

/* ── Responsive overrides ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-3xl:              2rem;
    --fs-4xl:              2.25rem;
    --fs-5xl:              2.5rem;
    --section-padding:     var(--space-3xl) 0;
    --container-padding:   var(--space-md);
  }
}