/* =============================================
FLOYO — Colors & Typography System
v3 — Dark / Light Dual Theme + Editorial Typo
============================================= */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Noto+Sans+JP:wght@300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@400;500;700;900&family=Shippori+Mincho:wght@400;500;700;800&family=Space+Mono:wght@400;700&family=Big+Shoulders+Display:wght@400;700;800;900&display=swap');

/* ---------- Default Theme (Dark) ---------- */
:root {
/* Base palette */
--c-black:       #000000;
--c-white:       #ffffff;
--c-off-white:   #f5f5f5;

/* Theme tokens (overridden by data-theme) */
--c-bg:          #0a0a0a;
--c-bg-1:        #111111;
--c-bg-2:        #181818;
--c-bg-3:        #1f1f1f;
--c-surface:     #0a0a0a;
--c-surface-2:   #141414;

--c-text:        #ffffff;
--c-text-2:      #c4c4c4;
--c-text-3:      #7a7a7a;
--c-text-muted:  #545454;
--c-text-inv:    #0a0a0a;

--c-border:      rgba(255, 255, 255, 0.10);
--c-border-2:    rgba(255, 255, 255, 0.22);
--c-border-3:    rgba(255, 255, 255, 0.45);

/* Gray scale */
--c-gray-900:    #1a1a1a;
--c-gray-800:    #2a2a2a;
--c-gray-700:    #3a3a3a;
--c-gray-600:    #545454;
--c-gray-500:    #7a7a7a;
--c-gray-400:    #a0a0a0;
--c-gray-300:    #c4c4c4;
--c-gray-200:    #dedede;
--c-gray-100:    #ececec;

/* Purple accent */
--c-purple-deep: #2b1568;
--c-purple:      #6b21d6;
--c-purple-mid:  #7c3aed;
--c-purple-lite: #a78bfa;
--c-purple-glow: #8b5cf6;
--c-accent:      #7c3aed;
--c-accent-2:    #a855f7;
--c-accent-glow: #c084fc;

/* Gradients */
--g-purple:        linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);

/* Layout */
--cinema-bar:    32px;
--nav-h:         70px;

/* Type */
--f-sans:        'Inter', 'Noto Sans JP', system-ui, sans-serif;
--f-jp:          'Noto Sans JP', 'Inter', sans-serif;
--f-display:     'Shippori Mincho', 'Noto Serif JP', 'Times New Roman', serif;
--f-condensed:   'Big Shoulders Display', 'Inter', sans-serif;
--f-mono:        'Space Mono', 'SF Mono', Menlo, monospace;

/* Easing */
--ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- Light Theme ---------- */
[data-theme="light"] {
--c-bg:          #f5f5f4;
--c-bg-1:        #ececea;
--c-bg-2:        #e2e2df;
--c-bg-3:        #d8d8d4;
--c-surface:     #ffffff;
--c-surface-2:   #f0f0ee;

--c-text:        #0a0a0a;
--c-text-2:      #3a3a3a;
--c-text-3:      #7a7a7a;
--c-text-muted:  #a0a0a0;
--c-text-inv:    #ffffff;

--c-border:      rgba(0, 0, 0, 0.10);
--c-border-2:    rgba(0, 0, 0, 0.22);
--c-border-3:    rgba(0, 0, 0, 0.45);
}

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

html { scroll-behavior: smooth; }

body.floyo-base {
font-family: var(--f-jp);
font-weight: 400;
background: var(--c-bg);
color: var(--c-text);
line-height: 1.75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background 0.6s var(--ease-out), color 0.6s var(--ease-out);
}

/* ---------- Type scale ---------- */
.t-eyebrow {
font-family: var(--f-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-text-2);
}
.t-eyebrow.is-purple { color: var(--c-purple-lite); }

.t-display {
font-family: var(--f-sans);
font-weight: 900;
letter-spacing: -0.045em;
line-height: 0.9;
font-size: clamp(48px, 10vw, 200px);
}

.t-display-serif {
font-family: var(--f-display);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.15;
font-size: clamp(32px, 5vw, 72px);
}

.t-h1 {
font-family: var(--f-jp);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
font-size: clamp(30px, 5vw, 64px);
}

.t-h1-en {
font-family: var(--f-sans);
font-weight: 900;
letter-spacing: -0.04em;
line-height: 1;
font-size: clamp(36px, 6vw, 84px);
text-transform: uppercase;
}

.t-h2 {
font-family: var(--f-jp);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
font-size: clamp(22px, 3vw, 38px);
}

.t-h3 {
font-family: var(--f-jp);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.35;
font-size: clamp(18px, 1.8vw, 24px);
}

.t-body {
font-family: var(--f-jp);
font-weight: 400;
font-size: clamp(14px, 1vw, 16px);
line-height: 1.95;
color: var(--c-text-2);
}

.t-small {
font-family: var(--f-jp);
font-size: 12px;
line-height: 1.7;
color: var(--c-text-3);
}

.t-mono {
font-family: var(--f-mono);
letter-spacing: 0.05em;
}

/* ---------- Utility ---------- */
a { color: inherit; text-decoration: none; }
img, video, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection {
background: var(--c-purple-mid);
color: white;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-gray-700); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--c-purple); }