/* Jeff's Architecture - Skin Foundation
   File: skins/default/css/base.css
*/

/* 1. TYPOGRAPHY IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@500;600;700&display=swap');

:root {
    /* 2. LIGHT THEME — "Fresh Savings" PALETTE */

    /* Backgrounds: Clean whites & light grays */
    --bg-body:       #f8f9fb;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #f1f5f9;

    /* Brand: Vibrant Teal-Emerald */
    --primary:       #0d9488;
    --primary-hover: #0f766e;
    --primary-light: rgba(13, 148, 136, 0.1);

    /* Secondary & Accents */
    --accent:        #64748b;
    --accent-hover:  #475569;

    /* Functional Colors */
    --success:       #059669;
    --danger:        #dc2626;
    --warning:       #d97706;
    --info:          #2563eb;

    /* Text: Dark on light */
    --text-main:     #1a1a2e;
    --text-muted:    #64748b;
    --text-inverse:  #ffffff;

    /* Borders */
    --border-color:  #e2e8f0;

    /* 3. GEOMETRY & DEPTH */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;

    --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-float:  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xs:     0 1px 2px rgba(0, 0, 0, 0.04);

    /* 4. TYPOGRAPHY TOKENS */
    --font-head:     'Montserrat', sans-serif;
    --font-body:     'Lato', sans-serif;
}

/* GLOBAL DEFAULTS */
body {
    background-color: var(--bg-body);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > .consumer-main,
body > .page-auth {
    flex: 1;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--text-main);
    font-weight: 600;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em; /* Tighter, more modern tracking */
    line-height: 1.2;
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

/* LINKS */
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #0f766e;
}

/* UTILITY HELPERS */
.text-muted { color: var(--text-muted) !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: 1rem; }
.mt-20 { margin-top: 20px; }