/* ============================================================================= IKIHONKA DESIGN SYSTEM — TOKENS ============================================================================ Versio: 1.0 Päivätty: 4.5.2026 Käyttö: tuo tämä tiedosto kaikkiin Ikihonka-projekteihin: Periaate: Älä koskaan kovakoodaa väriä, fontti­kokoa tai välistystä missään muualla projektissa. Käytä aina näitä muuttujia. Jos tarvitset arvon jota ei ole, lisää se tähän tiedostoon ensin. ============================================================================ */ :root { /* =========================================================================== 1. VÄRIT — KOSMOLOGINEN PERUSTA =========================================================================== Värit eivät ole esteettinen valinta — ne ovat juuriverkoston terveys- mittari. Sininen = Kalmansuo (kuoleva). Keltainen = tavallinen metsä (terve). Oranssi = juurisolmu (poikkeuksellisen voimakas). Tämä logiikka pätee sekä sivustoilla että pelin sisällä. =========================================================================== */ /* --- Pohjasävyt: yö metsässä, sumu, sammal --- */ --color-bg-deep: #0a0d0a; /* Syvin tausta — yö, hiljaisuus */ --color-bg-base: #0d1410; /* Perustausta — havumetsän hämärä */ --color-bg-elevated: #141a16; /* Korotettu pinta — kortti, dialogi */ --color-bg-overlay: #1a201c; /* Overlay päällä — modaali, valikko */ /* --- Tekstisävyt: vaaleneva sumu kohti vaaleampaa valoa --- */ --color-fg-primary: #e8e3d6; /* Ensisijainen teksti — luonnonvalkoinen */ --color-fg-secondary: #a8a293; /* Toissijainen teksti — sumun harmaa */ --color-fg-tertiary: #6b665a; /* Hiipunut teksti — kaukainen muisti */ --color-fg-faded: #4a4640; /* Tuskin näkyvä — reunat, viivat */ /* --- Juuriverkoston värit: kosmologinen ekologia --- */ --color-root-warm: #c9a875; /* Lämmin oranssi — terve juurisolmu, hehku */ --color-root-warm-deep: #8a6f44; /* Syvä oranssi — kaiverruksen pohja */ --color-root-warm-soft: #e8c896; /* Pehmeä oranssi — hehkun reuna */ --color-root-yellow: #d4c875; /* Vaaleankeltainen — tavallinen metsä */ --color-root-cold: #5a6b75; /* Kylmä sininen — Kalmansuo */ /* --- Tilavärit (käytetään säästeliäästi) --- */ --color-state-warning: #b08850; /* Varoitus — sammuvan nuotion sävy */ --color-state-success: #7a8a6b; /* Onnistuminen — terve sammal */ --color-state-error: #8a5050; /* Virhe — vanhan veren sävy, EI kirkas */ /* --- Reunat ja viivat --- */ --color-border-subtle: rgba(232, 227, 214, 0.08); --color-border-base: rgba(232, 227, 214, 0.15); --color-border-strong: rgba(232, 227, 214, 0.30); /* =========================================================================== 2. TYPOGRAFIA =========================================================================== Kaksi fonttia, ei enempää. Cormorant Garamond on kosmologian ääni (otsikot, monologit, hitaat hetket). Inter on rajapinnan ääni (valikot, asetukset, käytännöllinen teksti). Niitä EI sekoiteta samassa hetkessä — yksi tilanne, yksi fontti. =========================================================================== */ /* --- Fonttiperheet --- */ --font-display: 'Cormorant Garamond', 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Courier New', monospace; /* --- Fonttipainot --- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; /* --- Fonttikoot — perustuvat 1.250 (major third) -skaalaan --- */ --text-xs: 0.75rem; /* 12px — meta-info, tekijänoikeus */ --text-sm: 0.875rem; /* 14px — pieni teksti, footer */ --text-base: 1rem; /* 16px — runkoteksti */ --text-md: 1.125rem; /* 18px — korostettu runko */ --text-lg: 1.25rem; /* 20px — alaotsikko */ --text-xl: 1.563rem; /* 25px — pieni otsikko */ --text-2xl: 1.953rem; /* 31px — keskitason otsikko */ --text-3xl: 2.441rem; /* 39px — iso otsikko */ --text-4xl: 3.052rem; /* 49px — hero-otsikko */ --text-5xl: 3.815rem; /* 61px — todella iso */ --text-6xl: 4.768rem; /* 76px — display */ /* --- Rivinkorkeudet --- */ --leading-tight: 1.1; /* Isot otsikot */ --leading-snug: 1.3; /* Otsikot */ --leading-normal: 1.5; /* Runkoteksti */ --leading-relaxed: 1.65; /* Pitkä luettava teksti */ --leading-loose: 1.85; /* Monologi, runo, hidas teksti */ /* --- Kirjainvälit (letter-spacing) --- */ --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.05em; --tracking-widest: 0.15em; /* Pienet versaalit, footer */ --tracking-display: 0.4em; /* Studio-merkki, eyebrow-teksti */ /* =========================================================================== 3. VÄLISTYS — 4 PIKSELIN PERUSYKSIKKÖ =========================================================================== Kaikki välistys on kerrannainen 4:stä. Jos jotain on "noin 17 pikseliä", se on väärin — valitse 16 tai 20. =========================================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ /* =========================================================================== 4. REUNAT JA PYÖRISTYKSET =========================================================================== Ikihonka käyttää kovia kulmia tai hyvin pehmeitä — ei mitään välistä. Periaate: kivi on terävä, paperi on pehmeä. Ei mitään nykyaikaisen SaaS-näköistä "8px pyöristystä". =========================================================================== */ --radius-none: 0; --radius-sm: 2px; /* Tuskin näkyvä — vain reunan pehmennys */ --radius-soft: 16px; /* Pehmeä — kortti, dialogi */ --radius-full: 9999px; /* Pyöreä — vain harvoin (ympyräkomponentit) */ --border-width-thin: 1px; --border-width-base: 1px; --border-width-strong: 2px; /* =========================================================================== 5. VARJOT — VALON OHJAUSTA, EI KOROSTUSTA =========================================================================== Varjot eivät ole "nostavia drop shadows" SaaS-tyyliin, vaan vignetin kaltaisia syventymiä. Käytetään hyvin säästeliäästi. =========================================================================== */ --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-deep: 0 12px 48px rgba(0, 0, 0, 0.6); --shadow-vignette: inset 0 0 120px rgba(0, 0, 0, 0.5); --shadow-glow-warm: 0 0 32px rgba(201, 168, 117, 0.25); /* Juurihehkun valo */ /* =========================================================================== 6. ANIMAATIOT — KAIKKI ON HIDASTA =========================================================================== Ikihongan koko sielu on hitaudessa. Mikään animaatio ei saa olla nopea. Standardit on tarkoituksella hitaampia kuin web-suosituksissa (joissa suositellaan 200-300ms). Täällä lähtötaso on 600ms. =========================================================================== */ --duration-instant: 100ms; /* Vain hover-tilan väri jne. */ --duration-quick: 300ms; /* Pieni interaktio */ --duration-base: 600ms; /* Standardi siirtymä */ --duration-slow: 1200ms; /* Sisältöblokin saapuminen */ --duration-very-slow: 2400ms; /* Suuri tunnelmasiirtymä, fade-in */ --duration-breath: 4000ms; /* "Hengittävä" loop, hidas pulssi */ /* --- Easing-käyrät — ei tasaisia, ei napsahtavia --- */ --ease-natural: cubic-bezier(0.25, 0.1, 0.25, 1); /* Luonnollinen, oletus */ --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1); /* Hidas tulo, pehmeä loppu */ --ease-in-soft: cubic-bezier(0.7, 0, 0.84, 0); /* Pehmeä alku, kiihtyvä loppu */ --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); /* Hengitysmäinen edestakaisin */ /* =========================================================================== 7. LAYOUT — SIVUSTOJEN MITAT =========================================================================== =========================================================================== */ --max-width-prose: 40rem; /* 640px — luettavan tekstin maksimi */ --max-width-content: 72rem; /* 1152px — sisältöalue */ --max-width-wide: 96rem; /* 1536px — koko leveä layout */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; /* =========================================================================== 8. Z-INDEX — KERROKSITTAIN =========================================================================== =========================================================================== */ --z-base: 1; --z-elevated: 10; --z-overlay: 100; --z-modal: 1000; --z-tooltip: 10000; /* =========================================================================== 9. PELI-SPESIFISET TOKENIT (UI pelin sisällä) =========================================================================== Nämä on tarkoitettu siirrettäväksi Godotiin/Unityyn theme-resourceksi myöhemmin. Verkossa niitä voi käyttää pelin sivujen prototypointiin ja UI-mockuppien rakentamiseen. =========================================================================== */ /* --- Diegeettinen teksti: Kulkijan monologit ruudulla --- */ --game-monologue-font: var(--font-display); --game-monologue-style: italic; --game-monologue-weight: var(--weight-light); --game-monologue-size: 1.4rem; --game-monologue-color: rgba(232, 227, 214, 0.85); --game-monologue-tracking: var(--tracking-wide); --game-monologue-leading: var(--leading-loose); --game-monologue-fade-in: var(--duration-very-slow); --game-monologue-hold-min: 6000ms; /* Min. lukuaika ruudulla */ --game-monologue-fade-out: var(--duration-slow); --game-monologue-position: bottom-third; /* Sijainti ruudulla */ /* --- Ei-diegeettinen teksti: valikot, asetukset --- */ --game-ui-font: var(--font-display); --game-ui-weight: var(--weight-regular); --game-ui-size-menu: 1.5rem; --game-ui-size-option: 1.125rem; --game-ui-tracking: var(--tracking-wider); --game-ui-color: var(--color-fg-primary); --game-ui-color-hover: var(--color-root-warm); --game-ui-color-disabled: var(--color-fg-tertiary); --game-ui-transition: color var(--duration-base) var(--ease-natural); /* --- Tallennusilmoitus, oikea alakulma --- */ --game-notification-font: var(--font-body); --game-notification-size: 0.875rem; --game-notification-color: var(--color-fg-secondary); --game-notification-fade: var(--duration-very-slow); /* --- Latausnäyttö, lukunäyttö --- */ --game-loading-bg: var(--color-bg-deep); --game-loading-text-color: var(--color-fg-tertiary); --game-loading-min-duration: 2000ms; /* Älä näytä < 2s */ } /* ============================================================================= PERUSTYYLIT — käytetään aina tokens.css mukana ============================================================================= */ * { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; font-family: var(--font-body); font-weight: var(--weight-light); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-fg-primary); background: var(--color-bg-base); letter-spacing: var(--tracking-wide); } ::selection { background: var(--color-root-warm); color: var(--color-bg-deep); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }