@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Colors */
    --color-primary: #f62440;
    --color-secondary: #d11f35;
    --color-bg: #f4f4f4;
    --color-bg-white: #ffffff;
    --color-text: #1c1c1c;
    --color-text-secondary: #666666;
    --color-border: #1c1c1c;
    --color-border-subtle: #e1e1e1;
    --color-search-bg: #e9e9e9;
    --color-surface-hover: #f1f1f1;

    /* Alias tokens */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f4f4f4;
    --color-text-primary: #1c1c1c;
    
    /* Spacing Base */
    --spacing-1: 1px;
    --spacing-2: 8px;
    --spacing-3: 16px;
    --spacing-4: 32px;
    --spacing-5: 80px;

    /* Border Radius */
    --radius-card: 16px;
    --radius-card-lg: 50px;
    --radius-button: 8px;
    --radius-button-lg: 12px;
    --radius-subtle: 2px;
    --radius-pill: 9999px;
    
    /* Shadows */
    --shadow-mid: rgba(0, 0, 0, 0.2) 0px 3px 12px 0px;
    --shadow-light: rgb(128, 128, 128) 0px 0px 5px 0px;
    
    /* Typography */
    --font-family: 'Outfit', "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

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

body { 
    font-family: var(--font-family); 
    background-color: var(--color-bg); 
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.7; /* Optimized for Japanese text */
    word-break: normal;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { 
    font-family: var(--font-family);
    font-weight: 700; 
    color: var(--color-text); 
    letter-spacing: -0.5px;
    line-height: 1.3;
}

h1 { font-size: 36px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
h5, h6 { font-size: 12px; }

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

/* Utilities */
.text-muted { color: var(--color-text-secondary); }
.text-primary { color: var(--color-primary); }
.bg-white { background-color: var(--color-bg-white); }
.w-100 { width: 100%; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }

/* Default button reset */
button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
}