/* ============================================================
   aidgile* design tokens
   agile software. social impact.
   ------------------------------------------------------------
   Drop this file into any aidgile project. Load the fonts via
   Google Fonts (or self-host via @fontsource packages):

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Instrument+Sans:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap">

   npm: @fontsource-variable/bricolage-grotesque
        @fontsource/instrument-sans  @fontsource/space-mono
   ============================================================ */

:root {
  /* ---- color ------------------------------------------------
     proportions: ink 55 · paper 28 · lilac 12 · ember 5      */
  --aidgile-ink:      #17171B;  /* the canvas — screens, slides */
  --aidgile-paper:    #FAFAF6;  /* text on ink; light surfaces  */
  --aidgile-lilac:    #C9B8F0;  /* soft accent — fields, highlights, chips */
  --aidgile-ember:    #FF5A36;  /* the spark — asterisk, actions. small doses */
  --aidgile-graphite: #3A3A40;  /* borders, quiet structure     */

  /* derived / support */
  --aidgile-lilac-ink: #4A3E6E; /* text-on-lilac support tone   */
  --aidgile-muted-dark:  #A8A8AE; /* muted text on ink          */
  --aidgile-muted-light: #6E6E74; /* muted text on paper        */

  /* semantic aliases (dark-first: ink is the default canvas) */
  --aidgile-bg:        var(--aidgile-ink);
  --aidgile-fg:        var(--aidgile-paper);
  --aidgile-accent:    var(--aidgile-lilac);
  --aidgile-action:    var(--aidgile-ember);
  --aidgile-border:    var(--aidgile-graphite);
  --aidgile-muted:     var(--aidgile-muted-dark);

  /* ---- typography ------------------------------------------ */
  --aidgile-font-display: 'Bricolage Grotesque', 'Bricolage Grotesque Variable', 'Avenir Next', 'Segoe UI', sans-serif;
  --aidgile-font-body:    'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --aidgile-font-mono:    'Space Mono', 'Courier New', monospace;

  --aidgile-weight-display: 800;   /* Bricolage is always heavy   */
  --aidgile-tracking-display: -0.03em;

  /* type scale: 58 / 40 / 28 / 20 / 17 body / 13 mono */
  --aidgile-text-3xl: 58px;
  --aidgile-text-2xl: 40px;
  --aidgile-text-xl:  28px;
  --aidgile-text-lg:  20px;
  --aidgile-text-md:  17px;
  --aidgile-text-sm:  13px;

  /* ---- shape ----------------------------------------------- */
  --aidgile-radius-sm: 8px;
  --aidgile-radius-md: 12px;
  --aidgile-radius-pill: 999px;
}

/* light context: flip the aliases, keep the palette */
.aidgile-light {
  --aidgile-bg:     var(--aidgile-paper);
  --aidgile-fg:     var(--aidgile-ink);
  --aidgile-border: #E4E4DE;
  --aidgile-muted:  var(--aidgile-muted-light);
}

/* ---- ready-made pieces ------------------------------------- */

/* the wordmark in live text (prefer the SVG where possible) */
.aidgile-wordmark {
  font-family: var(--aidgile-font-display);
  font-weight: var(--aidgile-weight-display);
  letter-spacing: var(--aidgile-tracking-display);
  line-height: 1;
  color: var(--aidgile-fg);
}
.aidgile-wordmark .asterisk { color: var(--aidgile-ember); }

/* the footnote device */
.aidgile-footnote {
  font-family: var(--aidgile-font-mono);
  font-size: var(--aidgile-text-sm);
  color: var(--aidgile-muted);
}
.aidgile-footnote::before { content: "* "; color: var(--aidgile-ember); }

/* primary action — ember, one per view */
.aidgile-btn {
  display: inline-block;
  background: var(--aidgile-ember);
  color: var(--aidgile-ink);
  font-family: var(--aidgile-font-body);
  font-weight: 600;
  border: none;
  border-radius: var(--aidgile-radius-pill);
  padding: 12px 22px;
  cursor: pointer;
}

/* secondary action — quiet outline */
.aidgile-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--aidgile-fg);
  font-family: var(--aidgile-font-body);
  font-weight: 500;
  border: 1px solid var(--aidgile-border);
  border-radius: var(--aidgile-radius-pill);
  padding: 11px 22px;
  cursor: pointer;
}

/* lilac callout — always ink text on lilac */
.aidgile-callout {
  background: var(--aidgile-lilac);
  color: var(--aidgile-ink);
  border-radius: var(--aidgile-radius-md);
  padding: 16px 20px;
}