/* ============================================
   BASE — CSS Variables, Reset, Typography
   浅倉リサイクル Design System
   ============================================ */

/* ─── Design Tokens ─── */
:root {
    /* Primary palette (from mockup) */
    --color-primary:           #003594;
    --color-primary-container: #004ac6;
    --color-primary-light:     #1b55d0;
    --color-primary-fixed:     #dbe1ff;
    --color-on-primary:        #ffffff;

    /* Teal accent (logo/brand) */
    --color-teal:              #2BA4A0;
    --color-teal-light:        #3CC5BF;
    --color-teal-dim:          #1e8a86;

    /* Secondary (warm) */
    --color-secondary:         #855300;
    --color-secondary-container: #fdb965;
    --color-cta-orange:        #fea619;

    /* Tertiary (green) */
    --color-line-green:        #06C755;

    /* Surface & Background */
    --color-background:        #faf8ff;
    --color-surface:           #f8f9ff;
    --color-surface-container: #e6eeff;
    --color-surface-container-low: #f3f3fd;
    --color-surface-container-high: #e7e7f2;
    --color-surface-dim:       #d9d9e4;

    /* Text */
    --color-on-surface:        #121c2a;
    --color-on-surface-variant: #434654;
    --color-on-background:     #191b23;

    /* Outline */
    --color-outline:           #737686;
    --color-outline-variant:   #c3c6d6;

    /* Error */
    --color-error:             #ba1a1a;

    /* Inverse */
    --color-inverse-surface:   #2e3038;
    --color-inverse-on-surface: #f0f0fb;
    --color-inverse-primary:   #b4c5ff;

    /* ─── Typography ─── */
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body:    'Be Vietnam Pro', 'Noto Sans JP', system-ui, sans-serif;
    --font-jp:      'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;

    /* ─── Spacing ─── */
    --unit:         4px;
    --space-xs:     4px;
    --space-sm:     8px;
    --space-md:     16px;
    --space-lg:     24px;
    --space-xl:     32px;
    --space-2xl:    48px;
    --space-3xl:    64px;
    --space-4xl:    96px;
    --gutter:       24px;
    --container-max: 1280px;

    /* ─── Border Radius ─── */
    --radius-sm:    8px;
    --radius-md:    16px;
    --radius-lg:    24px;
    --radius-xl:    32px;
    --radius-full:  9999px;

    /* ─── Shadows ─── */
    --shadow-sm:    0 2px 8px rgba(18, 28, 42, 0.04);
    --shadow-md:    0 4px 16px rgba(18, 28, 42, 0.06);
    --shadow-lg:    0 8px 32px rgba(18, 28, 42, 0.06), 0 2px 8px rgba(18, 28, 42, 0.04);
    --shadow-xl:    0 16px 48px rgba(18, 28, 42, 0.1), 0 4px 12px rgba(18, 28, 42, 0.06);
    --shadow-header: 0 2px 40px rgba(18, 28, 42, 0.03);

    /* ─── Z-index ─── */
    --z-base:       1;
    --z-dropdown:   10;
    --z-sticky:     20;
    --z-overlay:    30;
    --z-modal:      40;
    --z-header:     50;
    --z-mobile-menu: 60;

    /* ─── Transitions ─── */
    --ease-out:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-fast:   150ms var(--ease-out);
    --transition-normal: 300ms var(--ease-out);
    --transition-slow:   500ms var(--ease-out);
}

/* ─── CSS Reset ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--color-on-background);
    background-color: var(--color-background);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

/* WordPress Emoji styling fix */
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 0.07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

ul, ol {
    list-style: none;
}

/* ─── Typography Scale ─── */
.text-display-lg {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 3.5625rem); /* 40-57px */
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.text-headline-lg {
    font-family: var(--font-heading);
    font-size: 2rem;     /* 32px */
    line-height: 1.25;
    font-weight: 600;
}

.text-headline-md {
    font-family: var(--font-heading);
    font-size: 1.75rem;  /* 28px */
    line-height: 1.286;
    font-weight: 600;
}

.text-title-lg {
    font-family: var(--font-heading);
    font-size: 1.375rem; /* 22px */
    line-height: 1.273;
    font-weight: 500;
}

.text-label-lg {
    font-family: var(--font-heading);
    font-size: 0.875rem; /* 14px */
    line-height: 1.429;
    font-weight: 500;
}

.text-label-sm {
    font-family: var(--font-heading);
    font-size: 0.6875rem; /* 11px */
    line-height: 1.455;
    font-weight: 500;
}

.text-body-lg {
    font-family: var(--font-body);
    font-size: 1rem;     /* 16px */
    line-height: 1.5;
    font-weight: 400;
}

.text-body-md {
    font-family: var(--font-body);
    font-size: 0.875rem; /* 14px */
    line-height: 1.429;
    font-weight: 400;
}

/* Japanese text helper */
.text-jp {
    font-family: var(--font-jp);
}

/* ─── Color Utilities ─── */
.text-primary           { color: var(--color-primary); }
.text-primary-container { color: var(--color-primary-container); }
.text-teal              { color: var(--color-teal); }
.text-on-surface        { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-white             { color: #ffffff; }

.bg-primary             { background-color: var(--color-primary); }
.bg-primary-container   { background-color: var(--color-primary-container); }
.bg-surface             { background-color: var(--color-surface); }
.bg-surface-container   { background-color: var(--color-surface-container); }
.bg-white               { background-color: #ffffff; }

/* ─── Material Symbols ─── */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}
/* Filled variant for stars etc */
.material-symbols-outlined.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}