/* =========================================================================
   Adsquare Design System — Colors & Type
   Source: Adsquare Brand Guidelines 2022, adsquare.com
   ========================================================================= */

/* Roboto — standardised brand type since May 2022. Variable fonts. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('/fonts/Roboto-VariableFont_wdth_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype-variations'),
       url('/fonts/Roboto-Italic-VariableFont_wdth_wght.ttf') format('truetype');
}

/* Roboto Mono — companion monospace for code, IDs, MAIDs, citations, data labels. */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/RobotoMono-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/RobotoMono-VariableFont_wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url('/fonts/RobotoMono-Italic-VariableFont_wght.woff2') format('woff2-variations'),
       url('/fonts/RobotoMono-Italic-VariableFont_wght.woff2') format('woff2');
}

:root {
  /* CORE PALETTE — from brand guidelines */
  --adsq-deep-blue: #102538;
  --adsq-turquoise: #49ACB4;
  --adsq-light-grey: #EDEEEF;
  --adsq-ux-white: #FFFEFD;
  --adsq-light-yellow: #EFDB89;

  /* Opacity tints */
  --adsq-deep-blue-70: rgba(16, 37, 56, 0.7);
  --adsq-deep-blue-50: rgba(16, 37, 56, 0.5);
  --adsq-deep-blue-30: rgba(16, 37, 56, 0.3);
  --adsq-deep-blue-10: rgba(16, 37, 56, 0.08);
  --adsq-turquoise-70: rgba(73, 172, 180, 0.7);
  --adsq-turquoise-30: rgba(73, 172, 180, 0.3);
  --adsq-turquoise-15: rgba(73, 172, 180, 0.15);
  --adsq-yellow-70: rgba(239, 219, 137, 0.7);
  --adsq-yellow-30: rgba(239, 219, 137, 0.3);

  /* SEMANTIC */
  --fg-1: #102538;
  --fg-2: rgba(16, 37, 56, 0.7);
  --fg-3: rgba(16, 37, 56, 0.5);
  --fg-inverse: #FFFEFD;
  --fg-accent: #49ACB4;

  --bg: #FFFEFD;
  --bg-alt: #EDEEEF;
  --bg-dark: #102538;
  --bg-accent: #49ACB4;
  --bg-pop: #EFDB89;

  --surface: #FFFFFF;
  --surface-alt: #F7F8F8;
  --border: rgba(16, 37, 56, 0.12);
  --border-strong: rgba(16, 37, 56, 0.24);
  --divider: rgba(16, 37, 56, 0.08);

  /* TYPE — families */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-display: 'Roboto', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* TYPE — role tokens (from brand book specimen) */
  --h1-family: var(--font-display); --h1-weight: 700; --h1-size: 36px; --h1-line: 38px;
  --h2-family: var(--font-display); --h2-weight: 700; --h2-size: 24px; --h2-line: 28px;
  --h3-family: var(--font-sans);    --h3-weight: 500; --h3-size: 21px; --h3-line: 28px;
  --h4-family: var(--font-sans);    --h4-weight: 400; --h4-size: 14px; --h4-line: 20px;
  --body-family: var(--font-sans);  --body-weight: 300; --body-size: 14px; --body-line: 22px;
  --quote-family: var(--font-sans); --quote-weight: 400; --quote-size: 36px; --quote-line: 44px;
  --pull-family: var(--font-sans);  --pull-weight: 100; --pull-size: 16px; --pull-line: 24px;
  --attr-family: var(--font-sans);  --attr-weight: 700; --attr-style: italic /* @kind other */; --attr-size: 10px;
  --hero-family: var(--font-sans);  --hero-weight: 300; --hero-size: 14px; --hero-tracking: 0.09em;
  --cta-family: var(--font-sans);   --cta-weight: 600; --cta-size: 14px; --cta-tracking: 0.01em;

  /* Display scale */
  --display-1-size: 72px; --display-1-line: 76px; --display-1-weight: 700;
  --display-2-size: 56px; --display-2-line: 62px; --display-2-weight: 700;

  /* SPACING (4px base) */
  --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: 96px;  --space-10: 128px;

  /* RADII */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px;
  --radius-lg: 20px; --radius-xl: 32px; --radius-pill: 999px;

  /* SHADOWS */
  --shadow-xs: 0 1px 2px rgba(16, 37, 56, 0.04);
  --shadow-sm: 0 2px 6px rgba(16, 37, 56, 0.06), 0 1px 2px rgba(16, 37, 56, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 37, 56, 0.08), 0 2px 4px rgba(16, 37, 56, 0.04);
  --shadow-lg: 0 20px 48px rgba(16, 37, 56, 0.12), 0 4px 8px rgba(16, 37, 56, 0.06);
  --shadow-float: 0 30px 60px rgba(16, 37, 56, 0.18);

  /* MOTION */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms /* @kind other */; --dur-base: 200ms /* @kind other */; --dur-slow: 320ms /* @kind other */;

  /* LAYOUT */
  --container: 1200px;
  --container-narrow: 880px;

  /* =============================================================
     SLIDE BACKGROUND FAMILY  —  the canonical slide-background set
     for the Adsquare Sales Deck. One diagonal flow axis (≈138–142°)
     shared across every member — a teal glow lower-left, a violet
     curtain falling from the top-right — so dark, accent, and light
     slides read as ONE family.

     FOREGROUND RULE
       Miles Gradient (PNG) ... white text,  turquoise accents
       White–Violet ........... deep-blue text, turquoise accents
       Soft Teal .............. deep-blue text, white/deep-blue accents
       Soft Oatmeal ........... deep-blue text, turquoise accents
     ============================================================= */

  /* The dark surface is the Miles Gradient — used full-bleed as the PNG
     asset (assets/miles-gradient.png), not a CSS token. */

  /* White–Violet ("Miles White") — LIGHT surface.
     UX-white base, teal mesh pooling lower-left, violet diffusing upper-right. */
  --grad-white-violet:
    radial-gradient(120% 110% at -6% 116%, rgba(73,172,180,0.40) 0%, rgba(73,172,180,0.14) 38%, rgba(73,172,180,0) 66%),
    radial-gradient(90% 80% at 30% 104%, rgba(52,138,146,0.26) 0%, rgba(52,138,146,0) 56%),
    radial-gradient(85% 80% at 84% 42%, rgba(96,84,170,0.16) 0%, rgba(96,84,170,0) 52%),
    radial-gradient(125% 110% at 110% -10%, rgba(124,86,178,0.40) 0%, rgba(124,86,178,0.13) 40%, rgba(124,86,178,0) 66%),
    var(--adsq-ux-white);

  /* Soft Teal ("Miles Teal") — MID accent surface.
     Even mid-teal base, faint light catch top-left, violet curtain upper-right. */
  --grad-soft-teal:
    radial-gradient(95% 82% at 2% -10%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 50%),
    radial-gradient(112% 96% at 30% 92%, rgba(46,124,132,0.42) 0%, rgba(46,124,132,0.12) 40%, rgba(46,124,132,0) 66%),
    radial-gradient(90% 80% at 84% 40%, rgba(96,84,170,0.16) 0%, rgba(96,84,170,0) 54%),
    radial-gradient(122% 106% at 102% -4%, rgba(124,86,178,0.42) 0%, rgba(124,86,178,0.14) 40%, rgba(124,86,178,0) 66%),
    #4FB0B7; /* @kind color */

  /* Soft Oatmeal — flat warm neutral. No gradient. The quietest member;
     most forgiving for dense text, tables, and floating screenshots. */
  --grad-soft-oatmeal: #F3EFE8;
}

/* BASE */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--body-family); font-weight: var(--body-weight);
  font-size: var(--body-size); line-height: var(--body-line);
  color: var(--fg-1); background: var(--bg); margin: 0;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--h1-family); font-weight: var(--h1-weight); font-size: var(--h1-size); line-height: var(--h1-line); color: var(--fg-1); margin: 0 0 var(--space-4); }
h2, .h2 { font-family: var(--h2-family); font-weight: var(--h2-weight); font-size: var(--h2-size); line-height: var(--h2-line); color: var(--fg-1); margin: 0 0 var(--space-3); }
h3, .h3 { font-family: var(--h3-family); font-weight: var(--h3-weight); font-size: var(--h3-size); line-height: var(--h3-line); color: var(--fg-1); margin: 0 0 var(--space-3); }
h4, .h4 { font-family: var(--h4-family); font-weight: var(--h4-weight); font-size: var(--h4-size); line-height: var(--h4-line); color: var(--fg-1); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: 0.08em; }
p  { margin: 0 0 var(--space-4); color: var(--fg-1); }
small, .small { font-size: 12px; line-height: 18px; color: var(--fg-2); }

blockquote, .quote { font-family: var(--quote-family); font-size: var(--quote-size); line-height: var(--quote-line); font-weight: 400; color: var(--fg-1); margin: 0; padding: 0; }
.pull-quote { font-family: var(--pull-family); font-weight: var(--pull-weight); font-size: var(--pull-size); line-height: var(--pull-line); color: var(--fg-1); }
.attribution { font-family: var(--attr-family); font-weight: var(--attr-weight); font-style: var(--attr-style); font-size: var(--attr-size); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); }
.hero-header { font-family: var(--hero-family); font-weight: var(--hero-weight); font-size: var(--hero-size); letter-spacing: var(--hero-tracking); color: var(--fg-1); text-transform: uppercase; }
.mono { font-family: var(--font-mono); font-feature-settings: 'tnum' 1, 'zero' 1; }
.mono-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.04em; color: var(--fg-2); text-transform: uppercase; }
.mono-tag { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.display-1 { font-family: var(--font-display); font-weight: var(--display-1-weight); font-size: var(--display-1-size); line-height: var(--display-1-line); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
.display-2 { font-family: var(--font-display); font-weight: var(--display-2-weight); font-size: var(--display-2-size); line-height: var(--display-2-line); letter-spacing: -0.005em; color: var(--fg-1); margin: 0; }

a { color: var(--fg-accent); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); }
a:hover { opacity: 0.8; }

/* BUTTONS — pill CTAs, brand spec */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--cta-family); font-weight: var(--cta-weight); font-size: var(--cta-size);
  letter-spacing: var(--cta-tracking);
  padding: 12px 22px; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; line-height: 1; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--adsq-turquoise); color: #fff; }
.btn-primary:hover { background: #3C959C; }
.btn-dark { background: var(--adsq-deep-blue); color: #fff; }
.btn-dark:hover { background: #1B3A54; }
.btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--adsq-deep-blue-10); }
.btn-link { background: transparent; color: var(--fg-accent); padding: 0; border-radius: 0; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.btn-link:hover { opacity: 0.7; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* UTILITY */
.section { padding: var(--space-10) 0; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }

.bg-dark { background: var(--adsq-deep-blue); color: var(--fg-inverse); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark p { color: var(--fg-inverse); }
.bg-accent { background: var(--adsq-turquoise); color: #fff; }
.bg-pop { background: var(--adsq-light-yellow); color: var(--fg-1); }
.bg-grey { background: var(--adsq-light-grey); }
.text-accent { color: var(--adsq-turquoise); }
.text-yellow { color: var(--adsq-light-yellow); }
.text-muted  { color: var(--fg-2); }

.card {
  background: var(--surface); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); padding: var(--space-6);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-md); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--adsq-turquoise-15); color: var(--adsq-deep-blue);
  font-size: 12px; font-weight: 500; padding: 6px 12px;
  border-radius: var(--radius-pill); border: 1px solid var(--adsq-turquoise-30);
}
.chip-dark { background: var(--adsq-deep-blue); color: #fff; border-color: transparent; }
.chip-yellow { background: var(--adsq-light-yellow); color: var(--adsq-deep-blue); border-color: rgba(16,37,56,0.12); }