/* =============================================================
    VARIABLES — Inca Trail Explorer Design System
    Based on /docs/design-handoff/.../colors_and_type.css
    ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&display=swap');

@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Thin%20100.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Extra-Light%20200.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Light%20300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Normal%20400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Medium%20500.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Semi-Bold%20600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Bold%20700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Extra-Bold%20800.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: 'Mosk';
    src: url('../fonts/Mosk%20Ultra-Bold%20900.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'NewPlatinum';
    src: url('../fonts/NewPlatinum.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

:root {
    /* ── BRAND COLORS ── */
    --color-green-vivid:  #31ff99;
    --color-teal-deep:    #31a7a3;
    --color-gradient:     linear-gradient(135deg, #31ff99 0%, #31a7a3 100%);
    --color-gradient-radial: radial-gradient(circle at 30% 40%, #31ff99 0%, #31a7a3 80%);

    /* ── NEUTRALS ── */
    --color-gray: #aeaeb5;
    --color-gray-light:   #d8d8dc;
    --color-gray-xlight:  #f2f2f4;
    --color-white:        #ffffff;

    /* ── DARK BACKGROUNDS ── */
    --color-dark:         #0d1a17;
    --color-dark-mid:     #122920;
    --color-dark-card:    #1a2e26;

    /* ── TEXT ── */
    --color-text:   #52525b;
    --color-text-primary:   #20514e;
    --color-text-secondary: #aeaeb5;
    --color-text-muted:     #7a9e9b;
    --color-text-inverse:    #ffffff;

    /* ── SEMANTIC ── */
    --color-bg:          #ffffff;
    --color-bg-subtle:   #f2f2f4;
    --color-bg-dark: #0d1a17;
    --color-border:      #e4e4e8;
    --color-border-subtle: #f0f0f3;

    /* ── STATUS ── */
    --color-success:    #31a7a3;
    --color-accent:     #31ff99;
    --color-whatsapp:   #25d366;

    /* ── TYPOGRAPHY ── */
    --font-display:     'NewPlatinum', Georgia, 'Times New Roman', serif;
    --font-sans:        'Mosk', 'Noto Sans', sans-serif;
    --font-body:        var(--font-sans);

    /* Scale */
    --text-xs:     0.9rem;
    --text-sm:     1rem;
    --text-base:   1.3rem;
    --text-lg:     1.5rem;
    --text-xl:     1.7rem;
    --text-2xl:    2rem;
    --text-3xl:    2.6rem;
    --text-4xl:    3rem;
    --text-5xl:    3.5rem;
    --text-6xl:    4.2rem;
    --text-7xl:    5rem;

    /* Line heights */
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;

    /* Letter spacing */
    --tracking-tight:   -0.02em;
    --tracking-normal:  0em;
    --tracking-wide:    0.05em;
    --tracking-widest: 0.15em;

    /* ── SPACING (10px = 1rem) ── */
    --space-1:  0.6rem;
    --space-2:  1.2rem;
    --space-3:  1.8rem;
    --space-4:  2.4rem;
    --space-5:  3rem;
    --space-6:  3.6rem;
    --space-8:  4.8rem;
    --space-10: 6rem;
    --space-12: 7.2rem;
    --space-16: 9.6rem;
    --space-20: 12rem;
    --space-24: 14.4rem;
    --space-32: 19.2rem;

    /* Legacy aliases */
    --space-xs:  var(--space-1);
    --space-sm:  var(--space-2);
    --space-md:  var(--space-4);
    --space-lg:  var(--space-8);
    --space-xl:  var(--space-16);

    /* ── BORDER RADIUS ── */
    --radius-sm:    0.4rem;
    --radius-md:    0.8rem;
    --radius-lg:    1.6rem;
    --radius-xl:    2.4rem;
    --radius-2xl:   3.2rem;
    --radius-full:  9999px;

    /* Legacy alias */
    --radius-pill: var(--radius-full);

    /* ── SHADOWS ── */
    --shadow-sm:   0 0.1rem 0.3rem rgba(0,0,0,0.08), 0 0.1rem 0.2rem rgba(0,0,0,0.04);
    --shadow-md:   0 0.4rem 1.6rem rgba(0,0,0,0.08), 0 0.2rem 0.6rem rgba(0,0,0,0.05);
    --shadow-lg:   0 1.2rem 4rem rgba(0,0,0,0.10), 0 0.4rem 1.2rem rgba(0,0,0,0.06);
    --shadow-xl:   0 2.4rem 6.4rem rgba(0,0,0,0.12), 0 0.8rem 2.4rem rgba(0,0,0,0.08);
    --shadow-green: 0 0.8rem 3.2rem rgba(49, 255, 153, 0.25);
    --shadow-teal:  0 0.8rem 3.2rem rgba(49, 167, 163, 0.30);

    /* ── TRANSITIONS ── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
    --transition: var(--duration-normal) var(--ease-out);

    /* ── LAYOUT ── */
    --container-max:  128rem;
    --container-pad: 1.4rem;
}