/**
 * Blog da Maimai - Global Design System CSS
 * Premium Editorial Style - Metallic Pastel Lilac
 */

/* =====================================================
   FONT FAMILIES (Google Fonts) - MUST BE FIRST
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

/* =====================================================
   RESET & BASE
   ===================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Epilogue', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #1c1b1e;
    background-color: #fdf8fb;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* =====================================================
   CONTAINER & SPACING
   ===================================================== */

.container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 64px;
    padding-right: 64px;
}

@media (max-width: 768px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =====================================================
   TYPOGRAPHY
   ===================================================== */

.font-h1, .font-h2, .font-h3, h1, h2, h3 {
    font-family: 'Noto Serif', Georgia, serif;
}

.font-noto-serif {
    font-family: 'Noto Serif', Georgia, serif;
}

.font-label-caps {
    font-family: 'Epilogue', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.font-body-lg {
    font-family: 'Epilogue', system-ui, sans-serif;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
}

.font-body-md {
    font-family: 'Epilogue', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.font-h1, h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 700;
}

.font-h2, h2 {
    font-size: clamp(28px, 4vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.font-h3, h3 {
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.3;
    font-weight: 600;
}

/* =====================================================
   COLORS
   ===================================================== */

.text-primary { color: #62597d; }
.bg-primary { background-color: #62597d; }
.border-primary { border-color: #62597d; }
.bg-primary-container { background-color: #b7acd4; }
.text-on-primary-container { color: #483f61; }
.text-on-primary { color: #ffffff; }

.text-primary-fixed { color: #e8ddff; }
.bg-primary-fixed { background-color: #e8ddff; }
.text-on-primary-fixed { color: #1e1636; }
.text-on-primary-fixed-variant { color: #4a4264; }
.bg-primary-fixed-dim { background-color: #ccc1ea; }

.text-secondary { color: #7b5455; }
.bg-secondary { background-color: #7b5455; }
.text-on-secondary { color: #ffffff; }
.bg-secondary-container { background-color: #fecbcb; }
.text-on-secondary-container { color: #7a5354; }

.text-secondary-fixed { color: #ffdad9; }
.bg-secondary-fixed { background-color: #ffdad9; }
.bg-secondary-fixed-dim { background-color: #ecbaba; }
.text-on-secondary-fixed { color: #2f1314; }
.text-on-secondary-fixed-variant { color: #613d3e; }

.text-tertiary { color: #685e2f; }
.bg-tertiary { background-color: #685e2f; }
.bg-tertiary-container { background-color: #bfb27a; }
.text-on-tertiary-container { color: #4d4417; }
.text-tertiary-fixed { color: #f1e3a7; }
.bg-tertiary-fixed { background-color: #f1e3a7; }
.text-on-tertiary-fixed { color: #211b00; }
.text-on-tertiary-fixed-variant { color: #504719; }
.bg-tertiary-fixed-dim { background-color: #d4c78d; }

.text-surface { color: #fdf8fb; }
.bg-surface { background-color: #fdf8fb; }
.text-surface-container { color: #f1ecf0; }
.bg-surface-container { background-color: #f1ecf0; }
.text-surface-container-low { color: #f7f2f6; }
.bg-surface-container-low { background-color: #f7f2f6; }
.text-surface-container-lowest { color: #ffffff; }
.bg-surface-container-lowest { background-color: #ffffff; }
.text-surface-container-high { color: #ece7ea; }
.bg-surface-container-high { background-color: #ece7ea; }
.text-surface-container-highest { color: #e6e1e4; }
.bg-surface-container-highest { background-color: #e6e1e4; }
.text-surface-dim { color: #ddd9dc; }
.bg-surface-dim { background-color: #ddd9dc; }
.text-surface-variant { color: #e6e1e4; }
.bg-surface-variant { background-color: #e6e1e4; }
.text-surface-bright { color: #fdf8fb; }
.bg-surface-bright { background-color: #fdf8fb; }

.text-on-surface { color: #1c1b1e; }
.bg-on-surface { background-color: #1c1b1e; }
.text-on-surface-variant { color: #48454d; }
.text-on-background { color: #1c1b1e; }
.bg-on-background { background-color: #1c1b1e; }

.text-inverse-surface { color: #313032; }
.bg-inverse-surface { background-color: #313032; }
.text-inverse-on-surface { color: #f4eff3; }
.text-inverse-primary { color: #ccc1ea; }

.text-outline { color: #79757e; }
.text-outline-variant { color: #cac4ce; }
.border-outline { border-color: #79757e; }
.border-outline-variant { border-color: #cac4ce; }

.text-error { color: #ba1a1a; }
.bg-error { background-color: #ba1a1a; }
.text-on-error { color: #ffffff; }
.bg-error-container { background-color: #ffdad6; }
.text-on-error-container { color: #93000a; }

.text-surface-tint { color: #62597d; }
.bg-surface-tint { background-color: #62597d; }

/* =====================================================
   SPACING
   ===================================================== */

:root {
    --stack-sm: 12px;
    --stack-md: 24px;
    --stack-lg: 48px;
    --gutter: 32px;
    --container-max: 1280px;
    --margin-mobile: 20px;
    --margin-desktop: 64px;
    --unit: 8px;
}

.gap-stack-sm { gap: var(--stack-sm); }
.gap-stack-md { gap: var(--stack-md); }
.gap-stack-lg { gap: var(--stack-lg); }
.gap-gutter { gap: var(--gutter); }

.p-stack-sm { padding: var(--stack-sm); }
.p-stack-md { padding: var(--stack-md); }
.p-stack-lg { padding: var(--stack-lg); }
.p-gutter { padding: var(--gutter); }

.m-stack-sm { margin: var(--stack-sm); }
.m-stack-md { margin: var(--stack-md); }
.m-stack-lg { margin: var(--stack-lg); }

.mb-stack-sm { margin-bottom: var(--stack-sm); }
.mb-stack-md { margin-bottom: var(--stack-md); }
.mb-stack-lg { margin-bottom: var(--stack-lg); }

.mt-stack-sm { margin-top: var(--stack-sm); }
.mt-stack-md { margin-top: var(--stack-md); }
.mt-stack-lg { margin-top: var(--stack-lg); }

.my-stack-md { margin-top: var(--stack-md); margin-bottom: var(--stack-md); }

.max-w-container-max { max-width: var(--container-max); }
.px-margin-desktop { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
.px-margin-mobile { padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); }
.mb-unit { margin-bottom: var(--unit); }

/* =====================================================
   GRADIENTS
   ===================================================== */

.bg-metallic-lilac {
    background-image: linear-gradient(135deg, #e8ddff 0%, #ccc1ea 50%, #b7acd4 100%);
}

.bg-champagne-rose {
    background-image: linear-gradient(135deg, #ffdad9 0%, #ecbaba 100%);
}

.bg-gradient-to-r-from-on-surface-to-primary {
    background: linear-gradient(to right, #1c1b1e, #62597d);
}

.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}

.text-transparent {
    color: transparent;
}

/* =====================================================
   GLASS & SHADOWS
   ===================================================== */

.glass-panel {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(183, 172, 212, 0.15);
}

.heavy-shadow {
    box-shadow: 0 10px 30px -5px rgba(98, 89, 125, 0.15), 0 8px 10px -6px rgba(98, 89, 125, 0.1);
}

.depth-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 20px 25px -5px rgba(0, 0, 0, 0.05);
}

.tactile-button {
    background: linear-gradient(145deg, #fecbcb, #ffdad9);
    box-shadow: 5px 5px 10px #e6e1e4, -5px -5px 10px #ffffff;
    border: 1px solid #ffffff;
}

.btn-primary {
    background: linear-gradient(135deg, #fecbcb, #ffdad9);
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.4), 0 4px 12px rgba(123, 84, 85, 0.2);
}

/* =====================================================
   MATERIAL SYMBOLS
   ===================================================== */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* =====================================================
   BORDER RADIUS
   ===================================================== */

.rounded { border-radius: 0.125rem; }
.rounded-lg { border-radius: 0.25rem; }
.rounded-xl { border-radius: 0.5rem; }
.rounded-full { border-radius: 0.75rem; }

/* =====================================================
   TRANSITIONS
   ===================================================== */

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-duration: 300ms;
}

/* =====================================================
   BACKGROUND TEXTURE
   ===================================================== */

body {
    background-image:
        url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.03%22/%3E%3C/svg%3E'),
        linear-gradient(135deg, #FDF8FB 0%, #E9E4F5 100%);
    background-attachment: fixed;
}

/* =====================================================
   UTILITIES
   ===================================================== */

.tracking-tighter { letter-spacing: -0.02em; }
.tracking-tight { letter-spacing: -0.01em; }
.tracking-widest { letter-spacing: 0.1em; }

.shadow-inner { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06); }

/* Text overflow */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}