/* ============================================
   India UPI Checkout — base tokens
   ============================================ */

:root {
    --saffron: #f7941e;
    --saffron-deep: #e07d0a;
    --india-green: #00a3c9;
    --forest: #004791;
    --forest-mid: #00356e;
    --ink: #0a1f3a;
    --muted: #6b7f96;
    --bg: #f0f4f8;
    --card: #ffffff;
    --line: #d4e0ec;
    --soft: #e8f0f8;
    --shadow: 0 0.12rem 0.36rem rgba(0, 71, 145, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background:
        radial-gradient(ellipse 90% 60% at 100% -20%, rgba(0, 163, 201, 0.14), transparent 55%),
        radial-gradient(ellipse 70% 50% at -10% 110%, rgba(247, 148, 30, 0.08), transparent 50%),
        var(--bg);
    color: var(--ink);
    min-height: 100vh;
    padding: 0;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: rgba(0, 71, 145, 0.18);
    color: var(--ink);
}

@media screen and (max-width: 321px) {
    body, footer, header {
        font-size: 16px;
    }
}

@media screen and (min-width: 321px) and (max-width: 400px) {
    body, footer, header {
        font-size: 17px;
    }
}

@media screen and (min-width: 400px) {
    body, footer, header {
        font-size: 19px;
    }
}