/* =====================================================
   FONT FACES
   ===================================================== */

@font-face {
  font-family: 'GoBold';
  src: url('/static/font/gobold.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'HelveticaThin';
  src: url('/static/font/helveticathin.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HelveticaMedium';
  src: url('/static/font/helveticamedium.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   ROOT TOKENS
   ===================================================== */

:root {
  /* ---------- FONT FAMILY ---------- */
  --font-brand: 'GoBold', sans-serif;
  --font-base: 'HelveticaThin', system-ui, sans-serif;
  --font-medium: 'HelveticaMedium', system-ui, sans-serif;

  /* ---------- FONT SIZE ---------- */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 20px;

  /* ---------- LETTER SPACING ---------- */
  --letter-tight: 0.02em;
  --letter-wide: 0.28em;

  /* ---------- COLORS ---------- */
  --color-bg: #f6f6f6;
  --color-surface: #ffffff;
  --color-glass: rgba(255, 255, 255, 0.78);

  --color-text-primary: #111111;
  --color-text-muted: #666666;
  --color-placeholder: #999999;

  --color-border-soft: rgba(0, 0, 0, 0.08);

  /* ---------- INTERACTION COLORS ---------- */
  --color-accent: #000000;
  --color-accent-text: #ffffff;

  --color-disabled-bg: #ffffff;
  --color-disabled-text: #999999;

  /* ---------- BORDER & FOCUS ---------- */
  --focus-outline: none;
  --focus-border: 1px solid var(--color-accent);
  --focus-webkit-ring: transparent;

  /* ---------- CURSOR ---------- */
  --cursor-default: default;
  --cursor-pointer: pointer;

  /* ---------- SPACING ---------- */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 22px;
  --space-xl: 30px;
  --space-xxl: 36px;
  --space-xxxl: 56px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---------- SHADOW ---------- */
  --shadow-brand: 0 2px 6px rgba(0, 0, 0, 0.08);

  /* ---------- EFFECT ---------- */
  --glass-blur: 18px;

  /* ---------- LAYOUT ---------- */
  --card-width: 420px;
}


:root {
  /* ---------- ERROR ---------- */
  --color-error: #d33;

  /* ---------- MOBILE FONT SCALE ---------- */
  --font-size-xs-mobile: 10px;
  --font-size-sm-mobile: 11px;
  --font-size-md-mobile: 14px;
  --font-size-lg-mobile: 18px;

  /* ---------- MOBILE SPACING ---------- */
  --space-page-mobile: var(--space-md);
  --space-card-mobile: var(--space-xl);
  --space-brand-mobile: var(--space-xl);

  /* ---------- MOBILE LAYOUT ---------- */
  --card-radius-mobile: var(--radius-lg);
  --card-top-offset-mobile: 12vh;
}


:root {
  /* ---------- MOBILE LAYOUT ---------- */
  --page-padding-mobile: var(--space-md);
  --card-vertical-align-mobile: center;
}