/* ─────────────────────────────────────────────────────────────
   RevUp Design System — colors & type
   Source of truth: Figma "Style-Guide-Designs" page.
   RevUp is a dark-first iOS app. Default surfaces are pure black
   with red accents and white type.
   ───────────────────────────────────────────────────────────── */

/* === Base tokens ============================================ */
:root {
  /* Brand — RED is the only chromatic brand color. */
  --revup-red:            #AF0C0C;   /* primary brand red, buttons, accent */
  --revup-red-press:      #800505;   /* press / touched state */
  --revup-red-logo:       #AE1F24;   /* the slash in the RevUp wordmark */
  --revup-red-soft:       #A52D3E;   /* tag pill 'Tuner' / influencer alt */
  --revup-red-shadow:     rgba(175,12,12,0.30); /* CTA glow */

  /* Yellow accent — used SPARINGLY (badges, COTW trophy, ratings) */
  --revup-gold:           #FFD700;
  --revup-gold-glow:      rgba(255,215,0,0.30);

  /* Mono — the system runs almost entirely on these. */
  --revup-white:          #F7F7F5;   /* "Main White" — body type on dark */
  --revup-white-2:        #E6E6E6;   /* "Secondary White" — quiet body */
  --revup-black:          #121212;   /* "Main Black" — app background */
  --revup-black-2:        #212121;   /* "Secondary Black" — surfaces */
  --revup-ink:            #161616;   /* input fill, slightly off black */
  --revup-card:           #131313;   /* card body */

  /* Greyscale (8 stops) — from the Style Guide. */
  --revup-grey-800:       #424242;
  --revup-grey-700:       #616161;
  --revup-grey-600:       #757575;
  --revup-grey-500:       #9E9E9E;
  --revup-grey-400:       #BDBDBD;
  --revup-grey-300:       #E0E0E0;
  --revup-grey-200:       #EEEEEE;
  --revup-grey-100:       #F5F5F5;
  --revup-grey-50:        #FAFAFA;

  /* State colors */
  --revup-info:           #0063F7;
  --revup-warning:        #FFCC00;
  --revup-error:          #FF3B3B;
  --revup-success:        #06C270;

  /* === Semantic — DARK (default) ============================ */
  --bg:                   var(--revup-black);
  --bg-elevated:          var(--revup-card);
  --bg-input:             var(--revup-ink);
  --bg-chip:              transparent;
  --bg-chip-selected:     var(--revup-black-2);

  --fg-1:                 var(--revup-white);        /* primary type */
  --fg-2:                 var(--revup-white-2);      /* body, 0.7 opacity by default */
  --fg-3:                 var(--revup-grey-500);     /* placeholder, meta */
  --fg-4:                 var(--revup-grey-700);     /* dim icon (inactive nav) */

  --accent:               var(--revup-red);
  --accent-fg:            var(--revup-white);

  --border:               var(--revup-black-2);
  --border-strong:        var(--revup-grey-800);
  --divider:              var(--revup-black-2);

  /* Shadows */
  --shadow-card:          3px 3px 7px 0 rgba(0,0,0,0.30);
  --shadow-nav:           0 -4px 12.4px 0 rgba(0,0,0,0.25);
  --shadow-cta:           0 0 24px 0 var(--revup-red-shadow);
  --shadow-gold:          0 2px 8px 0 var(--revup-gold-glow);

  /* Radii */
  --r-input:              12px;
  --r-card:               10px;
  --r-card-lg:            12px;
  --r-pill:               28px;     /* chips & tags */
  --r-button:             12px;
  --r-avatar:             999px;

  /* Spacing — the system pads in steps of 4/5/10/15/20/30 */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              10px;
  --space-4:              15px;
  --space-5:              20px;
  --space-6:              30px;
  --space-7:              40px;
  --space-8:              60px;

  /* Heights */
  --h-input:              44px;
  --h-button:             44px;
  --h-nav:                72px;
  --h-status:             44px;
  --h-header:             54px;  /* status (44) + 10 to back arrow row */

  /* Type — Inter is the workhorse. Open Sans Bold for buttons.
     Nexa Heavy for the logo wordmark "RevUP". */
  --font-sans:            "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-button:          "Open Sans", "Inter", system-ui, sans-serif;
  --font-display:         "Nexa", "Archivo", "Inter", system-ui, sans-serif;
  --font-mono:            ui-monospace, "SF Mono", Menlo, monospace;
}

/* === Light variant ========================================== *
 * NOTE: RevUp ships dark-only today. These tokens flip in case
 * a light surface is needed (e.g. printed style-guide page bg).
 */
[data-theme="light"] {
  --bg:                   var(--revup-white);
  --bg-elevated:          #FFFFFF;
  --bg-input:             var(--revup-grey-100);
  --bg-chip-selected:     var(--revup-black);
  --fg-1:                 var(--revup-black);
  --fg-2:                 #3A3A3C;
  --fg-3:                 var(--revup-grey-600);
  --fg-4:                 var(--revup-grey-500);
  --border:               var(--revup-grey-200);
  --border-strong:        var(--revup-grey-400);
  --divider:              var(--revup-grey-200);
}

/* === Type scale ============================================= *
 * From Figma counts: Inter Regular & Bold dominate.
 * Sizes used in app (px): 10, 12, 14, 16, 18, 22, 24, 28, 48, 64, 160.
 */
:root {
  /* Numbered text styles ---------------------------------- */

  /* Display — section "01 / 02 / 03" giant numbers on guide pages */
  --t-mega-size:          160px;
  --t-mega-weight:        700;
  --t-mega-line:          1;
  --t-mega-color:         #F0EBEB;   /* off-white ghost */

  /* H1 — guide section title in red ("Color", "Grids & Buttons") */
  --t-h1-size:            64px;
  --t-h1-weight:          700;
  --t-h1-line:            1;
  --t-h1-track:           0.01em;
  --t-h1-color:           var(--revup-red);

  /* H2 — in-app screen titles ("Verify Yourself!", "Select Pictures") */
  --t-h2-size:            24px;
  --t-h2-weight:          700;
  --t-h2-line:            1.0;
  --t-h2-color:           var(--fg-1);

  /* H3 — section labels ("Brand Colors", "State Colors") */
  --t-h3-size:            20px;
  --t-h3-weight:          700;
  --t-h3-line:            1;
  --t-h3-color:           var(--fg-1);

  /* Nav title — sticky header text ("Registration", "Tags") */
  --t-nav-size:           18px;
  --t-nav-weight:         700;
  --t-nav-color:          var(--fg-1);

  /* Body — paragraph copy under titles. Always 0.7 opacity. */
  --t-body-size:          16px;
  --t-body-weight:        400;
  --t-body-line:          1;
  --t-body-color:         var(--revup-white-2);
  --t-body-opacity:       0.7;

  /* Body strong — names, list rows */
  --t-bodybold-size:      16px;
  --t-bodybold-weight:    700;
  --t-bodybold-color:     var(--fg-1);

  /* Label — small bold ("Posts", "Auctions") + tags */
  --t-label-size:         14px;
  --t-label-weight:       700;
  --t-label-color:        var(--fg-1);

  /* Input / placeholder */
  --t-input-size:         14px;
  --t-input-weight:       400;
  --t-input-color:        var(--fg-1);
  --t-input-placeholder:  var(--revup-grey-700);

  /* Caption — counts, meta, "554 Following" */
  --t-caption-size:       10px;
  --t-caption-weight:     400;
  --t-caption-color:      var(--revup-grey-700);

  /* Caption bold — numeric counts */
  --t-captionbold-size:   10px;
  --t-captionbold-weight: 700;
  --t-captionbold-color:  var(--fg-1);

  /* Button label */
  --t-button-size:        16px;
  --t-button-weight:      700;
  --t-button-family:      var(--font-button);
  --t-button-line:        16px;
  --t-button-track:       0;
}

/* === Element defaults ======================================= */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .t-h1 { font: var(--t-h1-weight) var(--t-h1-size)/var(--t-h1-line) var(--font-sans); color: var(--t-h1-color); letter-spacing: var(--t-h1-track); margin: 0; }
h2, .t-h2 { font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-line) var(--font-sans); color: var(--t-h2-color); margin: 0; }
h3, .t-h3 { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-line) var(--font-sans); color: var(--t-h3-color); margin: 0; }
p,  .t-body { font: var(--t-body-weight) var(--t-body-size)/1.2 var(--font-sans); color: var(--t-body-color); opacity: var(--t-body-opacity); margin: 0; }
.t-body--solid { opacity: 1; }
.t-bodybold { font: var(--t-bodybold-weight) var(--t-bodybold-size)/1.2 var(--font-sans); color: var(--t-bodybold-color); }
.t-label    { font: var(--t-label-weight) var(--t-label-size)/1 var(--font-sans); color: var(--t-label-color); }
.t-caption  { font: var(--t-caption-weight) var(--t-caption-size)/1 var(--font-sans); color: var(--t-caption-color); }
.t-caption--bold { font-weight: 700; color: var(--fg-1); }
.t-input    { font: var(--t-input-weight) var(--t-input-size)/1 var(--font-sans); color: var(--t-input-color); }
.t-button   { font: var(--t-button-weight) var(--t-button-size)/var(--t-button-line) var(--t-button-family); }
.t-mega     { font: var(--t-mega-weight) var(--t-mega-size)/var(--t-mega-line) var(--font-sans); color: var(--t-mega-color); }
.t-display  { font: 800 36px/1 var(--font-display); letter-spacing: 0.02em; }

/* Selection */
::selection { background: var(--revup-red); color: var(--revup-white); }