/*
  TUNAZIP — Stratos UI Theme
  Design tokens + shared components. Layered over Bootstrap; loaded before Site.css.
  Font face lives in pretendard.css (--font-pretendard).
*/

:root {
    /* Surfaces */
    --background: #f8f9ff;
    --surface: #e5eeff;
    --surface-lowest: #ffffff;
    --surface-low: #eff4ff;
    --surface-high: #dce9ff;

    /* Text */
    --on-surface: #0b1c30;
    --on-surface-variant: #45474c;

    /* Borders */
    --outline: #75777d;
    --outline-variant: #c5c6cd;

    /* Primary (charcoal) */
    --primary: #091426;
    --primary-container: #1e293b;
    --on-primary: #ffffff;

    /* Secondary (indigo — CTA / focus) */
    --secondary: #4648d4;
    --secondary-container: #6063ee;
    --secondary-dim: #c0c1ff;

    /* Radius */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Spacing scale */
    --unit-xs: 4px;
    --unit-sm: 8px;
    --unit-md: 16px;
    --unit-lg: 32px;
    --unit-xl: 64px;
    --gutter: 24px;
    --container-max: 1280px;

    /* Elevation */
    --shadow-ambient: 0 4px 12px rgba(9, 20, 38, 0.04);
    --shadow-lift: 0 12px 24px -4px rgba(9, 20, 38, 0.06);
}

/* Base ------------------------------------------------------------------ */
html body {
    font-family: var(--font-pretendard);
    background-color: var(--background);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--secondary-dim);
    color: var(--primary);
}

/* Type helpers ---------------------------------------------------------- */
.tz-display {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.tz-headline-lg {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.tz-headline-md {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

.tz-body-lg {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
}

.tz-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.tz-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.tz-label-sm {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .tz-display {
        font-size: 60px;
        line-height: 1.1;
    }

    .tz-headline-lg {
        font-size: 36px;
        line-height: 1.2;
    }
}

.tz-muted {
    color: var(--on-surface-variant);
}

/* Components ------------------------------------------------------------ */
.tz-card {
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
}

/* Buttons */
.btn-primary,
.btn-ghost,
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--unit-sm);
    padding: 12px 20px;
    border-radius: var(--radius);
    font-family: var(--font-pretendard);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    text-decoration: none;
    line-height: 1.4;
}

.btn-primary {
    background-color: var(--primary-container);
    color: var(--on-primary);
}

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

.btn-primary:active {
    transform: scale(0.98);
}

.btn-cta {
    background-color: var(--secondary);
    color: var(--on-primary);
}

.btn-cta:hover {
    background-color: var(--secondary-container);
}

.btn-ghost {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--outline-variant);
}

.btn-ghost:hover {
    background-color: var(--surface-low);
}

/* Inputs */
.tz-input {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius);
    font-family: var(--font-pretendard);
    font-size: 16px;
    line-height: 1.5;
    color: var(--on-surface);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tz-input::placeholder {
    color: var(--outline);
}

.tz-input:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 2px rgba(70, 72, 212, 0.15);
}

/* Badge / pill */
.tz-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--unit-sm);
    padding: 6px 12px;
    background-color: var(--surface-low);
    border: 1px solid var(--surface-high);
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 600;
    color: var(--secondary);
}

/* Hover lift for interactive cards */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}