/* ==========================================================================
   MIT App Inventor — design tokens
   --------------------------------------------------------------------------
   New code should use these variables instead of literal hex values. The
   legacy mit_app_inventor.css contains 32 distinct hardcoded colors; those are
   deliberately NOT retrofitted here, because touching them would mean
   re-testing 100+ pages for no visible gain.

   The rule going forward: anything written from today on uses var(--ai2-*).
   Over time the tokenized surface grows and the literal one shrinks.
   ========================================================================== */

:root {
  /* Brand ---------------------------------------------------------------- */
  --ai2-orange: #f88d34;          /* primary action, brand accent */
  --ai2-orange-dark: #e2761d;     /* hover/active state for orange */
  --ai2-orange-tint: #fff7f0;     /* faint orange wash for hover backgrounds */
  --ai2-magenta: #a7247a;         /* secondary action (View More, donate) */
  --ai2-lime: #a5cf47;
  --ai2-teal: #086c6c;

  /* Official App Inventor palette ----------------------------------------
     These are the five colors from the brand sheet, with the print builds
     they were specified in. Use these for anything new; --ai2-magenta and
     --ai2-teal above are older approximations kept so existing rules do not
     shift. */
  --ai2-brand-orange:  #f88d34;   /* C0  M62 Y97 K0  */
  --ai2-brand-lime:    #a5cf47;   /* C51 M0  Y72 K0  */
  --ai2-brand-magenta: #92267c;   /* C64 M85 Y0  K0  */
  --ai2-brand-slate:   #58585a;   /* C0  M0  Y0  K78 */
  --ai2-brand-teal:    #128ba8;   /* C85 M0  Y0  K51 */

  /* Very light tints of the same five, for card and panel backgrounds.
     Each keeps its brand hue and is flattened to 94.5% lightness, so the
     set reads as one family rather than five unrelated pastels. The -edge
     values are the same hues at 87.5% lightness, for hairlines. */
  --ai2-tint-orange:  #fbf0e7;
  --ai2-tint-lime:    #f4f9e9;
  --ai2-tint-magenta: #f9e9f6;
  --ai2-tint-slate:   #f1f1f1;
  --ai2-tint-teal:    #e7f7fb;

  --ai2-tint-orange-edge:  #f6ddc8;
  --ai2-tint-lime-edge:    #e6f2cc;
  --ai2-tint-magenta-edge: #f2ccea;
  --ai2-tint-slate-edge:   #dfdfdf;
  --ai2-tint-teal-edge:    #c8edf6;

  /* Hero slide field -------------------------------------------------------
     The flat colour beside the photo on the split slides, set to the official
     orange. Headline text on it must be --ai2-slide-field-ink: brand magenta
     on this orange is only 3.17:1, which fails AA for body text, while the
     ink is 7.53:1.

     To soften the band to a tint instead, change these three to
     --ai2-tint-orange / rgba(251,240,231,0) / --ai2-brand-magenta. The
     magenta headline reads 6.71:1 on the tint. */
  --ai2-slide-field: var(--ai2-brand-orange);
  --ai2-slide-field-fade: rgba(248, 141, 52, 0);
  --ai2-slide-field-ink: var(--ai2-ink);

  /* The green of the homepage stat circles, matched to the ones on
     appinventor.org. Ink text on it is well above AA. */
  --ai2-impact-green: #bbda73;

  /* Darkened brand hues that pass contrast as text on their own tint. */
  --ai2-brand-lime-text: #4e6817;
  --ai2-brand-teal-text: #0e7590;

  /* Display type ---------------------------------------------------------
     One face for the big friendly text on the homepage: the hero headlines,
     "App Inventor is the largest...", "Pick something to build" and its
     deck, and "News & Events".

     Poppins SemiBold: the same geometric family as the nav, the buttons and
     the body copy, one weight heavier. Fredoka (rounded, more playful) was
     the earlier default and is still one keystroke away.

     Loaded in _layouts/home.html. Preview alternatives with ?font=fredoka,
     nunito, baloo, lexend or quicksand on the URL. */
  --ai2-display-fallback: "Poppins", "Nunito", system-ui, sans-serif;
  --ai2-display-font: "Poppins", var(--ai2-display-fallback);
  --ai2-display-weight: 600;

  /* Neutrals ------------------------------------------------------------- */
  --ai2-ink: #12181f;             /* strongest text */
  --ai2-text: #495661;            /* default body/nav text */
  --ai2-text-muted: #6b7784;
  --ai2-rule: #e3e6e9;            /* hairline borders */
  --ai2-rule-soft: #f0f1f3;
  --ai2-surface: #ffffff;
  --ai2-surface-warm: #f5ecd3;    /* the cream band behind the stat counters */
  --ai2-surface-peach: #f8bd8b;   /* the promo panel band */

  /* Focus ---------------------------------------------------------------- */
  --ai2-focus: #0b57d0;

  /* Spacing scale -------------------------------------------------------- */
  --ai2-space-xs: 0.5rem;
  --ai2-space-sm: 1rem;
  --ai2-space-md: 1.5rem;
  --ai2-space-lg: 2.5rem;
  --ai2-space-xl: 4rem;

  /* Shape ---------------------------------------------------------------- */
  --ai2-radius-card: 1rem;
  --ai2-radius-pill: 999px;

  /* Layout --------------------------------------------------------------- */
  --ai2-max-width: 1280px;
}