/* ==========================================================================
   iamota brand tokens — shared by the public landing page (/) and the
   authenticated docs app (/docs).
   Source: iamota brand guidelines, 2026 iamota Style Guide — Library (Figma
   6bhcInH56pTe9VzqGlCiOg). Brand owners: Connor Cliche, Kateryna Jones.

   Only edit palette/type values here. Both stylesheets consume these tokens,
   so a change lands in the landing page and the docs app at once.
   ========================================================================== */

:root {
  /* ----- Core palette (verbatim from the guidelines) ----- */
  --ia-yellow:     #FFF30A;
  --ia-blue:       #3333FF;
  --ia-charcoal:   #222222;
  --ia-beige:      #F0EADF;
  --ia-white:      #FFFFFF;
  --ia-gray-dark:  #424242;
  --ia-gray-mid:   #888888;
  --ia-gray-light: #F5F5F5;

  /* ----- Semantic surfaces -----
     Beige, white and charcoal are the foundational colours; yellow and blue
     are deliberate accents. */
  --bg:             var(--ia-beige);
  --surface:        var(--ia-white);
  --surface-sunken: var(--ia-gray-light);
  --surface-invert: var(--ia-charcoal);

  /* ----- Text -----
     Guidelines: charcoal on white/beige/yellow; beige or white on charcoal;
     white on blue. Mid gray is not used for small text — --text-muted is
     gray-dark so body-size secondary copy still passes on beige and white. */
  --text:           var(--ia-charcoal);
  --text-muted:     var(--ia-gray-dark);
  --text-faint:     var(--ia-gray-mid); /* large/decorative text only */
  --text-invert:    var(--ia-white);
  --text-on-accent: var(--ia-charcoal);

  /* ----- Rules and borders — fine, never heavy ----- */
  --border:        rgba(34, 34, 34, 0.16);
  --border-strong: rgba(34, 34, 34, 0.42);
  --border-invert: rgba(255, 255, 255, 0.18);
  --hairline:      1px;

  /* ----- Accents ----- */
  --accent:        var(--ia-blue);
  --accent-text:   var(--ia-white);
  --highlight:     var(--ia-yellow);

  /* ----- Functional state colours -----
     The brand palette carries no success/warn/danger hues. These are
     desaturated to sit beside beige and charcoal rather than shout over
     them; they are for state only, never for brand expression. */
  --ok:      #1F6F43;
  --ok-bg:   #E8F1EB;
  --warn:    #8A5A00;
  --warn-bg: #FAEFD6;
  --bad:     #A32020;
  --bad-bg:  #F7E4E4;
  --info:    var(--ia-blue);
  --info-bg: #E6E6FF;

  /* ----- Typography ----- */
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Instrument Sans", system-ui, -apple-system, "Helvetica Neue",
                Helvetica, Arial, sans-serif;
  --font-mono:  "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Mono is the label/nav/button voice: uppercase, 2px tracking. */
  --track-label: 2px;

  /* ----- Shape — square corners are a brand rule ----- */
  --radius: 0;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Mono label treatment, used for eyebrows, nav, buttons and badges. */
.ia-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-weight: 600;
}