/* ============================================================
   Urban Passport — Color Tokens   ·   Direction: "Daylight"
   A clean, bright, modern city-collection app. White canvas,
   crisp cool-neutral ink, one confident electric-blue brand,
   and a vivid 8-colour CATEGORY system (4 core + 4 expansion) that powers the
   collectible cards. Light, fresh, fun — built to be shared.
   ============================================================ */
:root {
  /* ---- Neutrals (cool, clean — the white app shell) ---- */
  --white:    #FFFFFF;
  --ink-900:  #14151A;   /* primary text — near-black, never pure #000   */
  --ink-700:  #3A3D45;   /* strong secondary text                        */
  --ink-500:  #6A6E78;   /* body / secondary                             */
  --ink-400:  #898E99;   /* meta / captions — real ratio on white ~3.28:1 @12px, FAILS AA for normal text below 18px/24px+ large-text threshold (measured, Portal W3 §5). Only safe for ≥18px or purely decorative, non-informational use; use --ink-500 (~4.89:1, AA-pass) for any body/meta/caption text. */
  --ink-300:  #AEB2BC;   /* disabled / placeholder                       */
  --ink-200:  #D7DAE0;   /* strong divider / control border              */
  --ink-100:  #E9EBEF;   /* hairline border                              */
  --ink-050:  #F3F4F6;   /* sunken wells, progress tracks                */
  --canvas:   #F7F8FA;   /* optional grouped/section background          */

  /* ---- Dark surface (collectible card backs, hero, map pins) ---- */
  --slate-900: #0E0F14;  /* deepest dark card / hero field               */
  --slate-800: #181A22;  /* raised dark surface                          */
  --slate-700: #262932;  /* dark hairline / control on dark              */

  /* ---- Dark PRODUCT canvas & gradient atmosphere (from tokens.ts / App.html) ---- */
  --void-900: #090A10;   /* app canvas — the near-black behind every product screen */
  --void-800: #050608;   /* phone chrome / deepest scrim                  */
  --surface-dark-3: #16171D; /* raised dark sheet / confirm card          */
  --violet-700: #5B3CE0; --violet-500: #7B5CFF; --violet-300: #9B7BFF; /* 2nd gradient hue (Live Games, avatar, hero) */
  --cover-1: #1B1D4A; --cover-2: #2A1F52; --cover-3: #141233; /* passport/home hero indigo gradient */
  --map-1: #11203F; --map-2: #0C1830; --map-3: #0A1226;       /* explore map dark-navy gradient */

  /* ---- Brand — electric cobalt (the one chromatic signal) ---- */
  --blue-700: #1B3CC2;   /* pressed / active                             */
  --blue-600: #2247E0;   /* hover                                        */
  --blue-500: #3A66FF;   /* PRIMARY brand                                */
  --blue-300: #9DB4FF;   /* light brand on dark / decorative             */
  --blue-100: #E9EEFF;   /* soft brand fill (chips, focus ring)          */
  --blue-text: #2147DB;  /* AA-safe brand text on white (~5.2:1)         */

  /* ---- Category palette — 11-key set (Kategorie-Welle #54, 2026-07-05) ----
     Hex verbatim from apps/mobile/src/theme/tokens.ts (the token SoT).
     Each has: fill · -soft tint (light wash) · -text (AA ≥4.5:1 on white)
     · -ondark (AA ≥4.5:1 on #27272D dark chips).

     LAW — dot/ring + ink canon (Systementscheid Enno/up-design-master,
     2026-07-24, Web-Token-Ticket): `-text` is AA-attested against WHITE
     ONLY. On its own `-soft` fill 7 of 11 categories measure below 4.5:1
     (food 4.02, market 4.28, placestobe 3.77, history 3.70, nature 4.03,
     pop 3.48, sport 3.71). Therefore a colored fill is NEVER a text
     carrier: chips/badges keep label text at --ink-900 (light surfaces)
     or --white (dark surfaces); the category/team color runs through a
     decorative dot, a ring border, or the -soft fill behind ink text.
     Do NOT darken -soft to chase AA — these hex are verbatim from the
     app token SoT; forking them would split web from app identity.
     Reference implementations: web/portal/builder/index.html catChip
     (white chip + color dot) and teamChip (-soft fill + solid ring +
     ink letter). */
  --c-art:        #FF2E7E; --c-art-soft:        #FFE3EE; --c-art-text:        #C41E62; --c-art-ondark:        #FF6FA6; /* Street & Public Art — hot pink */
  --c-food:       #FF6A2C; --c-food-soft:       #FFE3D6; --c-food-text:       #B8530A; --c-food-ondark:       #FF8A52; /* Food & Coffee — tangerine */
  --c-music:      #6A4BFF; --c-music-soft:      #EAE4FF; --c-music-text:      #5B3FD6; --c-music-ondark:      #A892FF; /* Music History — violet */
  --c-market:     #1B9E4B; --c-market-soft:     #D7F0E0; --c-market-text:     #1F7D42; --c-market-ondark:     #3BC873; /* Markets — green */
  --c-arch:       #F0A81E; --c-arch-soft:       #FCEED2; --c-arch-text:       #9A6011; --c-arch-ondark:       #F0A81E; /* Architecture — amber */
  --c-placestobe: #2BA8F0; --c-placestobe-soft: #D7EEFB; --c-placestobe-text: #207DB3; --c-placestobe-ondark: #4FB8F5; /* Places to Be — sky blue */
  --c-history:    #A98B63; --c-history-soft:    #EFE7DA; --c-history-text:    #8B7252; --c-history-ondark:    #C7A87E; /* City History — warm taupe */
  --c-darkhistory:#8E3A52; --c-darkhistory-soft:#F3DDE3; --c-darkhistory-text:#8E3A52; --c-darkhistory-ondark:#E58AA0; /* Dark History — wine */
  --c-nature:     #93D420; --c-nature-soft:     #E9F7D2; --c-nature-text:     #5A8214; --c-nature-ondark:     #B6E85A; /* Nature — leaf green */
  --c-pop:        #D633C4; --c-pop-soft:        #F8D9F4; --c-pop-text:        #CB30B9; --c-pop-ondark:        #EE7ADD; /* Pop Culture — magenta */
  --c-sport:      #DC2626; --c-sport-soft:      #FBDADA; --c-sport-text:      #DC2626; --c-sport-ondark:      #F26D62; /* Sport — red */
  /* Groups & Classes accent — deliberate reuse of the Architecture ambers.
     Export reference: home "Live games" eyebrow + groups audience card use
     #9A6011/#FCEED2 (web/index.html:485/547). Semantic alias, not a category. */
  --c-groups-soft: var(--c-arch-soft); --c-groups-text: var(--c-arch-text);

  /* Retired category names → nearest current slot (legacy compat) */
  --c-hidden:     var(--c-placestobe);  --c-hidden-soft: var(--c-placestobe-soft);
  --c-view:       var(--c-placestobe);  --c-view-soft:   var(--c-placestobe-soft);
  --c-night:      var(--c-pop);         --c-night-soft:  var(--c-pop-soft);

  /* ---- Rarity tiers (card grade) ---- */
  --r-common:  #9AA0AD;  /* slate                                        */
  --r-rare:    #3A66FF;  /* blue                                         */
  --r-epic:    #B14BFF;  /* purple                                       */
  --r-legend:  #E7A93B;  /* gold (gets the foil sheen)                   */

  /* ---- Semantic status ---- */
  --green-500: #11A36B;  /* collected / verified                         */
  --green-100: #DDF3E9;
  --green-700: #0F6B3F;  /* AA-safe status TEXT on --green-100 (~5.58:1) and --white (~6.43:1) — Portal W3, --green-500 text on --green-100 measured ~2.79:1 (FAIL) */
  --amber-500: #F2A30A;  /* warning                                      */
  --amber-text:#8A5A10;  /* AA warning text on white                     */
  --red-500:   #F2384A;  /* error / danger                               */
  --red-100:   #FDE0E3;
  --red-700:   #8A1F11;  /* AA-safe status TEXT on --red-100 (~7.68:1) and --white (>7:1) — Portal W3, --red-500 text on --red-100 measured ~3.12:1 (FAIL); identical to the pre-existing hardcoded web/portal/index.html .pmsg[data-tone=error] value, now formalized as a token */

  /* ================= SEMANTIC ALIASES ================= */
  /* surfaces */
  --surface-page:    var(--white);
  --surface-card:    var(--white);
  --surface-sunken:  var(--ink-050);
  --surface-alt:     var(--canvas);
  --surface-dark:    var(--slate-900);
  --surface-dark-2:  var(--slate-800);

  /* text */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-500);
  --text-subtle:   var(--ink-400);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: #AAB0BE;

  /* lines & borders */
  --border-hairline: var(--ink-100);
  --border-strong:   var(--ink-200);

  /* brand + action */
  --brand:        var(--blue-500);
  --brand-hover:  var(--blue-600);
  --brand-press:  var(--blue-700);
  --brand-soft:   var(--blue-100);
  --brand-text:   var(--blue-text);
  --on-brand:     var(--white);

  /* the collect / share signals */
  --collect:      var(--blue-500);   /* primary "collect it" CTA          */
  --collect-press:var(--blue-700);
  --collected:    var(--green-500);  /* the confirmed "you got it" state  */
  --seal:         var(--r-legend);   /* completed-set gold seal           */

  /* status */
  --positive: var(--green-500);
  --warning:  var(--amber-500);
  --danger:   var(--red-500);
  --near-miss: var(--brand);         /* "1 away" nudge uses brand blue     */

  /* ---- LEGACY COMPAT (old "Atlas" names → clean values) ----
     Kept so any un-migrated reference still renders on-brand.
     Prefer the semantic aliases above in new work. */
  --paper:        var(--white);
  --paper-raised: var(--white);
  --paper-sunken: var(--ink-050);
  --paper-line:   var(--ink-100);
  --paper-edge:   var(--ink-200);
  --forest:       var(--blue-500);
  --forest-soft:  var(--blue-600);
  --forest-deep:  var(--slate-900);
  --forest-faint: var(--blue-100);
  --on-forest:    var(--white);
  --on-forest-muted: var(--text-on-dark-muted);
  --vermilion:      var(--blue-500);
  --vermilion-edge: var(--blue-300);
  --vermilion-deep: var(--blue-700);
  --vermilion-text: var(--blue-text);
  --vermilion-wash: var(--blue-100);
  --brass:      var(--r-legend);
  --brass-deep: #B9821F;
  --brass-soft: #FBEFD2;
  --ink:        var(--ink-900);
  --ink-muted:  var(--ink-500);
  --ink-subtle: var(--ink-400);
  --ink-faint:  var(--ink-300);
  --stamp:        var(--blue-500);
  --stamp-press:  var(--blue-700);
  --stamp-text:   var(--blue-text);
}