/* Huleo Flow — web design tokens, mirrored from the iOS app (DesignSystem/HFTokens.swift).
   One file shared by every redesigned page: colours, type, radius, motion, base components. */

:root {
  --canvas: #F3F4FA;
  --surface: #FFFFFF;
  --surface-muted: #ECEEF6;
  --ink: #0E1330;
  --ink-2: #5B6280;
  --ink-3: #8E94AD;
  --hairline: rgba(14, 19, 48, .07);
  --navy: #08162F;
  --accent: #2563EB;
  --accent-soft: rgba(37, 99, 235, .09);
  --violet: #6E4BFF;
  --cyan: #0FA5D6;
  --mint: #0FA97F;
  --coral: #F0524F;
  --orange: #E8781C;
  --hero-agency: linear-gradient(135deg, #2A5BFF 0%, #4C46F2 50%, #8357FF 100%);
  --hero-studio: linear-gradient(135deg, #6B47FF 0%, #4A4CF7 50%, #2563EB 100%);
  --hero-warm: linear-gradient(135deg, #C43A6E 0%, #EF5B5B 50%, #6E45E6 100%);
  --radius-card: 30px;
  --radius-field: 18px;
  --shadow-card: 0 16px 40px rgba(8, 22, 47, .12);
  --spring: cubic-bezier(.2, .9, .25, 1.15);
  --ease: cubic-bezier(.22, .8, .3, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #090C1C; --surface: #12172E; --surface-muted: #1B2240;
    --ink: #F3F4FB; --ink-2: #A9AFCB; --ink-3: #6F7695; --hairline: rgba(255, 255, 255, .09);
    --accent: #5B8EF8; --accent-soft: rgba(91, 142, 248, .16);
    --violet: #9C86FF; --cyan: #4FD2F2; --mint: #3DDBB0; --coral: #FF7F7A; --orange: #FFAA5C;
    --shadow-card: 0 16px 40px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.hf {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  background: var(--canvas); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.hf button { font: inherit; color: inherit; }
.hf a { color: var(--accent); text-decoration: none; }
.hf :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* Hero band: the app's coloured gradient with soft halos. */
.hf-hero { position: relative; overflow: hidden; background: var(--hero-agency); color: #fff; }
.hf-hero::before, .hf-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hf-hero::before { width: 380px; height: 380px; right: -90px; top: -120px; background: radial-gradient(circle, rgba(225, 123, 255, .45), transparent 70%); }
.hf-hero::after { width: 420px; height: 420px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(76, 200, 255, .35), transparent 70%); }
.hf-hero.studio { background: var(--hero-studio); }
.hf-hero.warm { background: var(--hero-warm); }

.hf-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.hf-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Fields: icon, small title, solid surface, accent ring when focused. */
.hf-field { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px 8px 14px;
  background: var(--canvas); border: 1.5px solid transparent; border-radius: var(--radius-field);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.hf-field:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft); }
.hf-field .ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: var(--accent-soft); color: var(--accent); }
.hf-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 1px; }
.hf-field input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; padding: 0; }
.hf-field input::placeholder { color: var(--ink-3); font-weight: 400; }
.hf-field .grow { flex: 1; min-width: 0; }

/* Buttons. */
.hf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 20px;
  border: 0; border-radius: 17px; font-size: 16px; font-weight: 700; cursor: pointer; width: 100%;
  transition: transform .18s var(--spring), box-shadow .2s var(--ease), opacity .2s, background .2s; }
.hf-btn:active:not(:disabled) { transform: scale(.97); }
.hf-btn:disabled { opacity: .45; cursor: not-allowed; }
.hf-btn.primary { color: #fff; background: linear-gradient(180deg, #3B74F0, #2563EB); box-shadow: 0 10px 22px rgba(37, 99, 235, .3); }
.hf-btn.primary:hover:not(:disabled) { box-shadow: 0 14px 28px rgba(37, 99, 235, .38); }
.hf-btn.secondary { color: var(--ink); background: var(--surface); border: 1.5px solid var(--hairline); }
.hf-btn.secondary:hover:not(:disabled) { background: var(--surface-muted); }
.hf-btn .spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: hf-spin .8s linear infinite; }
.hf-btn.secondary .spin { border-color: var(--hairline); border-top-color: var(--accent); }

.hf .hf-link, .hf-link { background: none; border: 0; padding: 6px 0; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
.hf-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.hf-divider::before, .hf-divider::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

.hf-alert { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hf-alert.error { color: var(--coral); background: color-mix(in srgb, var(--coral) 10%, transparent); }
.hf-alert.ok { color: var(--mint); background: color-mix(in srgb, var(--mint) 10%, transparent); }

/* Bottom sheet (phone) / centred panel (desktop), like the app's sheets. */
.hf-sheet-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 30, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); z-index: 50; }
.hf-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.hf-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; z-index: 51;
  background: var(--canvas); border-radius: 34px 34px 0 0; padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .45s var(--spring); }
.hf-sheet.open { transform: translateY(0); }
.hf-sheet .grip { width: 38px; height: 5px; border-radius: 3px; background: var(--ink-3); opacity: .45; margin: 0 auto 14px; }
@media (min-width: 720px) {
  .hf-sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: 460px; border-radius: 30px; padding: 26px 28px;
    transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .4s var(--spring), opacity .25s var(--ease); pointer-events: none; }
  .hf-sheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
  .hf-sheet .grip { display: none; }
}

/* 6-digit code boxes. */
.hf-code { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; position: relative; }
.hf-code span { height: 60px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--hairline);
  display: grid; place-items: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: border-color .15s, transform .2s var(--spring); }
.hf-code span.filled { transform: scale(1.04); }
.hf-code span.active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.hf-code.error span { border-color: var(--coral); }
.hf-code input { position: absolute; inset: 0; opacity: 0; font-size: 16px; letter-spacing: 1em; }

/* Motion. */
@keyframes hf-spin { to { transform: rotate(360deg); } }
@keyframes hf-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hf-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes hf-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.hf-rise { animation: hf-rise .7s var(--ease) both; }
.hf-pop { animation: hf-pop .6s var(--spring) both; }
.hf-shake { animation: hf-shake .45s both; }
.hf-delay-1 { animation-delay: .08s; } .hf-delay-2 { animation-delay: .16s; } .hf-delay-3 { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .hf-rise, .hf-pop, .hf-shake { animation: none !important; }
  .hf-sheet, .hf-sheet-backdrop, .hf-btn { transition: none !important; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.hf-field input:focus-visible { outline: none; }