/*
  Design tokens for the Studio Stem link-in-bio page.
  Mirrors the Figma "Link-in-bio (Claude)" frame (node 1:2), read directly
  via the Figma MCP get_design_context / get_variable_defs on 2026-08-26.
*/

:root {
  /* ---- Color: brand ---- */
  --color-brand-orange: #f05820;

  /* ---- Color: ink / neutrals ---- */
  --color-ink-900: #000000;
  --color-ink-700: #4a4038;
  --color-ink-400: #8c8078;
  --color-surface-0: #000000;
  --color-surface-cream: #f1e0da;
  --color-surface-cream-hover: #eacec4;
  --color-surface-dark: #85746d;

  /* ---- Color: tag pills (hero) ---- */
  /* Figma: transparent fill, 1px solid black border, black text.
     Active pill: black fill, brand-orange text. */
  --color-pill-border: #000000;
  --color-pill-text: #000000;
  --color-pill-active-bg: #000000;
  --color-pill-active-text: var(--color-brand-orange);

  /* ---- Color: icon chips (link buttons) ---- */
  --color-chip-bg: #000000;
  --color-chip-icon: #f1e0da;

  /* ---- Radius ---- */
  --radius-pill: 999px;
  --radius-lg: 16px;

  /* ---- Spacing (only used outside the proportionally-scaled card — see
     --px in components.css for the hero/link-button/portfolio sizing) ---- */
  --space-2: 8px;
  --space-8: 40px;

  /* ---- Typography ---- */
  --font-base: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", sans-serif;

  /* ---- Layout ---- */
  --page-max-width: 460px;
  --shadow-card: 0 1px 2px rgba(23, 19, 15, 0.04);
}