/* ============================================================
   BROCOM Design System — Colors & Typography
   Premium M&A Advisory · Light Mode
   ------------------------------------------------------------
   Base: 1rem = 16px (browser default)
   All sizing tokens use rem for responsive scaling.
   Container widths remain in px (fixed reference points).
   Shadow blur/offset remain in px (fine visual details).
   ============================================================ */

/* ----- Font Faces: Inter Display (Headlines ≥1.25rem / 20px) ----- */

@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Display';
  src: url('fonts/InterDisplay-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ----- Font Faces: Inter (Body & UI, <1.25rem / 20px) ----- */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   ROOT — Base Font Size & Reset
   ============================================================ */

html {
  /* Explicit base; allows users / OS to scale via font-size override.
     1rem = 16px at default. */
  font-size: 100%;
}


/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {

  /* ----- Font Stacks ----- */
  --font-display: 'Inter Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;


  /* =========================================================
     BRAND CORE COLORS
     ========================================================= */

  /* Brand Blue — primary identity, structure, headlines */
  --brand-blue:        #023064;
  --brand-blue-light:  #1E4D8C;
  --brand-blue-tint:   #E6EDF6;
  --brand-blue-deep:   #011A38;

  /* Brand Red — conversion CTAs only */
  --brand-red:         #e30613;
  --brand-red-dark:    #B8050F;
  --brand-red-tint:    #FCE8E9;

  /* Brand Gold — Deal-Garantie exclusive */
  --brand-gold:           #C9A14B;
  --brand-gold-dark:      #B8893E;
  --brand-gold-highlight: #E6CC8A;
  --brand-gold-tint:      #F5EDD8;

  /* Gold Metallic Gradient (use as background-image) */
  --gold-metallic: linear-gradient(135deg, #E6CC8A 0%, #D4AF5E 25%, #C9A14B 50%, #B8893E 75%, #9C7B36 100%);


  /* =========================================================
     BACKGROUNDS
     ========================================================= */
  --bg-page:              #FFFFFF;
  --bg-surface:           #F5F7FA;
  --bg-surface-light:     #FAFBFC;
  --bg-surface-mid:       #EDF0F4;
  --bg-footer:            #023064;   /* = brand-blue */


  /* =========================================================
     TEXT / FOREGROUND
     ========================================================= */
  --text-primary:        #023064;   /* Headlines — brand blue */
  --text-body:           #1A2C44;   /* Body copy */
  --text-secondary:      #4A5970;   /* Card descriptions, meta */
  --text-tertiary:       #7B8699;   /* Captions, labels */
  --text-on-dark:        #FFFFFF;   /* Text on dark surfaces */
  --text-on-dark-muted:  rgba(255, 255, 255, 0.7);


  /* =========================================================
     BORDERS
     ========================================================= */
  --border-default:  #E5E8EC;
  --border-blue:     rgba(2, 48, 100, 0.12);
  --border-strong:   #D0D5DD;

  /* Border widths (px — sub-pixel rendering matters here) */
  --border-width-thin:    1px;
  --border-width-default: 1.5px;
  --border-width-thick:   2px;


  /* =========================================================
     SHADOWS (blue-tinted, never black)
     Offsets/blurs in px — they describe optical pixel detail,
     not layout dimensions.
     ========================================================= */
  --shadow-xs:     0 1px 3px rgba(2, 48, 100, 0.04), 0 1px 2px rgba(2, 48, 100, 0.03);
  --shadow-sm:     0 2px 8px rgba(2, 48, 100, 0.06);
  --shadow-md:     0 8px 24px rgba(2, 48, 100, 0.10);
  --shadow-lg:     0 16px 40px rgba(2, 48, 100, 0.14);
  --shadow-inset:  inset 0 1px 2px rgba(2, 48, 100, 0.06);


  /* =========================================================
     FEEDBACK / SEMANTIC
     ========================================================= */
  --success:         #1E7F3F;
  --success-bg:      #ECF7EF;
  --success-text:    #16A34A;

  --warning:         #C9A14B;   /* = brand-gold */
  --warning-bg:      #F5EDD8;   /* = brand-gold-tint */

  --error:           #e30613;   /* = brand-red */
  --error-bg:        #FCE8E9;   /* = brand-red-tint */
  --error-text:      #B8050F;

  --info:            #1E4D8C;   /* = brand-blue-light */
  --info-bg:         #E6EDF6;   /* = brand-blue-tint */


  /* =========================================================
     BORDER RADIUS (rem)
     ========================================================= */
  --radius-xs:    0.25rem;   /*  4px — Tags, checkboxes      */
  --radius-sm:    0.375rem;  /*  6px — Buttons, inputs       */
  --radius-md:    0.5rem;    /*  8px — Standard cards        */
  --radius-card:  0.625rem;  /* 10px — Content cards         */
  --radius-lg:    0.75rem;   /* 12px — Hero images, premium  */
  --radius-pill:  6.25rem;   /* 100px — Filter pills         */
  --radius-full:  50%;       /* Avatars, seals               */


  /* =========================================================
     SPACING (4px grid, expressed in rem)
     ========================================================= */
  --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 */
  --space-40:  10rem;     /* 160px */


  /* =========================================================
     LAYOUT
     Container widths stay in px (fixed page-level reference
     points — don't scale with root font size).
     ========================================================= */
  --container-max:      1280px;
  --container-wide:     1440px;
  --container-reading:  720px;
  --container-padding:  2rem;     /* 32px */
  --grid-gutter:        1.5rem;   /* 24px */


  /* =========================================================
     TYPOGRAPHY — Semantic Tokens (rem-based)
     ========================================================= */

  /* Hero Display */
  --hero-display-font:       var(--font-display);
  --hero-display-size:       4.5rem;    /* 72px */
  --hero-display-weight:     600;
  --hero-display-lh:         1.05;
  --hero-display-ls:         -0.02em;

  /* H1 */
  --h1-font:    var(--font-display);
  --h1-size:    3.5rem;    /* 56px */
  --h1-weight:  600;
  --h1-lh:      1.1;
  --h1-ls:      -0.02em;

  /* H2 */
  --h2-font:    var(--font-display);
  --h2-size:    2.5rem;    /* 40px */
  --h2-weight:  600;
  --h2-lh:      1.15;
  --h2-ls:      -0.01em;

  /* H3 */
  --h3-font:    var(--font-display);
  --h3-size:    2rem;      /* 32px */
  --h3-weight:  600;
  --h3-lh:      1.2;
  --h3-ls:      -0.01em;

  /* H4 */
  --h4-font:    var(--font-display);
  --h4-size:    1.5rem;    /* 24px */
  --h4-weight:  600;
  --h4-lh:      1.25;
  --h4-ls:      0;

  /* H5 */
  --h5-font:    var(--font-display);
  --h5-size:    1.25rem;   /* 20px */
  --h5-weight:  600;
  --h5-lh:      1.3;
  --h5-ls:      0;

  /* H6 */
  --h6-font:    var(--font-body);
  --h6-size:    1rem;      /* 16px */
  --h6-weight:  700;
  --h6-lh:      1.4;
  --h6-ls:      0.02em;

  /* Lead Paragraph */
  --lead-font:    var(--font-body);
  --lead-size:    1.25rem; /* 20px */
  --lead-weight:  400;
  --lead-lh:      1.55;
  --lead-ls:      0;

  /* Body Standard */
  --body-font:    var(--font-body);
  --body-size:    1rem;    /* 16px */
  --body-weight:  400;
  --body-lh:      1.65;
  --body-ls:      0;

  /* Body Small */
  --body-sm-font:    var(--font-body);
  --body-sm-size:    0.875rem;  /* 14px */
  --body-sm-weight:  400;
  --body-sm-lh:      1.55;
  --body-sm-ls:      0;

  /* Eyebrow Label */
  --eyebrow-font:       var(--font-body);
  --eyebrow-size:       0.75rem;   /* 12px */
  --eyebrow-weight:     600;
  --eyebrow-lh:         1.2;
  --eyebrow-ls:         0.12em;
  --eyebrow-transform:  uppercase;

  /* Quote / Pullquote */
  --quote-font:    var(--font-display);
  --quote-size:    1.75rem;  /* 28px */
  --quote-weight:  500;
  --quote-lh:      1.4;
  --quote-ls:      -0.01em;

  /* Big Number / Stat */
  --stat-font:    var(--font-display);
  --stat-size:    4rem;      /* 64px */
  --stat-weight:  700;
  --stat-lh:      1;
  --stat-ls:      -0.02em;

  /* Button */
  --btn-font:     var(--font-body);
  --btn-size:     0.9375rem;  /* 15px */
  --btn-weight:   500;
  --btn-lh:       1;
  --btn-ls:       0.01em;
  --btn-padding:  0.875rem 1.75rem;  /* 14px 28px — height ≈ 48px */

  /* Button Small */
  --btn-sm-size:     0.8125rem;  /* 13px */
  --btn-sm-weight:   500;
  --btn-sm-ls:       0.02em;
  --btn-sm-padding:  0.5625rem 1.125rem;  /* 9px 18px */

  /* Nav Link */
  --nav-font:    var(--font-body);
  --nav-size:    0.9375rem;  /* 15px */
  --nav-weight:  500;
  --nav-lh:      1.4;
  --nav-ls:      0.01em;

  /* Form Label */
  --label-size:    0.8125rem;  /* 13px */
  --label-weight:  500;
  --label-ls:      0.01em;

  /* Form Input */
  --input-size:     1rem;      /* 16px — avoids iOS zoom */
  --input-weight:   400;
  --input-lh:       1.5;
  --input-height:   3rem;      /* 48px */
  --input-padding:  0.75rem 1rem;  /* 12px 16px */

  /* Caption */
  --caption-size:    0.8125rem;  /* 13px */
  --caption-weight:  400;
  --caption-lh:      1.45;

  /* Footnote */
  --footnote-size:    0.75rem;  /* 12px */
  --footnote-weight:  400;
  --footnote-lh:      1.4;

  /* Tag */
  --tag-size:       0.6875rem;  /* 11px */
  --tag-weight:     600;
  --tag-lh:         1;
  --tag-ls:         0.1em;
  --tag-transform:  uppercase;


  /* =========================================================
     LAYOUT HEIGHTS
     ========================================================= */
  --nav-height-desktop:  5.5rem;   /* 88px */
  --nav-height-tablet:   4.5rem;   /* 72px */
  --nav-height-mobile:   4rem;     /* 64px */
}


/* ============================================================
   RESPONSIVE — Tablet (768–1023px)
   Adjusts base font-size and section padding for smaller viewports.
   All rem-based tokens scale automatically.
   ============================================================ */

@media (max-width: 1023px) {
  :root {
    /* Headlines scale down */
    --hero-display-size:  3.5rem;   /* 56px */
    --h1-size:            2.75rem;  /* 44px */
    --h2-size:            2rem;     /* 32px */
    --h3-size:            1.75rem;  /* 28px */
    --h4-size:            1.375rem; /* 22px */

    /* Lead scales slightly */
    --lead-size:          1.125rem; /* 18px */

    /* Container padding */
    --container-padding:  1.5rem;   /* 24px */
  }
}


/* ============================================================
   RESPONSIVE — Mobile (<768px)
   ============================================================ */

@media (max-width: 767px) {
  :root {
    /* Headlines scale further */
    --hero-display-size:  2.75rem;  /* 44px */
    --h1-size:            2rem;     /* 32px */
    --h2-size:            1.625rem; /* 26px */
    --h3-size:            1.375rem; /* 22px */
    --h4-size:            1.25rem;  /* 20px */
    --h5-size:            1.125rem; /* 18px */

    /* Container padding tightens */
    --container-padding:  1rem;     /* 16px */
    --grid-gutter:        1rem;     /* 16px */
  }
}