/* ==================================================================
   Postcards from Addis Ababa — design tokens
   Addis Ababa Tourism Commission

   Every value here comes from the AATC Brand & Communications Guide
   (© 2025), not from taste. Where the guide is silent the choice is
   marked and reasoned, so it can be checked rather than inherited.
   ================================================================== */

:root {
  color-scheme: light;

  /* ---- Palette · guide p.25, digital values -------------------------
     The guide also carries a separate CMYK palette on p.26 (#00465D
     and friends) for print. These two sets are not interchangeable and
     must never be mixed on the same artefact. These are the digital
     ones; the print set belongs on the physical postcards. */
  --msu-green:        #10383A;   /* Primary   · trust, growth, heritage */
  --gamboge:          #DAA112;   /* Secondary · warmth, energy          */
  --dolphin-gray:     #7F9276;   /* Accent 1                            */
  --aurometalsaurus:  #758886;   /* Accent 2                            */
  --axolotl:          #656E51;   /* Accent 3                            */

  /* ---- Proportion · guide p.27 --------------------------------------
     Three approved schemes, all 70/20/10, and gamboge is the 10% in
     every one of them. It is an accent and never a field. We use
     scheme three — 70% white, 20% MSU Green, 10% gamboge — because the
     photographs are the subject and a light ground lets them carry the
     page.

     Practically: white surfaces, green for type and structure, gamboge
     only for the single most important action on any given screen. If
     two things on a screen are gamboge, one of them is wrong. */

  /* ---- Tints, derived ----------------------------------------------
     Openly derived rather than pretending to be brand values. Each is
     the brand colour at a stated alpha over white, so they stay on
     palette under any blend. */
  --green-900: #0A2426;                    /* deeper green, for ink     */
  --green-700: var(--msu-green);
  --green-100: #E7EDEA;                    /* green at ~8% over white   */
  --green-050: #F4F7F5;

  --gamboge-lift: #F0B92B;                 /* gamboge lightened, on dark */
  --gamboge-deep: #C08F0F;                 /* gamboge pressed              */
  --gamboge-050:  #FDF6E3;                 /* gamboge at a whisper, for a
                                              background that flashes once */
  --gamboge-ink:  #8A6608;                 /* gamboge darkened, for text
                                              on white: ~5:1, which raw
                                              gamboge is not            */

  --sage-100: #EEF1EC;                     /* dolphin gray, very light   */
  --sage-200: #DDE3D8;

  /* ---- Semantic ----------------------------------------------------- */
  --surface:        #FFFFFF;
  --surface-sunk:   var(--green-050);
  --surface-invert: var(--msu-green);

  --ink:            var(--green-900);
  --ink-soft:       rgba(10, 36, 38, 0.70);
  --ink-faint:      rgba(10, 36, 38, 0.48);
  --ink-invert:     #FFFFFF;

  --line:           rgba(10, 36, 38, 0.13);
  --line-strong:    rgba(10, 36, 38, 0.26);

  --accent:         var(--gamboge);
  --accent-ink:     var(--gamboge-ink);
  --focus:          var(--msu-green);

  /* ---- Type · guide p.29–31 -----------------------------------------
     JUST Sans is the primary face; Shiromeda is the Amharic corporate
     face. The guide asks for Medium on headlines, and the licensed
     files supplied are Light, Regular and SemiBold — so headlines use
     SemiBold, which the guide also specifies for large format. Worth
     confirming whether a Medium weight can be supplied. */
  /* Shiromeda sits in the Latin stack as well, immediately after JUST
     Sans, because JUST Sans has no Ethiopic in it and the interface is
     bilingual. Without it the language button — which is the Amharic
     word for Amharic — rendered as four empty boxes on every device
     without an Ethiopic system font. It shipped that way for four
     rounds. */
  --font-sans: 'JUST Sans', 'Shiromeda', -apple-system, BlinkMacSystemFont,
               'Segoe UI', 'Noto Sans Ethiopic', Roboto, Helvetica, Arial, sans-serif;
  --font-eth:  'Shiromeda', 'Noto Sans Ethiopic', var(--font-sans);

  /* Fluid scale, 320px → 1280px. Ratio ~1.25 at the small end, opening
     to ~1.33 at the large, so headlines gain presence on a desktop
     without the body text drifting up with them. */
  /* The hero used to start at 2rem on a 320px phone, which with a
     two-line headline pushed the card — the entire argument of the
     page — below the fold. It starts smaller and opens up faster. */
  --t-hero:  clamp(1.65rem, 1.05rem + 3.0vw, 3.50rem);
  --t-h1:    clamp(1.60rem, 1.20rem + 2.0vw, 2.60rem);
  --t-h2:    clamp(1.25rem, 1.05rem + 1.0vw, 1.75rem);
  --t-lead:  clamp(0.95rem, 0.88rem + 0.5vw, 1.20rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.06;
  --lh-head:  1.15;
  --lh-body:  1.55;

  --track-caps: 0.14em;   /* small caps need it; body never does */

  /* ---- Space · 4px base --------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;

  /* Touch targets. 44px is the floor anything tappable may occupy. */
  --tap: 44px;

  /* ---- Elevation ----------------------------------------------------
     Two levels only. The card gets the deep one because it is the
     object; everything else is paper on a table. */
  --lift-1: 0 1px 2px rgba(10,36,38,0.06), 0 2px 8px rgba(10,36,38,0.06);
  --lift-2: 0 2px 6px rgba(10,36,38,0.10), 0 24px 56px -24px rgba(10,36,38,0.44);

  /* ---- Motion -------------------------------------------------------
     Fast enough to feel immediate, slow enough to read as physical.
     The card flip is the one deliberate exception. */
  --e-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --e-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --m-fast: 140ms;
  --m-base: 260ms;
  --m-slow: 560ms;

  --wrap: 74rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-fast: 0ms; --m-base: 0ms; --m-slow: 0ms; }
}