@import 'tailwindcss';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';

@theme {
    --font-sans:
        'Montserrat', ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';
    --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --color-stb-ink: #14181f;
    --color-stb-muted: #5a6570;
    --color-stb-accent: #f5c518;
    --color-stb-accent-deep: #e0a800;
    --color-stb-surface: #eef1f4;
    --color-stb-paper: #f8fafb;
    --color-stb-hero: #0c1118;
    --color-stb-line: #d3dae3;
}

/*
 * Golden ratio type & control system (φ ≈ 1.618)
 * Fluid base tuned for HD (1280) → FHD (1920) → FHD+ (2560).
 * Scale steps: φ^n and √φ intermediates.
 */
@layer base {
    :root {
        --phi: 1.618033988749895;
        --phi-inv: 0.618033988749895;
        --phi-sqrt: 1.272019649514069;

        /* 15px@1280 → ~16.5px@1920 → 18px@2560 */
        --stb-text-base: clamp(0.9375rem, 0.75rem + 0.234vw, 1.125rem);

        --stb-text-xs: calc(var(--stb-text-base) / var(--phi));
        --stb-text-sm: calc(var(--stb-text-base) / var(--phi-sqrt));
        --stb-text-md: var(--stb-text-base);
        --stb-text-lg: calc(var(--stb-text-base) * var(--phi-sqrt));
        --stb-text-xl: calc(var(--stb-text-base) * var(--phi));
        --stb-text-2xl: calc(var(--stb-text-base) * var(--phi) * var(--phi-sqrt));
        --stb-text-3xl: calc(var(--stb-text-base) * var(--phi) * var(--phi));
        --stb-text-4xl: calc(
            var(--stb-text-base) * var(--phi) * var(--phi) * var(--phi-sqrt)
        );
        --stb-text-5xl: calc(
            var(--stb-text-base) * var(--phi) * var(--phi) * var(--phi)
        );
        --stb-text-brand: calc(
            var(--stb-text-base) * var(--phi) * var(--phi) * var(--phi) *
                var(--phi-sqrt)
        );

        --stb-lh: var(--phi);
        --stb-lh-tight: var(--phi-inv);
        --stb-lh-snug: 1.2;

        --stb-space-1: calc(var(--stb-text-base) / var(--phi));
        --stb-space-2: var(--stb-text-base);
        --stb-space-3: calc(var(--stb-text-base) * var(--phi-sqrt));
        --stb-space-4: calc(var(--stb-text-base) * var(--phi));
        --stb-space-5: calc(var(--stb-text-base) * var(--phi) * var(--phi-sqrt));
        --stb-space-6: calc(var(--stb-text-base) * var(--phi) * var(--phi));
        --stb-space-7: calc(
            var(--stb-text-base) * var(--phi) * var(--phi) * var(--phi-sqrt)
        );
        --stb-space-8: calc(
            var(--stb-text-base) * var(--phi) * var(--phi) * var(--phi)
        );

        /* Control box: height = text × φ², radius = text / φ, pad-x = text × φ */
        --stb-control-h: calc(var(--stb-text-md) * var(--phi) * var(--phi));
        --stb-control-px: calc(var(--stb-text-md) * var(--phi));
        --stb-control-radius: calc(var(--stb-text-md) / var(--phi));
        --stb-control-gap: calc(var(--stb-text-md) / var(--phi));

        --stb-control-sm-h: calc(var(--stb-text-sm) * var(--phi) * var(--phi));
        --stb-control-sm-px: calc(var(--stb-text-sm) * var(--phi));
        --stb-control-sm-radius: calc(var(--stb-text-sm) / var(--phi));

        /* Lebar konten tipikal situs korporat (~1280–1440px), bukan kolom sempit */
        --stb-measure: min(90rem, 100%);
    }

    html {
        font-size: 100%;
    }

    body {
        font-size: var(--stb-text-md);
        line-height: var(--stb-lh);
    }
}

@keyframes stb-rise {
    from {
        opacity: 0;
        transform: translateY(calc(var(--stb-space-3)));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes stb-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@layer utilities {
    .font-display {
        font-family: var(--font-display);
    }

    /* ——— Type roles (golden scale) ——— */
    .stb-type-brand {
        font-family: var(--font-display);
        font-size: var(--stb-text-brand);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: var(--stb-lh-tight);
    }

    .stb-type-page {
        font-family: var(--font-display);
        font-size: var(--stb-text-4xl);
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: var(--stb-lh-snug);
    }

    .stb-type-hero {
        font-family: var(--font-display);
        font-size: var(--stb-text-3xl);
        font-weight: 600;
        letter-spacing: -0.025em;
        line-height: var(--stb-lh-snug);
    }

    .stb-type-section {
        font-family: var(--font-display);
        font-size: var(--stb-text-2xl);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: var(--stb-lh-snug);
    }

    .stb-type-title {
        font-family: var(--font-display);
        font-size: var(--stb-text-xl);
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: var(--stb-lh-snug);
    }

    .stb-type-lead {
        font-size: var(--stb-text-lg);
        line-height: var(--stb-lh);
    }

    .stb-type-body {
        font-size: var(--stb-text-md);
        line-height: var(--stb-lh);
    }

    .stb-type-small {
        font-size: var(--stb-text-sm);
        line-height: var(--stb-lh);
    }

    .stb-type-caption {
        font-size: var(--stb-text-xs);
        font-weight: 600;
        letter-spacing: 0.16em;
        line-height: var(--stb-lh);
        text-transform: uppercase;
    }

    .stb-type-display-num {
        font-family: var(--font-display);
        font-size: var(--stb-text-3xl);
        font-weight: 600;
        line-height: var(--stb-lh-tight);
    }

    /* ——— Layout helpers ——— */
    .stb-container {
        margin-inline: auto;
        width: 100%;
        max-width: var(--stb-measure);
        padding-inline: clamp(1rem, 4vw, 2.5rem);
    }

    .stb-section {
        padding-block: var(--stb-space-7);
    }

    .stb-section-sm {
        padding-block: var(--stb-space-6);
    }

    .stb-hero-frame {
        /* ~φ⁻¹ of FHD height as soft cap, else 92vh */
        min-height: min(92vh, calc(1080px * var(--phi-inv)));
    }

    .stb-grid-phi {
        display: grid;
        gap: var(--stb-space-6);
    }

    .stb-grid-phi-invert {
        display: grid;
        gap: var(--stb-space-5);
    }

    @media (min-width: 768px) {
        .stb-grid-phi {
            grid-template-columns: 1fr var(--phi)fr;
            gap: var(--stb-space-7);
        }

        .stb-grid-phi-invert {
            grid-template-columns: var(--phi)fr 1fr;
        }
    }

    /* ——— Controls: input & button share φ² height ——— */
    .stb-control {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--stb-control-h);
        padding-inline: var(--stb-control-px);
        font-size: var(--stb-text-md);
        font-weight: 600;
        line-height: 1;
        border-radius: var(--stb-control-radius);
        transition:
            background-color 0.15s ease,
            color 0.15s ease,
            box-shadow 0.15s ease,
            border-color 0.15s ease;
    }

    .stb-control-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--stb-control-sm-h);
        padding-inline: var(--stb-control-sm-px);
        font-size: var(--stb-text-sm);
        font-weight: 500;
        line-height: 1;
        border-radius: var(--stb-control-sm-radius);
        transition:
            background-color 0.15s ease,
            color 0.15s ease;
    }

    .stb-input {
        display: block;
        width: 100%;
        min-height: var(--stb-control-h);
        padding-inline: var(--stb-control-px);
        font-size: var(--stb-text-md);
        line-height: 1;
        color: var(--color-stb-ink);
        background-color: #fff;
        border: 1px solid var(--color-stb-line);
        border-radius: var(--stb-control-radius);
        outline: none;
        transition:
            border-color 0.15s ease,
            box-shadow 0.15s ease;
    }

    .stb-input::placeholder {
        color: color-mix(in srgb, var(--color-stb-muted) 70%, transparent);
    }

    .stb-input:focus {
        border-color: var(--color-stb-ink);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-stb-accent) 40%, transparent);
    }

    .stb-btn-primary {
        background-color: var(--color-stb-accent);
        color: var(--color-stb-ink);
    }

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

    .stb-btn-ghost {
        color: #fff;
        box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3);
    }

    .stb-btn-ghost:hover {
        background-color: rgb(255 255 255 / 0.1);
    }

    .stb-form-row {
        display: flex;
        width: 100%;
        max-width: calc(var(--stb-text-base) * var(--phi) * 22);
        flex-direction: column;
        gap: var(--stb-control-gap);
    }

    @media (min-width: 640px) {
        .stb-form-row {
            flex-direction: row;
            align-items: stretch;
        }

        .stb-form-row .stb-input {
            flex: 1 1 auto;
        }

        .stb-form-row .stb-control {
            flex: 0 0 auto;
            white-space: nowrap;
        }
    }

    .stb-rise {
        animation: stb-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .stb-rise-delay-1 {
        animation-delay: 0.08s;
    }

    .stb-rise-delay-2 {
        animation-delay: 0.16s;
    }

    .stb-rise-delay-3 {
        animation-delay: 0.28s;
    }

    .stb-fade {
        animation: stb-fade 0.9s ease both;
    }

    .stb-hero-mesh {
        background-color: var(--color-stb-hero);
        background-image:
            radial-gradient(
                ellipse 80% 60% at 12% 20%,
                rgba(245, 197, 24, 0.28),
                transparent 55%
            ),
            radial-gradient(
                ellipse 50% 40% at 88% 10%,
                rgba(90, 140, 180, 0.18),
                transparent 50%
            ),
            linear-gradient(165deg, #0c1118 0%, #15202b 42%, #0a0e14 100%);
    }

    .stb-grid-fade {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.04) 1px,
                transparent 1px
            );
        background-size: calc(var(--stb-space-6)) calc(var(--stb-space-6));
        mask-image: linear-gradient(to bottom, black 30%, transparent 95%);
    }

    .stb-road {
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(245, 197, 24, 0.55) 20%,
            rgba(245, 197, 24, 0.9) 50%,
            rgba(245, 197, 24, 0.55) 80%,
            transparent 100%
        );
    }
}