/* ========================================
   BASE STYLES
   Global styles, variables, and reset
   ======================================== */

/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Typography */
.lobster-two {
    font-family: 'Lobster Two', cursive;
}

/* Global colors - available in all themes */
:root {
    /* Global utility colors */
    --white: #ffffff;
    --black: #000000;

    /* Global brand colors */
    --pink-light: #ffc0cb;
    --pink-medium: #ffb6c1;
    --pink-medium-dark: #eb95a2;
    --pink-dark: #db7093;
    --pink-hot: #ff69b4;
    --pink-deep: #ff1493;

    /* Primary brand colors */
    --primary-color: var(--pink-medium);
    --secondary-color: var(--pink-light);
    --accent-color: var(--pink-medium);

    /* Background colors */
    --bg-primary: #fff0f5;
    --bg-secondary: var(--white);
    --bg-accent: var(--pink-light);
    --bg-intro: var(--white);

    /* Text colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #888888;

    /* Interactive colors */
    --link-color: var(--pink-dark);
    --link-hover: var(--pink-hot);
    --button-primary: var(--pink-hot);
    --button-secondary: var(--pink-light);

    /* Utility colors */
    --border-color: var(--pink-medium);
    --shadow-color: rgba(255, 182, 193, 0.2);
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ff9800;

    /* Hamburger icon color */
    --hamburger-icon: var(--pink-light);

    /* Footer background color */
    --bg-footer: var(--white);
}

/* Dark theme colors - Pink palette */
[data-theme="dark"] {
    /* Background colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-accent: #3a3a3a;
    --bg-intro: #1a1a1a;

    /* Text colors */
    --text-primary: var(--white);
    --text-secondary: #cccccc;
    --text-muted: #999999;

    /* Interactive colors */
    --link-color: var(--pink-hot);
    --link-hover: var(--pink-deep);
    --button-primary: var(--pink-hot);
    --button-secondary: var(--pink-deep);

    /* Utility colors */
    --border-color: #444444;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --success-color: #4caf50;
    --error-color: #f44336;
    --warning-color: #ff9800;

    /* Hamburger icon color */
    --hamburger-icon: var(--pink-light);

    /* Footer background color */
    --bg-footer: #1a1a1a;
}

/* Utility Classes */
.tiny-text {
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.2;
}

.tiny-text i {
    font-size: 0.6rem;
    margin-left: 0.25rem;
    opacity: 0.7;
}