/* ==========================================================================
   2026-01-27 [Sprint 10]
   foundation.css
   --------------------------------------------------------------------------
   역할 (KR):
   - 전역 디자인 토큰(색/그림자/라운드/간격/레이아웃)을 정의하는 "기반 레이어"
   - 하드코딩 색/값 제거의 종착지: 모든 색/표현은 여기 토큰을 통해서만 사용
   - 다크모드 적용 시: 여기 토큰만 교체하면 전체 UI가 자연스럽게 전환되게 설계
   --------------------------------------------------------------------------
   Role (EN):
   - Defines global design tokens (colors/shadows/radius/layout primitives)
   - Single source of truth for styling values (removes hard-coded colors)
   - Future dark mode: swap tokens only, the rest follows automatically
   ========================================================================== */

:root{
    /* ========== Surfaces / Backgrounds ========== */
    --bg: #ffffff;                         /* Page background */
    --surface: #ffffff;                    /* Primary surface (cards/panels/buttons) */

    /* 2026-01-27 [Sprint 10] Secondary surface (used for subtle hover backgrounds) */
    --surface-2: #f3f4f6; /* Tailwind gray-100 equivalent */

    --surface-glass: rgba(255,255,255,.6); /* Glassy surface (kicker, etc.) */

    /* ========== Text ========== */
    --text: #111315;                       /* Primary text */
    --text-strong: #2c2f33;                /* Slightly stronger text (used in quote body) */
    --muted: #6b7075;                      /* Secondary text */

    /* ========== Borders ========== */
    --border: #e7e9ec;                     /* Default border */
    --border-hover: #dfe3e8;               /* Hover border (was hard-coded) */
    --dot-border: #e1e3e6;                 /* Traffic dot border (was hard-coded) */

    /* ========== Brand ========== */
    --brand: #44474A;                      /* Wynlo core brand */
    --brand-2: #5a5e62;                    /* Secondary brand */
    --brand-soft: rgba(68,71,74,.04);      /* Brand-tinted subtle background */

    /* ========== Shadows ========== */
    --shadow: 0 18px 50px rgba(17,19,21,.08);
    --shadow-sm: 0 10px 26px rgba(17,19,21,.08);
    --shadow-card: 0 10px 28px rgba(17,19,21,.06); /* Cards in features */

    /* ========== Radius scale ========== */
    --radius-lg: 22px;
    --radius-md: 16px;

    /* ========== Layout ========== */
    --max: 1100px;

    /* ========== Landing-specific visuals (tokenized) ========== */
    --hero-glow: radial-gradient(circle at 30% 30%, rgba(68,71,74,.10), rgba(68,71,74,0) 70%);

    --panel-top-bg: linear-gradient(
            180deg,
            rgba(255,255,255,.9),
            rgba(255,255,255,.6)
    );

    --traffic-dot-bg: #e9ebee;             /* Traffic dots fill (was hard-coded) */
    --bar-bg: #f1f3f5;                     /* Progress bar background (was hard-coded) */

    --bar-fill: linear-gradient(
            90deg,
            rgba(68,71,74,.85),
            rgba(68,71,74,.45)
    );

    --cta-bg: linear-gradient(
            180deg,
            rgba(68,71,74,.06),
            rgba(68,71,74,.02)
    );
    /* ==========================================================================
   2026-01-27 [Sprint 10]
   Auth-only tokens (login/signup background + text tone)
   - Purpose: reduce eye strain with warm light gray background
   - Scope: used only by auth pages via Tailwind classes (bg-wauthbg, text-wauth*)
   ========================================================================== */
    --auth-bg: #F9F9F9;                 /* warm light gray (beige-ish) */
    --auth-text: #232629;               /* charcoal (not pure black) */
    --auth-muted: rgba(35, 38, 41, .72);
}

/* Reset / Base */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
    margin:0;
    font-family: 'SUIT Variable', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.4;
}

a{ color: inherit; text-decoration: none; }

/* Layout primitive */
.container{
    width: min(var(--max), calc(100% - 40px));
    margin: 0 auto;
}

/* Base section rhythm */
section{ padding: 48px 0; }

/* Base headings */
h1{
    margin: 14px 0 12px;
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.6px;
}

h2{
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.3px;
}