/* ==========================================================================
   Franco Store - Base Design Tokens and Global Foundations
   ========================================================================== */

/* ----- Design Tokens: Light Theme (Default) ----- */
:root {
    /* Core palette */
    --bg-primary: #F8FAFC;
    --bg-base: #F8FAFC;
    --bg-secondary: #F1F5F9;
    --surface-level-1: #FFFFFF;
    --surface-level-2: #F1F5F9;
    --card-bg: #FFFFFF;
    --border-subtle: #E5E7EB;
    --border-strong: #CBD5E1;
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #64748B;
    --accent: #1E7BFF;
    --accent-soft: rgba(30, 123, 255, 0.15);
    --accent-glow: 0 0 15px rgba(30, 123, 255, 0.2);

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-section: 48px;
    --space-header-bottom: 20px;
    --space-card-gap: 12px;

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

    /* Shadows */
    --shadow-nav: 0 8px 20px rgba(15, 23, 42, 0.08);
    --shadow-card: 0 0 0 1px var(--border-subtle);
    --shadow-elevated: 0 12px 28px rgba(15, 23, 42, 0.12);
    --shadow-bottom-nav: 0 -6px 20px rgba(15, 23, 42, 0.12);

    /* Motion */
    --transition-fast: 0.2s ease;
    --transition-base: 0.2s ease;

    /* Existing semantic aliases (kept for compatibility) */
    --color-surface: var(--bg-primary);
    --color-surface-dim: #E2E8F0;
    --color-surface-bright: #FFFFFF;
    --color-surface-container-lowest: var(--card-bg);
    --color-surface-container-low: #F8FAFC;
    --color-surface-container: var(--bg-secondary);
    --color-surface-container-high: #E2E8F0;
    --color-surface-container-highest: #CBD5E1;
    --color-surface-variant: var(--bg-secondary);
    --color-background: var(--bg-primary);

    --color-on-surface: var(--text-primary);
    --color-on-surface-variant: var(--text-secondary);
    --color-on-background: var(--text-primary);
    --color-heading: var(--text-primary);

    --color-primary: var(--accent);
    --color-on-primary: #FFFFFF;
    --color-primary-container: #DCEBFF;
    --color-on-primary-container: #0A3F8F;
    --color-primary-fixed: #BED9FF;
    --color-primary-fixed-dim: #8EB9FF;

    --color-secondary: #1E66E1;
    --color-on-secondary: #FFFFFF;
    --color-secondary-container: #DCEBFF;

    --color-tertiary: #0EA5A4;
    --color-on-tertiary: #FFFFFF;
    --color-tertiary-container: #CCFBF1;
    --color-on-tertiary-container: #134E4A;

    --color-error: #EF4444;
    --color-on-error: #FFFFFF;
    --color-error-container: #FEE2E2;
    --color-on-error-container: #7F1D1D;

    --color-outline: var(--border-strong);
    --color-outline-variant: var(--border-subtle);
    --color-inverse-surface: #1E293B;
    --color-inverse-on-surface: #F1F5F9;
    --color-inverse-primary: #8EB9FF;

    /* Component tokens */
    --nav-bg: rgba(248, 250, 252, 0.9);
    --nav-bg-solid: #FFFFFF;
    --nav-border: var(--border-subtle);
    --nav-link: #334155;
    --nav-link-hover: var(--accent);
    --nav-brand: var(--accent);

    --search-bg: var(--bg-secondary);
    --search-panel-bg: var(--card-bg);
    --search-border: var(--border-subtle);
    --search-text: var(--text-primary);
    --search-placeholder: #94A3B8;
    --field-focus-ring: rgba(30, 123, 255, 0.24);

    --card-border: var(--border-subtle);
    --card-hover-border: var(--border-strong);

    --footer-bg: var(--bg-secondary);
    --footer-border: var(--border-subtle);
    --footer-text: var(--text-secondary);
    --footer-heading: var(--text-primary);
    --footer-brand: var(--text-primary);
    --footer-payment-bg: var(--card-bg);
    --footer-payment-border: var(--border-subtle);
    --footer-payment-text: #334155;

    --fab-tooltip-bg: #0F172A;
    --fab-tooltip-text: #F8FAFC;

    --sidebar-bg: var(--card-bg);
    --sidebar-overlay: rgba(15, 23, 42, 0.45);
    --sidebar-border: var(--border-subtle);
    --bottom-nav-bg: rgba(255, 255, 255, 0.94);
    --bottom-nav-active-bg: rgba(30, 123, 255, 0.12);
    --bottom-nav-active-text: var(--accent);
    --bottom-nav-inactive: #64748B;

    --gradient-start: #21AAFF;
    --gradient-end: #1E66E1;
    --live-dot: var(--accent);
    --badge-text: #FFFFFF;
}

/* ----- Design Tokens: Dark Theme ----- */
[data-theme="dark"] {
    --bg-primary: #0B0F19;
    --bg-base: #0B0F19;
    --bg-secondary: #111827;
    --surface-level-1: #151A27;
    --surface-level-2: #1E2536;
    --card-bg: #151A27;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.12);
    --text-primary: #E6EDF3;
    --text-secondary: #9BA4AE;
    --text-muted: #9CA3AF;
    --accent: #3B8DFF;
    --accent-soft: rgba(59, 141, 255, 0.16);
    --accent-glow: 0 0 15px rgba(59, 141, 255, 0.3);

    --color-surface: var(--bg-base);
    --color-surface-dim: #0D131D;
    --color-surface-bright: #1C2532;
    --color-surface-container-lowest: var(--surface-level-1);
    --color-surface-container-low: #151D2B;
    --color-surface-container: var(--surface-level-1);
    --color-surface-container-high: var(--surface-level-2);
    --color-surface-container-highest: #263247;
    --color-surface-variant: var(--bg-secondary);
    --color-background: var(--bg-base);

    --color-on-surface: var(--text-primary);
    --color-on-surface-variant: var(--text-secondary);
    --color-on-background: var(--text-primary);
    --color-heading: var(--text-primary);

    --color-primary: var(--accent);
    --color-on-primary: #07120B;
    --color-primary-container: rgba(59, 141, 255, 0.2);
    --color-on-primary-container: #B8D7FF;
    --color-primary-fixed: rgba(59, 141, 255, 0.28);
    --color-primary-fixed-dim: rgba(59, 141, 255, 0.42);

    --color-secondary: #3B8DFF;
    --color-on-secondary: #07120B;
    --color-secondary-container: rgba(59, 141, 255, 0.16);

    --color-tertiary: #22D3EE;
    --color-on-tertiary: #06232A;
    --color-tertiary-container: rgba(34, 211, 238, 0.18);
    --color-on-tertiary-container: #A5F3FC;

    --color-error: #F87171;
    --color-on-error: #220B0B;
    --color-error-container: rgba(239, 68, 68, 0.2);
    --color-on-error-container: #FECACA;

    --color-outline: var(--border-strong);
    --color-outline-variant: var(--border-subtle);
    --color-inverse-surface: #E2E8F0;
    --color-inverse-on-surface: #0F172A;
    --color-inverse-primary: #3B8DFF;

    --nav-bg: rgba(11, 15, 20, 0.9);
    --nav-bg-solid: #0B0F14;
    --nav-border: var(--border-subtle);
    --nav-link: #A8B3C2;
    --nav-link-hover: #9BC8FF;
    --nav-brand: var(--accent);

    --search-bg: var(--surface-level-1);
    --search-panel-bg: var(--surface-level-2);
    --search-border: var(--border-subtle);
    --search-text: var(--text-primary);
    --search-placeholder: #7F8A99;
    --field-focus-ring: rgba(59, 141, 255, 0.32);

    --card-border: var(--border-subtle);
    --card-hover-border: var(--border-strong);

    --footer-bg: #0E141D;
    --footer-border: var(--border-subtle);
    --footer-text: var(--text-secondary);
    --footer-heading: var(--text-primary);
    --footer-brand: var(--text-primary);
    --footer-payment-bg: #131B27;
    --footer-payment-border: var(--border-subtle);
    --footer-payment-text: #C7D0DD;

    --fab-tooltip-bg: #0E141D;
    --fab-tooltip-text: #E6EDF3;

    --sidebar-bg: #0E141D;
    --sidebar-overlay: rgba(2, 6, 12, 0.62);
    --sidebar-border: var(--border-subtle);
    --bottom-nav-bg: rgba(14, 20, 29, 0.92);
    --bottom-nav-active-bg: rgba(59, 141, 255, 0.18);
    --bottom-nav-active-text: #9BC8FF;
    --bottom-nav-inactive: #9BA4AE;

    --shadow-nav: 0 10px 24px rgba(2, 6, 12, 0.55);
    --shadow-card: 0 0 0 1px var(--border-subtle);
    --shadow-elevated: 0 16px 34px rgba(2, 6, 12, 0.62);
    --shadow-bottom-nav: 0 -8px 24px rgba(2, 6, 12, 0.6);

    --gradient-start: #2EA2FF;
    --gradient-end: #1E6EFF;
    --live-dot: #3B8DFF;
}

/* ==========================================================================
   Global Resets and Base Styles
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

h1, h2, h3, h4, h5, h6,
.font-headline,
.brand {
    font-family: 'Manrope', 'Inter', sans-serif;
    color: var(--text-primary);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: all var(--transition-fast);
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

ul, ol {
    list-style: none;
}

/* ==========================================================================
   Shared Utility System
   ========================================================================== */

.emerald-gradient {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.glass-nav {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.glass-panel {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    vertical-align: middle;
}

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Section spacing and hierarchy */
.fs-page-main {
    padding-bottom: var(--space-section);
}

.fs-section {
    margin-top: var(--space-section);
}

.fs-page-main > .fs-section:first-child {
    margin-top: 0;
}

.fs-section__head {
    margin-bottom: var(--space-header-bottom);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.fs-section__title {
    margin: 0;
    color: var(--text-primary);
    line-height: 1.2;
}

.fs-section__subtitle {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.fs-section__content {
    margin-top: 0;
}

/* Universal card shell */
.fs-u-card {
    background: var(--card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

.fs-u-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-elevated);
}

.fs-u-card__body {
    padding: var(--space-md);
    display: grid;
    gap: var(--space-card-gap);
}

.fs-u-card__media {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
    overflow: hidden;
}

/* Universal scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0E141D;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: #F1F5F9;
}

::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.75) !important;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.9) !important;
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

@media (max-width: 425px) {
    main {
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }

    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.25rem !important; }

    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .fs-package-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        max-width: 100% !important;
        padding-left: var(--space-md) !important;
        padding-right: var(--space-md) !important;
    }

    input, textarea, select {
        max-width: 100% !important;
    }

    .fs-bottom-nav {
        padding: 0.4rem 0.5rem;
    }

    .fs-bottom-nav__item {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .fs-bottom-nav__item .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .fs-section {
        margin-top: 40px;
    }
}

@media (max-width: 320px) {
    main {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1.1rem !important; }

    .fs-bottom-nav__item {
        padding: 0.2rem 0.35rem;
        font-size: 0.5625rem;
    }
}