/* ============================================================
   hoodtype.sh — Colors & Type
   Source of truth: app/globals.css (@theme) in 0xevm1/hoodtype.sh
   Brand: "Hood type shit" — Robinhood-style portfolio screenshots
          from any broker. Black + Robinhood-green.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400..900;1,14..32,400..800&display=swap");

:root {
  /* ---- Type families ----
     The product ships Inter as the primary face, falling back to
     SF Pro Display / system-ui. The share-code & QR card use a
     monospace face for the 5-char slug. */
  --font-sans:    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;

  /* ============================================================
     COLOR — light mode (default / the mockup canvas)
     Robinhood-mobile palette: white surface, near-black ink,
     signal green for gains, burnt orange for losses, gold for
     the paid "Verified" badge.
     ============================================================ */

  /* Neutrals / surfaces */
  --rh-bg:       #ffffff;   /* page + mockup canvas            */
  --rh-fg:       #0a0a0a;   /* primary ink                     */
  --rh-muted:    #6b7280;   /* secondary text, labels          */
  --rh-surface:  #f6f7f9;   /* cards, list rows, inputs        */
  --rh-border:   #e5e7eb;   /* hairlines, dividers, outlines   */

  /* Brand / signal greens */
  --rh-green:       #00c805; /* THE brand green — gains, CTAs   */
  --rh-green-soft:  #e7faea; /* green tints, active pills, fills*/
  --rh-green-dark:  #00a004; /* pressed / gradient deep stop    */

  /* Loss / destructive */
  --rh-red:       #ff5000;   /* losses, delete, down charts     */
  --rh-red-soft:  #ffe9de;   /* red tints, destructive headers  */

  /* Verified badge (paid $2 stamp) */
  --rh-gold:       #ffd96b;  /* gold gradient mid stop          */
  --rh-gold-deep:  #c79800;  /* gold gradient deep stop         */
  --rh-gold-bright:#ffe17d;  /* gold gradient bright stop       */

  /* Toast surface — a couple shades off the page bg */
  --rh-toast: #eef0f3;

  /* ============================================================
     SEMANTIC TYPE TOKENS
     Sizes mirror the production components (mobile-first, px).
     The big portfolio number scales 22→30px by digit-length.
     ============================================================ */

  /* Brand wordmark hero (homepage): "Hood" stacked over "type shit" */
  --t-wordmark-size:   48px;
  --t-wordmark-weight: 800;   /* font-extrabold                  */
  --t-wordmark-tracking: -0.02em;

  /* Portfolio value — the headline $ amount */
  --t-portfolio-size:   30px; /* shrinks to 22px for 8-figure $  */
  --t-portfolio-weight: 700;
  --t-portfolio-tracking: -0.02em;

  /* Section heads ("STOCKS", "OPTIONS", "RECENT ACTIVITY") */
  --t-section-size:    13px;
  --t-section-weight:  700;
  --t-section-tracking: 0.06em;   /* uppercase tracking-wider    */
  --t-section-transform: uppercase;

  /* Row title (ticker / asset name) */
  --t-row-title-size:   14px;
  --t-row-title-weight: 600;

  /* Row sub / meta (share count, dates) */
  --t-row-meta-size:    11px;
  --t-row-meta-weight:  400;

  /* Change line (▲ $310,600.00 (1045.79%)) */
  --t-change-size:   13px;
  --t-change-weight: 600;

  /* Body copy (marketing) */
  --t-body-size:   16px;
  --t-body-weight: 400;
  --t-body-leading: 1.5;

  /* Small print / disclaimers */
  --t-fine-size:   10px;
  --t-fine-weight: 400;

  /* Mono share code (/4d5ub) */
  --t-code-size:    31px;
  --t-code-weight:  700;
  --t-code-tracking: 0.04em;

  /* ============================================================
     RADII — Robinhood leans on big, soft rounding
     ============================================================ */
  --radius-pill:   999px;   /* buttons, chips, badges          */
  --radius-card:   28px;    /* the mockup frame, modals         */
  --radius-list:   16px;    /* list containers, recent cards    */
  --radius-row:    14px;    /* inset rows, inputs               */
  --radius-tile:   12px;    /* QR tile, small media             */

  /* ============================================================
     SPACING — the product is mobile-first; gutters are tight
     ============================================================ */
  --gutter:        20px;    /* page / card horizontal padding   */
  --gutter-list:   16px;    /* list-section padding             */

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-card:   0 1px 2px rgba(0,0,0,.04), 0 12px 32px -8px rgba(28,25,23,.28), 0 2px 8px rgba(28,25,23,.08);
  --shadow-mockup: 0 20px 50px -12px rgba(0,0,0,.18);
  --shadow-green:  0 10px 24px -10px rgb(0 200 5 / .45);
  --shadow-gold:   inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(120,90,0,.25);
}

/* ============================================================
   DARK MODE — the app honors prefers-color-scheme. The mockup
   canvas flips to true-black (OLED), green goes neon.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --rh-bg:      #000000;
    --rh-fg:      #f5f5f5;
    --rh-muted:   #8c8c8c;
    --rh-surface: #0e0e0e;
    --rh-border:  #1c1c1c;
    --rh-green:      #00f56a;
    --rh-green-soft: #0a2a14;
    --rh-red:        #ff5000;
    --rh-red-soft:   #2a1108;
    --rh-gold:       #ffd96b;
    --rh-toast:      #1f1f1f;
  }
}

/* ============================================================
   BASE ELEMENT STYLES (opt-in via the .ds-type scope so this
   file can be dropped into a card preview without nuking host
   styles)
   ============================================================ */
.ds-type, .ds-type :where(h1,h2,h3,h4,p,span,div,button,a) {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds-type .wordmark {
  font-weight: var(--t-wordmark-weight);
  letter-spacing: var(--t-wordmark-tracking);
  line-height: 1;
}
.ds-type .wordmark .hood { color: var(--rh-fg); }
.ds-type .wordmark .type { color: var(--rh-green); font-style: italic; }

.ds-type .portfolio-value {
  font-size: var(--t-portfolio-size);
  font-weight: var(--t-portfolio-weight);
  letter-spacing: var(--t-portfolio-tracking);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ds-type .section-head {
  font-size: var(--t-section-size);
  font-weight: var(--t-section-weight);
  letter-spacing: var(--t-section-tracking);
  text-transform: uppercase;
  color: var(--rh-muted);
}

.ds-type .code {
  font-family: var(--font-mono);
  font-size: var(--t-code-size);
  font-weight: var(--t-code-weight);
  letter-spacing: var(--t-code-tracking);
}