/* Cicero Home — Tokens v2 (synced from Figma node 338:11679)
 * File: TA-Schools-Demo · yuQZwJTbt4oLudFXm0WSg6
 * Source: mcp__figma__get_design_context on 2026-04-22.
 */

:root {
  /* Surfaces */
  --surface-container: #FFFFFF;
  --surface-stage: #FFFFFF;

  /* Text — Figma uses pure black + low-alpha black for subtle text */
  --text-primary: #000000;                       /* title */
  --text-secondary: rgba(0, 0, 0, 0.3);          /* subtitle, chip text, tag */

  /* Photo card (media frame) */
  --photo-w: 178px;
  --photo-radius: 32px;
  --photo-border-outer: rgba(0, 0, 0, 0.1);      /* 1px outer hairline */
  --photo-border-inner: rgba(255, 255, 255, 0.3);/* 2px inner highlight */
  --photo-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  --photo-overlay-icon: rgba(255, 255, 255, 0.9);

  /* Chip */
  --chip-bg: #FFFFFF;
  --chip-border: rgba(0, 0, 0, 0.1);
  --chip-radius: 10px;
  --chip-pad-y: 2px;
  --chip-pad-x: 5px;

  /* Buttons
   * The 60px container is a TRANSPARENT hit area. The visible
   * filled/stroked circle is 48.75px, centered inside. Padding ≈ 5.625px
   * per side. Keeps hit target generous while the visual stays compact.
   */
  --btn-size: 60px;                              /* hit area */
  --btn-visible-size: 48.75px;                   /* rendered circle */
  --btn-inset: 5.625px;                          /* (60 - 48.75) / 2 */
  --btn-filled-bg: #0A0A0A;
  --btn-filled-ink: #FFFFFF;
  --btn-ghost-border: rgba(0, 0, 0, 0.2);
  --btn-ghost-ink: rgba(0, 0, 0, 0.5);

  /* Reserved strong accent (not used on Place card yet) */
  --accent-strong: #0040FF;

  /* Media placeholder (gray while no real photo) */
  --media-placeholder: #E5E5E7;

  /* Card dimensions */
  --card-w: 334px;
  --card-h: 218px;
  --card-gap: 9px;

  /* Info card (right column) */
  --info-w: 147px;
  --info-gap: 11px;                              /* between info-block and button */
  --info-block-gap: 9px;                         /* between hook-and-name and chip */
  --info-hook-gap: 8px;                          /* between title and subtitle */
  --info-hook-pl: 5px;                           /* nudges title/subtitle right */

  /* Rome metro line colors (Move card) */
  --metro-a: #F47D4A;                             /* Rome Line A — orange */
  --metro-b: #0091D4;                             /* Rome Line B — blue  */
  --metro-c: #00AA5A;                             /* Rome Line C — green */

  /* Next Up (single + selector share these) */
  --nextup-frame: #BFD9FF;                        /* dashed highlight border */
  --nextup-frame-width: 1.58px;
  --nextup-frame-radius: 58px;                    /* outer, > tile-radius so corners nest */

  /* Next Up selector (tiles) */
  --tile-bg: #F8F9FC;
  --tile-bg-selected: #FFFFFF;
  --tile-border-selected: #1A1D24;
  --tile-ink: #1A1D24;
  --tile-min-ink: #B8B2AA;
  --tile-radius: 50px;                            /* aggressive — perceived parity with Place photo */
  --suggested-label: rgba(122, 122, 122, 0.4);

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale (retained for stage/header use) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --divider: #ECECEE;
}