/* ==========================================================================
   Nugle Design System — Colors + Typography
   Sourced directly from the Nugle app codebase (src/styles/colors.ts and
   hardcoded StyleSheet values throughout src/components & src/app).
   ========================================================================== */

/* -- Brand fonts ------------------------------------------------------- */
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham-BookItalic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham-ThinItalic.otf") format("opentype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham-UltraItalic.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("/fonts/Gotham-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: "Chillax"; src: url("/fonts/Chillax-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("/fonts/Chillax-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Chillax"; src: url("/fonts/Chillax-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Apple Garamond"; src: url("/fonts/AppleGaramond-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Apple Garamond"; src: url("/fonts/AppleGaramond-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Apple Garamond"; src: url("/fonts/AppleGaramond.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Apple Garamond"; src: url("/fonts/AppleGaramond-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Apple Garamond"; src: url("/fonts/AppleGaramond-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* --------------------------------------------------------------------
     BRAND
     -------------------------------------------------------------------- */
  --nugle-blue:          #4A90E2;   /* PRIMARY_BLUE — tabs, buttons, links, all accents */
  --nugle-blue-hover:    #3B82F6;   /* cooler/brighter hover */
  --nugle-blue-dark:     #2F6FC2;   /* pressed */
  --nugle-blue-tint:     #E0F0FF;   /* identity-revealed avatar bg, soft chip fills */

  /* Hero gradient on app icon / share cards: radial, light center, dark edges */
  --nugle-hero-center:   #5AA0F5;
  --nugle-hero-edge:     #1E6FDC;

  /* --------------------------------------------------------------------
     NEUTRALS — hardcoded hex across the codebase (not tokenized upstream)
     -------------------------------------------------------------------- */
  --ink-0:               #000000;   /* primary buttons, black CTAs */
  --ink-1:               #111111;   /* densest body text / rank bubbles */
  --ink-2:               #1A1A1A;   /* card titles */
  --ink-3:               #333333;   /* close X, label text */
  --ink-4:               #555555;   /* empty-state subtitle */
  --ink-5:               #666666;   /* meta text, secondary labels */
  --ink-6:               #999999;   /* inactive tabs, muted captions */
  --ink-7:               #BDBDBD;   /* opponent-turn hourglass */
  --ink-8:               #CCCCCC;   /* chevron placeholders */

  --paper:               #FFFFFF;   /* default page and card background */
  --paper-alt:           #F8F8F8;   /* progress-bar container fill */
  --surface:             #F7F7F7;   /* leaderboard section fill */
  --surface-2:           #F5F5F5;   /* opponent-turn row */
  --surface-3:           #F0F0F0;   /* avatar fallback bg */
  --surface-4:           #F1F2F5;   /* "Add friend" ghost row */

  --hair:                #E1E8ED;   /* hairline table dividers */
  --hair-2:              #E5E5E5;   /* inbox row dividers */
  --hair-3:              #E8E8E8;   /* matchup row border */
  --hair-4:              #E0E0E0;   /* pill bg, progress track */
  --hair-5:              #D1D1D6;   /* minimal progress track */

  /* --------------------------------------------------------------------
     SEMANTIC — win/loss/alert states, observed in app screens
     -------------------------------------------------------------------- */
  --win:                 #34C759;   /* iOS green — progress-bar fill, +XP text */
  --win-bg:              #E8F5E9;   /* my-turn row background */
  --win-ink:             #4CAF50;   /* Agree pill text, countdown */

  --loss:                #FF3B30;   /* swipe-to-delete */
  --loss-bg:             #FDECEA;   /* (derived) loss row */

  --heart:               #E91E63;   /* heart/like active */
  --gold:                #D4AF37;   /* PRO lock badge */

  /* --------------------------------------------------------------------
     FOREGROUND / BACKGROUND SEMANTIC ALIASES
     -------------------------------------------------------------------- */
  --fg-1: var(--ink-1);           /* titles */
  --fg-2: var(--ink-5);           /* body secondary */
  --fg-3: var(--ink-6);           /* tertiary / inactive */
  --fg-inverse: var(--paper);

  --bg-1: var(--paper);
  --bg-2: var(--paper-alt);
  --bg-3: var(--surface);

  --border-hair: var(--hair-2);
  --border-card: var(--hair-3);

  --accent:           var(--nugle-blue);
  --accent-on:        var(--paper);

  /* --------------------------------------------------------------------
     TYPOGRAPHY — Nugle brand fonts (ship with project)
     Three families in the brand kit:
       • Gotham   — display + heavy-sans headlines (hero "beat any debater")
       • Apple Garamond — italic accent inside hero pairings ("famous", "case")
       • Chillax  — supporting sans for UI body + captions
     The in-app RN runtime falls back to SF Pro; on the web we use the brand
     fonts directly. System fonts are a safety fallback only.
     -------------------------------------------------------------------- */
  --font-display: "Gotham", -apple-system, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans:    "Chillax", -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-accent:  "Apple Garamond", "Garamond", "Times New Roman", serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weight scale — Gotham Black is 900 for hero; Gotham Ultra Italic is 800;
     Chillax tops at 700 bold. Body copy uses Chillax 600 semibold for emphasis. */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;

  /* Letter-spacing — only labels use positive tracking */
  --tracking-label: 0.1em;   /* "RHETORIC ARENA", "INBOX" tabs */
  --tracking-cta:   0.05em;  /* "ENTER" button */

  /* --------------------------------------------------------------------
     RADII  (observed values, densest → pill)
     -------------------------------------------------------------------- */
  --r-xs:  4px;    /* label pills, tiny badges */
  --r-sm:  8px;    /* action buttons */
  --r-md:  12px;   /* small cards, rank row hover */
  --r-lg:  16px;   /* modal cards, CTA pill start, leaderboard section */
  --r-xl:  20px;   /* matchup rows */
  --r-2xl: 24px;   /* primary CTA pill */
  --r-3xl: 30px;   /* swipe actions, big pills */
  --r-full: 9999px;

  /* --------------------------------------------------------------------
     SHADOWS  — the codebase is shadow-light; used sparingly on CTAs only
     -------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);            /* leaderboard section */
  --shadow-cta-blue: 0 4px 8px rgba(74, 144, 226, 0.30);   /* start screen ENTER */

  /* --------------------------------------------------------------------
     SPACING — 4pt scale observed across the app (4, 8, 12, 16, 20, 24…)
     -------------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
}


/* ==========================================================================
   SEMANTIC TYPE STYLES — ready-to-use classes
   Pixel values lifted from app StyleSheets (inbox, forum-card, pick-topic,
   points-progress, leaderboard-card, start).
   ========================================================================== */

.n-display-hero {
  /* App Store screenshots: "beat any famous debater", "make your case" */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.95;
  color: var(--paper);
  text-wrap: balance;
}

.n-display-accent {
  /* The italic word in hero pairings — "famous", "case", "level" */
  font-family: var(--font-accent);
  font-weight: var(--fw-regular);
  font-style: italic;
  font-size: clamp(44px, 7.4vw, 80px);
  line-height: 1;
  color: var(--paper);
  letter-spacing: -0.005em;
}

.n-h1 {
  /* "THE RHETORIC ARENA" block title inside app */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}

.n-h2 {
  /* Arena subhead: "Pick a fight to elevate." */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink-0);
}

.n-h3 {
  /* Forum card title */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 17px;
  line-height: 22px;
  color: var(--ink-2);
}

.n-tab {
  /* INBOX / PLAY / FRIENDS */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-6);
}
.n-tab.is-active { color: var(--nugle-blue); }

.n-eyebrow {
  /* "RHETORIC ARENA" label above h2 */
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 13px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-6);
}

.n-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-5);
}

.n-body-strong {
  font-family: var(--font-sans);
  font-weight: var(--fw-semi);
  font-size: 15px;
  line-height: 21px;
  color: var(--ink-2);
}

.n-meta {
  /* heart count, participant count, timestamps */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 14px;
  color: var(--ink-5);
}

.n-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: 12px;
  line-height: 20px;
  color: var(--ink-5);
}

.n-mono {
  font-family: var(--font-mono);
  font-size: 24px;
  letter-spacing: 0.1em;
}

.n-cta {
  /* Black pill buttons + blue ENTER */
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 16px;
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}