/* ===================================================================== MTK — Tier 2: SCHOLARSHIP THEME (奨学金) --------------------------------------------------------------------- Defines the SEMANTIC tokens (--bg, --text, --brand-accent, …) that components actually consume. Scope: anything inside .theme-scholarship (we'll put that class on for the scholarship page). Identity: warm cream + brown, GREEN accent, rounded Zen Maru Gothic. Axis: mobile-first (375 device, 720 max width). ===================================================================== */ .theme-scholarship { /* ---- Theme-only color literals ---------------------------------- */ --color-green: #4fb3aa; /* Brand/Gleen (3rd accent) */ --color-cream-deep: #dfdac5; /* Background/Secondary */ --font-zen-maru: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; /* ---- Semantic: surfaces ----------------------------------------- */ --bg: var(--color-cream-1); /* #f7f3e9 page background */ --surface: var(--color-white); --surface-warm: var(--color-cream-2); /* #f9f4ee cards/sections */ --surface-sunk: var(--color-cream-3); /* #f5f0e3 */ --surface-deep: var(--color-cream-deep); /* #dfdac5 */ --surface-dark: var(--color-brown); /* dark sections */ --surface-cool: var(--color-cool); /* #f0f6ff */ /* ---- Semantic: text --------------------------------------------- */ --text: var(--color-brown); /* #483737 primary */ --text-muted: var(--color-grey); /* #958f8f */ --text-on-dark: var(--color-white); /* ---- Semantic: brand / accents ---------------------------------- */ --brand: var(--color-yellow); /* primary brand */ --brand-accent: var(--color-green); /* GREEN — the differentiator */ --brand-alt: var(--color-red); /* ---- Semantic: lines -------------------------------------------- */ --border: var(--color-border); --border-strong: var(--color-brown); /* ---- Semantic: type roles --------------------------------------- */ --font-heading: var(--font-zen-maru); /* rounded, friendly */ --font-body: var(--font-noto-jp); --font-num: var(--font-outfit); /* ---- Spacing / Mobile mode -------------------------------------- */ --space-m: 1.25rem; /* 20 */ --space-l: 1.5rem; /* 24 */ --space-xl: 2rem; /* 32 */ --space-xxl: 2.5rem; /* 40 */ --space-xxxl: 4rem; /* 64 */ /* ---- Layout ------------------------------------------------------- These mirror Figma's Size collection. Btn_max is intentionally 999px in Mobile mode, which behaves as an effectively unbounded max-width. */ --device-width: 23.4375rem; /* 375 */ --content: 23.4375rem; /* 375 */ /* Cap = the desktop max (960). On mobile the viewport is always smaller, so min(100% - 2rem, --content-max) fills the screen minus padding — it never pins to 375 anymore. */ --content-max: 60rem; /* 960 */ --content-small: 23.4375rem; /* 375 */ --measure: var(--content-small); --button-max: 62.4375rem; /* 999 */ /* ---- Fontsize / Mobile mode ------------------------------------- */ --size-h1: 2rem; /* 32 */ --size-h2: 1.625rem; /* 26 */ --size-subh2: 1rem; /* 16 */ --size-h3: 1.5rem; /* 24 */ --size-h4: 1.25rem; /* 20 */ --size-h5: 1.125rem; /* 18 */ --size-large: 1.125rem; /* 18 */ --size-medium: 1rem; /* 16 */ --size-body: var(--size-medium); --schol-hero-subtitle-size: var(--size-h3); --schol-body-size: var(--size-medium); --schol-small-size: 0.875rem; --schol-number-size: 2rem; --schol-faq-label-size: 0.875rem; --schol-faq-question-size: 1.125rem; --schol-faq-answer-size: 1.125rem; --schol-interview-label-size: 0.875rem; --schol-interview-question-size: 1.125rem; --schol-interview-answer-size: 1.125rem; } @media (min-width: 48rem) { .theme-scholarship { /* Spacing / Desktop mode */ --space-m: 1.5rem; /* 24 */ --space-l: 2.25rem; /* 36 */ --space-xl: 2.5rem; /* 40 */ --space-xxl: 4rem; /* 64 */ --space-xxxl: 5rem; /* 80 */ /* Size / Desktop mode */ --device-width: 87.5rem; /* 1400 */ --content: 60rem; /* 960 */ --content-max: var(--content); --content-small: 40rem; /* 640 */ --measure: var(--content-small); --button-max: 25rem; /* 400 */ /* Fontsize / Desktop mode */ --size-h1: 3.375rem; /* 54 */ --size-h2: 2rem; /* 32 */ --size-subh2: 1.25rem; /* 20 */ --size-h3: 1.75rem; /* 28 */ --size-h4: 1.5rem; /* 24 */ --size-h5: 1.375rem; /* 22 */ --size-large: 1.25rem; /* 20 */ --size-medium: 1.125rem; /* 18 */ --size-body: var(--size-medium); --schol-hero-subtitle-size: var(--size-h3); --schol-body-size: var(--size-medium); --schol-small-size: 1rem; --schol-number-size: 2.625rem; } }