/* =====================================================================
   ADC DESIGN SYSTEM — colors & type tokens
   ---------------------------------------------------------------------
   ADC is the European AI transformation partner.
   Brand is built on:
     - High-contrast black + white anchors
     - Bold vibrant secondary palette (violet/pink/teal/green/yellow/gold)
     - Brand typeface: Ease — Ease Display for headlines/hero,
       Ease SemiDisplay for body + labels
     - Generous whitespace, large display headlines (line-height 95%, -5% tracking)
     - Organic "blob" pattern shapes that compose into the brand mark "X"
   ===================================================================== */

/* ---------- Fonts ---------- */
/* Ease is the ADC brand font. Two cuts, self-hosted (woff2):
     - "Ease Display"     — headlines & hero text. Ships Regular (400).
     - "Ease SemiDisplay" — body copy & labels.    Ships Regular (400)
                            and Semibold (600) for emphasis.
   url()s resolve relative to THIS file (project root) -> assets/fonts/. */
@font-face {
  font-family: "Ease Display";
  src: url("assets/fonts/EaseDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ease SemiDisplay";
  src: url("assets/fonts/EaseSemiDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ease SemiDisplay";
  src: url("assets/fonts/EaseSemiDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── PRIMARY COLOURS ─────────────────────────────────────────── */
  /* Black and white are the brand anchors — used most heavily. */
  --adc-black:  #000000;
  --adc-white:  #FFFFFF;

  /* ─── SECONDARY PALETTE (the six brand accents) ───────────────── */
  --adc-violet: #A187FF;
  --adc-pink:   #FF9BFC;
  --adc-teal:   #2BEBCB;
  --adc-green:  #58EB81;
  --adc-yellow: #FFF347;
  --adc-gold:   #E5C574;

  /* ─── COLOUR SCALES ──────────────────────────────────────────────
     Per the brand guidelines colour-scale page. The -500 is the
     canonical brand value; tints/shades for data viz and UI states.
     Ratios are documented vs black (dark) and white. */

  /* Violet */
  --adc-violet-200: #DCD3FF;
  --adc-violet-300: #C7B8FF;
  --adc-violet-400: #B5A0FF;
  --adc-violet-500: #A187FF; /* brand */
  --adc-violet-600: #8E78E8;
  --adc-violet-700: #6F5DB5;
  --adc-violet-800: #574883;
  --adc-violet-900: #44396B;

  /* Pink */
  --adc-pink-200:   #FFD1FE;
  --adc-pink-300:   #FFBCFD;
  --adc-pink-400:   #FFAFFD;
  --adc-pink-500:   #FF9BFC; /* brand */
  --adc-pink-600:   #E88DE5;
  --adc-pink-700:   #B56EB3;
  --adc-pink-800:   #8C558B;
  --adc-pink-900:   #6B416A;

  /* Teal */
  --adc-teal-200:   #C2F8EE;
  --adc-teal-300:   #99F2E1;
  --adc-teal-400:   #62EED4;
  --adc-teal-500:   #2BEBCB; /* brand */
  --adc-teal-600:   #27D4B7;
  --adc-teal-700:   #1FA68F;
  --adc-teal-800:   #178072;
  --adc-teal-900:   #126355;

  /* Green */
  --adc-green-200:  #CDF6D7;
  --adc-green-300:  #A8F1BA;
  --adc-green-400:  #82EE9D;
  --adc-green-500:  #58EB81; /* brand */
  --adc-green-600:  #4FD475;
  --adc-green-700:  #3EA55B;
  --adc-green-800:  #2F8047;
  --adc-green-900:  #256336;

  /* Yellow */
  --adc-yellow-200: #FFFAB4;
  --adc-yellow-300: #FFF888;
  --adc-yellow-400: #FFF666;
  --adc-yellow-500: #FFF347; /* brand */
  --adc-yellow-600: #E5DA40;
  --adc-yellow-700: #B2AA32;
  --adc-yellow-800: #898326;
  --adc-yellow-900: #6B661E;

  /* Gold */
  --adc-gold-200:   #F5E6BB;
  --adc-gold-300:   #EFD9A0;
  --adc-gold-400:   #EACD89;
  --adc-gold-500:   #E5C574; /* brand */
  --adc-gold-600:   #CFB269;
  --adc-gold-700:   #A18A52;
  --adc-gold-800:   #7C6A3F;
  --adc-gold-900:   #605331;

  /* Neutrals — used VERY sparingly; brand mostly skips greys. */
  --adc-grey-100: #F5F5F5;
  --adc-grey-200: #E9E9E9;
  --adc-grey-300: #CCCCCC;
  --adc-grey-400: #ADADAD;
  --adc-grey-500: #8E98A8; /* annotation text */
  --adc-grey-600: #6F6F6F;
  --adc-grey-700: #4D4D4D;
  --adc-grey-800: #333333;
  --adc-grey-900: #212121;

  /* Optional warm off-white (used in some apparel/print backdrops) */
  --adc-paper:    #FFFEFA;

  /* ─── SEMANTIC TOKENS ─────────────────────────────────────────── */
  --bg:           var(--adc-white);
  --bg-inverse:   var(--adc-black);
  --fg:           var(--adc-black);
  --fg-inverse:   var(--adc-white);
  --fg-muted:     var(--adc-grey-500);
  --fg-subtle:    var(--adc-grey-400);
  --border:       #E9EBF8;     /* swatch outlines etc. */
  --pill-bg:      #F5F5F5;     /* footer info pills */
  --accent:       var(--adc-teal-500); /* default accent — varies by section */

  /* ─── TYPOGRAPHY ──────────────────────────────────────────────── */
  /* ADC brand font is Ease. Display cut for headlines/hero,
     SemiDisplay cut for body + labels. */
  --font-display: "Ease Display", "Ease SemiDisplay", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Ease SemiDisplay", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label:   "Ease SemiDisplay", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weights — Ease ships only Regular (400) + Semibold (600).
     There is no 500/900 cut, so medium/black resolve to the
     nearest available weight (600). Emphasis = semibold. */
  --weight-regular: 400;
  --weight-medium:  600;
  --weight-semibold:600;
  --weight-black:   600;

  /* Type scale (slide deck @ 1920×1080 — scale down for web/UI surfaces) */
  --t-deck-cover:   140px;   /* deck cover title */
  --t-chapter:      120px;   /* chapter divider */
  --t-h1:            72px;   /* in-slide H1 */
  --t-h2:            46px;
  --t-h3:            30px;
  --t-body-lg:       30px;   /* bullet copy on slides */
  --t-body:          21px;
  --t-body-sm:       16px;
  --t-label:         15px;   /* SECTION/CAPTION (often UPPERCASE) */
  --t-meta:          12px;

  /* Display rule from the brand guidelines:
     headlines use line-height: 95% AND letter-spacing: -5%
     ("Don't forget to decrease spacing for titles.") */
  --lh-display:        0.95; /* @kind other */
  --tracking-display:  -0.05em;

  --lh-body-tight:     1.2; /* @kind other */
  --lh-body:           1.4; /* @kind other */
  --lh-body-loose:     1.5; /* @kind other */
  --tracking-body:     0.005em;
  --tracking-label:    0.01em;

  /* ─── SPACING / RADII / SHADOWS ───────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  100px; /* canonical slide gutter */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  --shadow-card: 0 4px 10px rgba(0,0,0,0.10);
  --shadow-deep: 0 12px 40px rgba(0,0,0,0.15);

  /* Slide canvas */
  --slide-w: 1920px;
  --slide-h: 1080px;
  --slide-gutter: 100px;
}

/* ─── SEMANTIC ROLES (use these in product CSS) ────────────────── */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body-loose);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.adc-display,
h1.adc, h2.adc {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

h1.adc { font-size: var(--t-h1); }
h2.adc { font-size: var(--t-h2); }
h3.adc { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -0.02em; }

p.adc {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body-loose);
}

.adc-label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  letter-spacing: var(--tracking-label);
  line-height: 1.27;
  color: var(--fg);
}

.adc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

/* Footer info pill — recurring component throughout the guidelines */
.adc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  color: var(--fg);
}

/* Bullet — brand uses → as the bullet marker */
.adc-bullet {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 30px;
  font-family: var(--font-body);
}
.adc-bullet::before {
  content: "→";
  display: block;
}