:root
{
    /* ===========================
       Colors
       =========================== */

    --primary-color: #2563EB;
    --primary-hover-color: #1D4ED8;

    --success-color: #16A34A;
    --warning-color: #F59E0B;
    --danger-color: #DC2626;

    --background-color: #F5F7FA;

    --surface-color: #FFFFFF;

    --text-color: #111827;

    --secondary-text-color: #6B7280;

    --border-color: #E5E7EB;

    /* ===========================
       Sizes
       =========================== */

    --max-page-width: 430px;

    --border-radius: 12px;

    --button-height: 48px;

    --input-height: 48px;

    /* ===========================
       Spacing
       =========================== */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* ===========================
       Shadow
       =========================== */

    --card-shadow:
        0 2px 8px rgba(0,0,0,0.08);
}

/* =====================================
   Global
   ===================================== */

*
{
    box-sizing: border-box;
}

html
{
    font-size:16px;
}

body
{
    margin:0;

    background:var(--background-color);

    color:var(--text-color);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}

/* =====================================
   Mobile App Container
   ===================================== */

.page {
    max-width: var(--max-page-width);
    min-height: 100vh;
    margin: auto;
    background: var(--surface-color);
    border-left: 1px solid #C7CDD5;
    border-right: 1px solid #C7CDD5;
}

.content
{
    padding:var(--spacing-md);
}

/* =====================================
   Card
   ===================================== */

.card
{
    background:var(--surface-color);

    border-radius:var(--border-radius);

    box-shadow:var(--card-shadow);

    padding:var(--spacing-md);

    margin-bottom:var(--spacing-md);
}

/* =====================================
   Headings
   ===================================== */

h1
{
    margin:0;

    font-size:28px;
}

h2
{
    margin:0;

    font-size:22px;
}

h3
{
    margin:0;

    font-size:18px;
}

p
{
    color:var(--secondary-text-color);

    line-height:1.5;
}

/* =====================================
   Input
   ===================================== */

.text-box
{
    width:100%;

    height:var(--input-height);

    border:1px solid var(--border-color);

    border-radius:var(--border-radius);

    padding:0 14px;

    outline:none;

    font-size:16px;
}

.text-box:focus
{
    border-color:var(--primary-color);
}

/* =====================================
   Button
   ===================================== */

.primary-button
{
    width:100%;

    height:var(--button-height);

    border:none;

    border-radius:var(--border-radius);

    background:var(--primary-color);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;
}

.primary-button:hover
{
    background:var(--primary-hover-color);
}

/* =====================================
   App Header
   ===================================== */

.app-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    z-index: 100;
}

.app-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

/* =====================================
   Section Title
   ===================================== */

.section-title {
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
}

/* =====================================
   Utility
   ===================================== */

.mt-md {
    margin-top: 16px;
}

.mb-md {
    margin-bottom: 16px;
}

.text-center {
    text-align: center;
}

/* =====================================
   Text Box
   ===================================== */

.text-box::placeholder {
    color: #9CA3AF;
}

/* =====================================
   Focus
   ===================================== */

.text-box:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* =====================================
   Button
   ===================================== */

.primary-button {
    transition: background-color .20s ease;
}

    .primary-button:active {
        transform: scale(.98);
    }

.required {
    color: var(--danger-color);
    font-weight: 600;
}