/* ==========================================================================
   TERROSHI — design tokens + base styles for all mockups
   Light mode only. Link this file from every mockup: <link rel="stylesheet" href="./tokens.css">
   Read design/mockups/README.md for the direction and usage rules.
   ========================================================================== */

:root {
  /* ---- Color: surfaces (warm paper — never pure gray) ---- */
  --paper:        #FDFAF4;  /* app background */
  --paper-raised: #FFFFFF;  /* cards, sheets */
  --paper-sunken: #F4EDE2;  /* wells, inactive meters, input fields */
  --map-tint:     #ECEFE0;  /* map canvas (pale sage) */
  --map-park:     #D9E4C8;  /* park shapes on map */
  --map-water:    #CBDFE2;  /* water shapes on map */
  --map-road:     #FFFFFF;  /* roads on map */
  --line:         #EBE1D2;  /* hairline borders, dividers */

  /* ---- Color: ink (espresso, not black) ---- */
  --ink:       #34271B;  /* primary text */
  --ink-soft:  #6F5D4B;  /* secondary text */
  --ink-faint: #A2907C;  /* tertiary text, placeholders, disabled */
  --ink-inverse: #FFF9EE; /* text on dark/filled surfaces */

  /* ---- Color: brand (cedar green — the Visit verb, links, progress) ---- */
  --verdant:       #256C4F;
  --verdant-deep:  #1B5138;  /* pressed states, small text on tint */
  --verdant-tint:  #E2EFE3;  /* fills, promotion band */

  /* ---- Color: crown / Keeper (gold — the emotional center) ---- */
  --crown:      #E5A81F;  /* badge fill, map crowns */
  --crown-deep: #9E6E06;  /* crown text, icon strokes — passes on tint */
  --crown-tint: #FBF0D2;  /* crowned-row wash, keeper pill */

  /* ---- Color: streak (ember) ---- */
  --ember:      #D95B21;
  --ember-deep: #A93F10;
  --ember-tint: #FBE7DA;

  /* ---- Color: league semantics ---- */
  --promote:      var(--verdant);       /* promotion = brand green */
  --promote-tint: var(--verdant-tint);
  --relegate:      #AE5233;             /* muted clay — warm, never alarm-red */
  --relegate-tint: #F6E4DA;

  /* ---- Color: canvas behind the phone frames ---- */
  --canvas: #E8E2D7;

  /* ---- Type ---- */
  --font-display: ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  --text-xs:   11px;  /* eyebrows, timestamps */
  --text-sm:   13px;  /* captions, pill labels, meta */
  --text-base: 15px;  /* body */
  --text-md:   17px;  /* row titles, buttons */
  --text-lg:   22px;  /* section heads, sheet titles */
  --text-xl:   28px;  /* screen titles */
  --text-2xl:  40px;  /* hero numbers (gaps, counts, points) */

  /* ---- Spacing (4-base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ---- Radius (squishy, generous) ---- */
  --radius-sm:   10px;  /* small chips, inputs */
  --radius-md:   16px;  /* inner blocks, list groups */
  --radius-lg:   22px;  /* cards, sheets */
  --radius-full: 999px; /* pills, buttons, badges, meters */

  /* ---- Shadows (espresso-tinted, never gray-black) ---- */
  --shadow-card:  0 1px 2px rgba(56, 37, 19, 0.05), 0 6px 18px rgba(56, 37, 19, 0.07);
  --shadow-float: 0 2px 4px rgba(56, 37, 19, 0.10), 0 12px 28px rgba(56, 37, 19, 0.16);
  --shadow-crown: 0 2px 10px rgba(229, 168, 31, 0.35);
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); }

a { color: var(--verdant); text-decoration: none; font-weight: 600; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
svg { display: block; }

/* Big rounded numeral — the typographic signature. Use for gaps, counts, points. */
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Uppercase tracked label above a card or section ("YOUR LEAGUE", "KEEPER") */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.text-soft  { color: var(--ink-soft); }
.text-faint { color: var(--ink-faint); }
.text-sm    { font-size: var(--text-sm); }

/* ==========================================================================
   Components
   ========================================================================== */

/* ---- Card: the default raised surface ---- */
.card {
  background: var(--paper-raised);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

/* ---- Pill: small status/label capsule ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--paper-sunken);
  color: var(--ink-soft);
}
.pill--crown    { background: var(--crown-tint);    color: var(--crown-deep); }
.pill--streak   { background: var(--ember-tint);    color: var(--ember-deep); }
.pill--promote  { background: var(--promote-tint);  color: var(--verdant-deep); }
.pill--relegate { background: var(--relegate-tint); color: var(--relegate); }

/* ---- Crown badge: circular gold mark of the Keeper.
       Sizes: default 28px; add .crown-badge--lg (40px) or .crown-badge--sm (20px, for map pins). */
.crown-badge {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  background: var(--crown);
  box-shadow: var(--shadow-crown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.crown-badge::before {
  content: "";
  width: 58%; height: 58%;
  background-color: #FFF7E0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.5l4.6 4L12 4.5l4.4 7 4.6-4-1.9 11.3a1 1 0 0 1-1 .7H5.9a1 1 0 0 1-1-.7L3 7.5z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 7.5l4.6 4L12 4.5l4.4 7 4.6-4-1.9 11.3a1 1 0 0 1-1 .7H5.9a1 1 0 0 1-1-.7L3 7.5z"/></svg>') center / contain no-repeat;
}
.crown-badge--lg { width: 40px; height: 40px; }
.crown-badge--sm { width: 20px; height: 20px; box-shadow: none; }

/* ---- Goal row: one near goal (UX law: 3 nearest goals lead the home screen).
       Markup: .goal-row > (icon/.crown-badge) + .goal-row__body > (.goal-row__text + .goal-row__meter > .goal-row__fill) ---- */
.goal-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
.goal-row + .goal-row { border-top: 1px solid var(--line); }
.goal-row__body { flex: 1; min-width: 0; }
.goal-row__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
}
.goal-row__text strong { color: var(--verdant-deep); }
.goal-row__meter {
  margin-top: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--paper-sunken);
  overflow: hidden;
}
.goal-row__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--verdant);
}
.goal-row__fill--crown  { background: var(--crown); }
.goal-row__fill--streak { background: var(--ember); }

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 15px var(--space-6);
  border-radius: var(--radius-full);
  background: var(--verdant);
  color: var(--ink-inverse);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  box-shadow: var(--shadow-float);
}
.btn-primary:active { background: var(--verdant-deep); }
.btn-primary--disabled { background: var(--paper-sunken); color: var(--ink-faint); box-shadow: none; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px var(--space-4);
  border-radius: var(--radius-full);
  background: var(--paper-sunken);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* ---- List row: standings, podiums, friends board.
       Markup: .list-row > .list-row__rank + .avatar + .list-row__body + trailing content.
       Add .list-row--you for the current player's highlighted row. ---- */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}
.list-row + .list-row { border-top: 1px solid var(--line); }
.list-row__rank {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--ink-faint);
  width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.list-row__body { flex: 1; min-width: 0; }
.list-row__name { font-weight: 700; font-size: var(--text-base); }
.list-row__meta { font-size: var(--text-sm); color: var(--ink-soft); }
.list-row--you {
  background: var(--verdant-tint);
  border-radius: var(--radius-md);
  border-top: none !important;
}
.list-row--you + .list-row { border-top: none; }

/* ---- Avatar: initials on a warm disc (vary --avatar-bg inline per person) ---- */
.avatar {
  --avatar-bg: var(--paper-sunken);
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--avatar-bg);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  flex: none;
}
.avatar--sm { width: 26px; height: 26px; font-size: var(--text-xs); }

/* ---- League cutoff line: dashed separator between promote/stay/relegate zones ---- */
.cutoff {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.cutoff::before, .cutoff::after { content: ""; flex: 1; border-top: 2px dashed currentColor; opacity: 0.4; }
.cutoff--promote  { color: var(--verdant); }
.cutoff--relegate { color: var(--relegate); }

/* ---- Tab bar: the v1 persistent navigation — exactly three tabs: Map / League / You.
       Top-level screens only (Wire ships in v1.1 and is NOT in this bar; the spot
       sheet and onboarding screens carry no tab bar). Home-indicator-safe padding
       is built in via the .home-indicator block below the items.
       Markup, as the last child of .screen (or of the map overlay):
       <div class="tab-bar-wrap">
         <nav class="tab-bar">
           <span class="tab-bar__item [tab-bar__item--active]">(inline svg icon) Label</span>
           ... ×3
         </nav>
         <div class="home-indicator"></div>
       </div> ---- */
.tab-bar-wrap {
  flex: none;
  position: relative;
  z-index: 3;
  background: var(--paper-raised);
  border-top: 1px solid var(--line);
  border-radius: 0 0 44px 44px; /* matches .screen corner radius */
}
.tab-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: var(--space-2) var(--space-4) 0;
}
.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--space-1) var(--space-3);
  color: var(--ink-faint);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
}
.tab-bar__item--active { color: var(--verdant); }

/* iOS home indicator — sits inside .tab-bar-wrap and provides its safe-area padding */
.home-indicator {
  width: 130px; height: 5px;
  border-radius: var(--radius-full);
  background: var(--ink);
  opacity: 0.18;
  margin: var(--space-2) auto 8px;
}

/* ==========================================================================
   iPhone frame convention — identical in every mockup
   Markup:
   <body>
     <div class="canvas">
       <figure class="frame">
         <div class="phone"><div class="screen"> ...390x844 screen content... </div></div>
         <figcaption class="frame__caption">Home — goal header</figcaption>
       </figure>
       ...more frames side by side...
     </div>
   </body>
   ========================================================================== */

.canvas {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-8);
  background: var(--canvas);
}
.frame { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.frame__caption {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
}
.phone {
  width: 390px;
  height: 844px;
  flex: none;
  border-radius: 54px;
  background: #2A2119;               /* bezel */
  padding: 10px;
  box-shadow: 0 24px 60px rgba(56, 37, 19, 0.28);
}
.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 44px;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Optional status bar strip at top of a screen */
.status-bar {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
}