/**
 * abhisquared Design System Variables
 * Modern Bespoke Sans-Serif Editorial Architecture
 * Matte Black Aesthetic with Calibrated Professional Typography
 */

:root {
  /* Brand Color Tokens (Matte Black Studio Foundation) */
  --ab-black: #0D0D0D;          /* pristine matte black background */
  --ab-surface: #141414;        /* solid dark section surface */
  --ab-surface-elevated: #1A1A1A;/* elevated dropdown/interactive surface */
  --ab-surface-card: #151515;   /* structured matte card surface */
  --ab-white: #FFFFFF;          /* primary crisp text */
  --ab-offwhite: #F8F7F4;       /* refined light mode editorial canvas */
  --ab-charcoal: #121212;       /* text on light mode */
  --ab-gold: #F5B921;           /* signature solid gold accent */
  --ab-gold-hover: #E5A812;     /* signature gold hover tone */
  --ab-border-dark: rgba(255, 255, 255, 0.08);
  --ab-border-darker: #202020;
  --ab-border-light: #E4E1D9;
  --ab-muted: #8E8E93;
  --ab-muted-light: #6E6E73;

  /* Modern Sans-Serif Typography Pairing */
  --ab-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ab-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ab-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Calibrated Modular Typography Scale (15px Base, Refined Proportions) */
  --ab-text-xs: 0.72rem;    /* ~11.5px */
  --ab-text-sm: 0.8125rem;  /* 13px */
  --ab-text-base: 0.9375rem;/* 15px */
  --ab-text-md: 1.0625rem;  /* 17px */
  --ab-text-lg: 1.25rem;    /* 20px */
  --ab-text-xl: 1.45rem;    /* 23px */
  --ab-text-2xl: 1.75rem;   /* 28px */
  --ab-text-3xl: 2.125rem;  /* 34px */
  --ab-text-4xl: 2.5rem;    /* 40px */
  --ab-text-hero: clamp(1.75rem, 3.5vw, 2.5rem);

  /* Spacing Scale (8px Grid) */
  --ab-space-1: 0.25rem; /* 4px */
  --ab-space-2: 0.5rem;  /* 8px */
  --ab-space-3: 0.75rem; /* 12px */
  --ab-space-4: 1rem;    /* 16px */
  --ab-space-5: 1.5rem;  /* 24px */
  --ab-space-6: 2rem;    /* 32px */
  --ab-space-7: 3rem;    /* 48px */
  --ab-space-8: 4rem;    /* 64px */
  --ab-space-9: 6rem;    /* 96px */
  --ab-space-10: 8rem;   /* 128px */

  /* UI Tokens */
  --ab-radius-sm: 6px;
  --ab-radius-md: 10px;
  --ab-radius-lg: 16px;
  --ab-radius-pill: 9999px;
  --ab-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --ab-transition-slow: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --ab-max-width: 1380px;
  
  /* Global Fixed Header Navigation Clearance */
  --ab-nav-height: 46px;
}

@media (max-width: 991.98px) {
  :root {
    --ab-nav-height: 62px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --ab-nav-height: 58px;
    --ab-text-xs: 0.68rem;
    --ab-text-sm: 0.76rem;
    --ab-text-base: 0.875rem; /* ~14px */
    --ab-text-md: 0.95rem;
    --ab-text-lg: 1.1rem;
    --ab-text-xl: 1.25rem;
    --ab-text-2xl: 1.45rem;
    --ab-text-3xl: 1.65rem;
    --ab-text-4xl: 1.95rem;
    --ab-text-hero: clamp(1.35rem, 5.5vw, 1.75rem);

    /* Responsive Mobile Spacing */
    --ab-space-4: 0.85rem;
    --ab-space-5: 1.15rem;
    --ab-space-6: 1.5rem;
    --ab-space-7: 2rem;
    --ab-space-8: 2.75rem;
    --ab-space-9: 3.5rem;
    --ab-space-10: 4.5rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --ab-nav-height: 56px;
    --ab-text-xs: 0.64rem;
    --ab-text-sm: 0.72rem;
    --ab-text-base: 0.84rem; /* ~13.5px */
    --ab-text-md: 0.9rem;
    --ab-text-lg: 1.02rem;
    --ab-text-xl: 1.15rem;
    --ab-text-2xl: 1.3rem;
    --ab-text-3xl: 1.45rem;
    --ab-text-4xl: 1.65rem;
    --ab-text-hero: clamp(1.25rem, 6.2vw, 1.55rem);
  }
}