/*
 * Bridge Consulting — Design System Variables
 * ============================================
 * A unified token system for a B2B IT consulting brand.
 * Deep navy authority. Warm gold connection. Clean white clarity.
 */

:root {

  /* =============================================
   * COLOR PALETTE
   * ============================================= */

  /* Primary — Deep Naval Authority */
  --color-primary:        #1B2A4A;
  --color-primary-light:  #243659;
  --color-primary-dark:   #111D33;

  /* Accent — Warm Gold (the Bridge) */
  --color-gold:           #C9A84C;
  --color-gold-light:     #D9BC74;
  --color-gold-dark:      #A8893A;
  --color-gold-subtle:    rgba(201, 168, 76, 0.12);
  --color-gold-glow:      rgba(201, 168, 76, 0.25);

  /* CTA — Teal Confidence */
  --color-cta:            #2A7F8E;
  --color-cta-light:      #348FA0;
  --color-cta-dark:       #1F6270;

  /* Neutrals */
  --color-white:          #FFFFFF;
  --color-off-white:      #FAFBFC;
  --color-light-gray:     #F5F6F8;
  --color-section-bg:     #F0F3F8;
  --color-border:         #E5E7EB;
  --color-border-light:   #EEF0F3;
  --color-mid-gray:       #6B7280;
  --color-dark-text:      #1A1A2E;
  --color-body-text:      #374151;

  /* Semantic */
  --color-success:        #22864A;
  --color-error:          #C0392B;

  /* =============================================
   * TYPOGRAPHY
   * ============================================= */

  /* Font Families */
  --font-display:  'Playfair Display', 'Georgia', serif;
  --font-body:     'Inter', 'Helvetica Neue', sans-serif;

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

  /* Type Scale — Desktop */
  --text-xs:    0.75rem;    /*  12px */
  --text-sm:    0.875rem;   /*  14px */
  --text-base:  1rem;       /*  16px */
  --text-lg:    1.125rem;   /*  18px */
  --text-xl:    1.25rem;    /*  20px */
  --text-2xl:   1.5rem;     /*  24px */
  --text-3xl:   1.875rem;   /*  30px */
  --text-4xl:   2.25rem;    /*  36px */
  --text-5xl:   3rem;       /*  48px */
  --text-6xl:   3.75rem;    /*  60px */

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* =============================================
   * 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-7:    1.75rem;    /* 28px */
  --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 */

  /* Section Vertical Rhythm */
  --section-padding-y:        var(--space-24);
  --section-padding-y-tablet: var(--space-16);
  --section-padding-y-mobile: var(--space-12);

  /* =============================================
   * LAYOUT
   * ============================================= */

  --max-width:        1200px;
  --max-width-narrow: 800px;
  --max-width-wide:   1400px;

  --container-padding:        var(--space-8);
  --container-padding-mobile: var(--space-6);

  /* =============================================
   * BORDER RADIUS
   * ============================================= */

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* =============================================
   * SHADOWS
   * ============================================= */

  /* Layered, directional shadows — not flat box shadows */
  --shadow-subtle:
    0 1px 3px rgba(27, 42, 74, 0.06),
    0 1px 2px rgba(27, 42, 74, 0.04);

  --shadow-medium:
    0 4px 16px rgba(27, 42, 74, 0.08),
    0 2px 6px rgba(27, 42, 74, 0.05);

  --shadow-strong:
    0 16px 48px rgba(27, 42, 74, 0.14),
    0 6px 18px rgba(27, 42, 74, 0.08);

  --shadow-gold:
    0 8px 32px rgba(201, 168, 76, 0.18),
    0 2px 8px rgba(201, 168, 76, 0.10);

  --shadow-lifted:
    0 24px 64px rgba(27, 42, 74, 0.16),
    0 8px 24px rgba(27, 42, 74, 0.10);

  /* Card hover state */
  --shadow-card-hover:
    0 20px 56px rgba(27, 42, 74, 0.12),
    0 8px 20px rgba(27, 42, 74, 0.08);

  /* =============================================
   * TRANSITIONS
   * ============================================= */

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --ease-both: cubic-bezier(0.45, 0, 0.55, 1);

  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 300ms var(--ease-out);
  --transition-slow:   500ms var(--ease-out);

  /* =============================================
   * Z-INDEX SCALE
   * ============================================= */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-fixed:   1000;
  --z-overlay: 1100;
  --z-modal:   1200;

  /* =============================================
   * BREAKPOINTS (reference only — use in media queries)
   * ============================================= */

  /* --bp-sm:  480px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1200px */

  /* =============================================
   * HEADER
   * ============================================= */

  --header-height:        72px;
  --header-height-mobile: 64px;

  /* =============================================
   * BRIDGE DECORATIVE SYSTEM
   * ============================================= */

  /* Gold arc / cable angle */
  --bridge-angle:        -2.5deg;
  --bridge-cable-width:  1px;
  --bridge-cable-color:  var(--color-gold);

  /* Gradient mesh for subtle depth */
  --gradient-hero:
    linear-gradient(
      145deg,
      var(--color-primary-dark) 0%,
      var(--color-primary) 55%,
      rgba(42, 127, 142, 0.35) 100%
    );

  --gradient-gold-sheen:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--color-gold) 50%,
      transparent 100%
    );

  --gradient-section-fade:
    linear-gradient(
      180deg,
      var(--color-white) 0%,
      var(--color-section-bg) 100%
    );

}