/* ==========================================================================
   Big Neurons — Colors & Type tokens
   Source: /wp-content/themes/bigneurons-new-theme/style-new.css
   Brand DNA: dark-mode canvas, electric-purple signature, Clash Display
   display + Inter body. Glass navbar, capsule tags, square-bracket accents.
   ========================================================================== */

/* ---------- Webfonts ---------------------------------------------------- */
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Inter loaded via Google Fonts on each consumer */

:root {
    /* ---------- Core palette (dark-mode by default) -------------------- */
    --bn-bg:            #111111;           /* body canvas */
    --bn-bg-elev-1:     #1c191e;           /* cards / step tiles */
    --bn-bg-elev-2:     #222222;           /* scrollbar track / subtle */
    --bn-ink:           #ffffff;           /* fg on dark */
    --bn-ink-muted:     rgba(255,255,255,.7);
    --bn-ink-dim:       rgba(255,255,255,.5);
    --bn-ink-faint:     rgba(255,255,255,.3);
    --bn-hairline:      rgba(255,255,255,.15);
    --bn-hairline-soft: rgba(255,255,255,.08);

    /* ---------- Signature purple -------------------------------------- */
    --bn-purple:        #d800ff;           /* brand primary — buttons, hover */
    --bn-purple-deep:   #8a00ff;           /* headline accent, "Send a brief" */
    --bn-purple-muted:  #5f4576;           /* tag / chip background */
    --bn-purple-ink:    #ede8d8;           /* warm cream used on dark purple */

    /* ---------- Light surfaces (used in SaaS tables, cards) ----------- */
    --bn-light-bg:      #ffffff;
    --bn-light-bg-alt:  #f5f5f5;
    --bn-light-ink:     #111111;
    --bn-light-hairline: rgba(0,0,0,.08);

    /* ---------- Semantic -------------------------------------------- */
    --bn-success-bg:    rgba(0,230,118,.20);
    --bn-success-fg:    #00a858;
    --bn-glass:         rgba(17,17,17,.60);
    --bn-scroll-thumb:  #555555;
    --bn-scroll-track:  #222222;

    /* ---------- Type families --------------------------------------- */
    --bn-font-display:  'Clash Display', system-ui, sans-serif;
    --bn-font-body:     'Inter', system-ui, sans-serif;

    /* ---------- Type scale (desktop) -------------------------------- */
    --bn-fs-display:    72px;              /* "Send us a brief" */
    --bn-fs-hero:       70px;              /* projet-niv-1-header-large */
    --bn-fs-h1:         50px;              /* home section header */
    --bn-fs-h2:         48px;              /* expertise card title */
    --bn-fs-h3:         36px;              /* niv-2 section text */
    --bn-fs-h4:         32px;              /* banner text */
    --bn-fs-h5:         28px;              /* card titles */
    --bn-fs-xl:         24px;              /* immersion card */
    --bn-fs-lg:         20px;
    --bn-fs-md:         18px;              /* menu element */
    --bn-fs-body:       16px;
    --bn-fs-sm:         14px;              /* tag / meta */
    --bn-fs-xs:         12px;              /* legal footer */

    /* ---------- Weights --------------------------------------------- */
    --bn-w-thin:        200;
    --bn-w-light:       300;
    --bn-w-regular:     400;
    --bn-w-semi:        600;
    --bn-w-bold:        700;

    /* ---------- Radii ----------------------------------------------- */
    --bn-radius-chip:   24px;              /* buttons, pills */
    --bn-radius-tag:    18px;              /* small tags */
    --bn-radius-card:   12px;              /* SaaS tables */
    --bn-radius-sm:     10px;              /* dropdown panels */
    --bn-radius-xs:     5px;               /* inner card rounding */

    /* ---------- Spacing (loose / generous) ------------------------- */
    --bn-gap-1:         8px;
    --bn-gap-2:         16px;
    --bn-gap-3:         24px;
    --bn-gap-4:         32px;
    --bn-gap-5:         40px;
    --bn-gap-6:         50px;
    --bn-gap-7:         80px;
    --bn-gap-8:         110px;             /* section spacing */
    --bn-max-row:       1440px;
    --bn-pad-x:         30px;

    /* ---------- Effects -------------------------------------------- */
    --bn-blur-glass:    blur(40px);
    --bn-shadow-pop:    0 12px 32px rgba(0,0,0,.50);
    --bn-shadow-table:  0 4px 24px rgba(0,0,0,.15);

    /* ---------- Motion --------------------------------------------- */
    --bn-ease:          cubic-bezier(.68,-.55,.265,1.55);   /* bounce-in */
    --bn-ease-soft:     ease;
    --bn-t-fast:        .2s;
    --bn-t-med:         .4s;
    --bn-t-slow:        .6s;
}

/* ==========================================================================
   Semantic base — apply to any page by linking this file + setting body
   ========================================================================== */

html, body {
    background: var(--bn-bg);
    color: var(--bn-ink);
    font-family: var(--bn-font-body);
    font-weight: var(--bn-w-regular);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--bn-font-display);
    font-weight: var(--bn-w-light);    /* display headlines use Light */
    line-height: 1.1;
    margin: 0 0 var(--bn-gap-3);
}

h1 { font-size: var(--bn-fs-hero); line-height: 1; }
h2 { font-size: var(--bn-fs-h1); line-height: 1.1; }
h3 { font-size: var(--bn-fs-h2); line-height: 1.2; }
h4 { font-size: var(--bn-fs-h3); line-height: 1.2; }

p  { font-weight: var(--bn-w-thin); line-height: 1.5; margin: 0 0 var(--bn-gap-2); }

.bn-font            { font-family: var(--bn-font-display); }
.bn-display-bold    { font-family: var(--bn-font-display); font-weight: var(--bn-w-bold); }
.bn-eyebrow         { font-family: var(--bn-font-display); font-size: var(--bn-fs-sm);
                      letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.bn-brackets        { font-family: var(--bn-font-display); color: var(--bn-ink-muted);
                      font-size: var(--bn-fs-xl); }

/* Utility colours */
.bn-bg-purple { background-color: var(--bn-purple); }
.bn-fg-purple { color: var(--bn-purple); }
.bn-fg-purple-deep { color: var(--bn-purple-deep); }

/* ==========================================================================
   Primitive elements — the "brief" primary button and capsule tags
   ========================================================================== */

.bn-brief-btn {
    font-family: var(--bn-font-display);
    background: var(--bn-purple);
    color: #fff;
    width: fit-content;
    min-width: 102px;
    padding: 6px 12px;
    text-align: center;
    border-radius: var(--bn-radius-chip);
    border: none;
    cursor: pointer;
    transition: background-color var(--bn-t-med), color var(--bn-t-med);
}
.bn-brief-btn:hover { background: #fff; color: var(--bn-bg); }

.bn-ghost-btn {
    font-family: var(--bn-font-display);
    padding: 8px 24px;
    font-size: var(--bn-fs-md);
    color: var(--bn-ink-muted);
    border: solid 2px rgba(255,255,255,.4);
    border-radius: var(--bn-radius-chip);
    background: transparent;
    width: fit-content;
    cursor: pointer;
    transition: color var(--bn-t-med), border-color var(--bn-t-med);
}
.bn-ghost-btn:hover { color: #fff; border-color: #fff; }

.bn-tag {
    display: inline-block;
    font-family: var(--bn-font-display);
    padding: 6px 10px;
    font-size: var(--bn-fs-sm);
    background: var(--bn-purple-muted);
    color: #fff;
    border-radius: var(--bn-radius-tag);
    margin: 0 6px 6px 0;
    white-space: nowrap;
}

.bn-step-tag {
    display: inline-block;
    font-family: var(--bn-font-display);
    padding: 6px 18px;
    font-size: var(--bn-fs-sm);
    background: var(--bn-purple-muted);
    color: var(--bn-ink-muted);
    border-radius: 16px;
    margin: 0 6px 12px 0;
}

.bn-menu-item {
    font-family: var(--bn-font-display);
    font-size: var(--bn-fs-md);
    color: #fff;
    opacity: .7;
    text-decoration: none;
    transition: opacity .2s, color .2s;
}
.bn-menu-item:hover { opacity: 1; color: var(--bn-purple); }

/* Glass navbar (scrolled) */
.bn-glass {
    background: var(--bn-glass);
    backdrop-filter: var(--bn-blur-glass);
    -webkit-backdrop-filter: var(--bn-blur-glass);
}

/* Scrollbars (horizontal scrollers common in the site) */
.bn-scroller {
    scrollbar-width: thin;
    scrollbar-color: var(--bn-scroll-thumb) var(--bn-scroll-track);
}
.bn-scroller::-webkit-scrollbar        { height: 10px; }
.bn-scroller::-webkit-scrollbar-track  { background: var(--bn-scroll-track); }
.bn-scroller::-webkit-scrollbar-thumb  { background: var(--bn-scroll-thumb); border-radius: 10px; }