/* ============================================================
   ABDACHE LINKS NIGERIA LIMITED — DESIGN TOKENS
   Brand: Clay Rose + Ember Orange gradient on Ink & Stone
   ============================================================ */

:root{
  /* ---- Color: derived from the logo's rose→orange gradient ---- */
  --ink:            #15120F;   /* near-black, primary dark ground */
  --ink-soft:       #221D19;   /* elevated dark surface */
  --stone:          #ECE6DC;   /* warm concrete-grey light ground (not cream) */
  --stone-dim:      #DCD4C6;   /* stone shadow / borders on light */
  --paper:          #F7F4EE;   /* lightest surface, cards on stone */
  --clay:           #B23A63;   /* rose from logo, deepened for legibility */
  --ember:          #DD5B26;   /* orange from logo, deepened */
  --gold:           #C9A24B;   /* premium accent line, used sparingly */
  --ink-text:       #1B1815;
  --muted:          #6B6459;   /* secondary text on light */
  --muted-dark:     #B6AEA2;   /* secondary text on dark */
  --line:           rgba(21,18,15,0.12);
  --line-dark:      rgba(247,244,238,0.14);

  --grad-signature: linear-gradient(115deg, var(--clay) 0%, var(--ember) 100%);
  --grad-signature-soft: linear-gradient(115deg, rgba(178,58,99,0.12) 0%, rgba(221,91,38,0.12) 100%);

  /* ---- Type ---- */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* ---- Scale ---- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius-s: 2px;
  --radius-m: 4px;

  --container: 1240px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--stone);
  color:var(--ink-text);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.05;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;cursor:pointer;}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-3);}
@media (max-width:640px){.container{padding:0 var(--space-2);}}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}

/* Eyebrow / label */
.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ember);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{
  content:'';
  width:22px;height:1px;
  background:var(--grad-signature);
  display:inline-block;
}

/* Corner registration marks — the site's signature motif,
   echoing an architect's drawing-board crop marks */
.crop{position:relative;}
.crop::before,.crop::after{
  content:'';
  position:absolute;
  width:14px;height:14px;
  pointer-events:none;
}
.crop::before{
  top:-1px;left:-1px;
  border-top:1.5px solid var(--ember);
  border-left:1.5px solid var(--ember);
}
.crop::after{
  bottom:-1px;right:-1px;
  border-bottom:1.5px solid var(--clay);
  border-right:1.5px solid var(--clay);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-family:var(--font-mono);
  font-size:0.82rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:1em 1.6em;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn-primary{
  background:var(--ink);
  color:var(--stone);
}
.btn-primary:hover{background:var(--ember);color:var(--ink);transform:translateY(-2px);}
.btn-outline{
  border-color:var(--ink);
  color:var(--ink);
}
.btn-outline:hover{background:var(--ink);color:var(--stone);transform:translateY(-2px);}
.btn-on-dark{border-color:var(--muted-dark);color:var(--stone);}
.btn-on-dark:hover{background:var(--stone);color:var(--ink);border-color:var(--stone);transform:translateY(-2px);}

.grad-text{
  background:var(--grad-signature);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.section{padding:var(--space-6) 0;}
@media (max-width:900px){.section{padding:var(--space-5) 0;}}

.section-dark{background:var(--ink);color:var(--stone);}
.section-dark .muted{color:var(--muted-dark);}
.muted{color:var(--muted);}

hr.hairline{border:none;border-top:1px solid var(--line);margin:0;}
.section-dark hr.hairline{border-top:1px solid var(--line-dark);}