/* ═══════════════════════════════════════════════ DESIGN TOKENS — Single source of truth Load before all other stylesheets ═══════════════════════════════════════════════ */ :root { /* Colors */ --color-ink: #2C2C2C; --color-stone: #57534e; --color-faint: #8C8578; --color-faint-warm: #6E6860; /* darker warm faint — small-text faint that still holds AA (journey topbar + brand date) */ --color-paper: #F0EDE8; --color-card: #FAFAF7; --color-card-bright: #FEFDFB; /* grid card front + shoji panel — crisper figure/ground vs body */ --color-divider: #D8D2C8; --color-accent: #3D5A80; --color-gold: #C9A96E; --color-moss: #6B7F5C; --color-terracotta: #A35A4A; --color-terracotta-bg: rgba(163, 90, 74, 0.07); --color-kanji-on: #9E5E43; /* on'yomi terracotta — the kanji surfaces' borrowed-reading colour (pairs with accent-indigo kun; long hardcoded, tokenized 2026-07-16) */ --color-amber: #A07850; --color-amber-deep: #8A6E35; --color-moss-bright: #5B8C5A; --color-coral: #C07560; --color-gold-bright: #D4B87C; --color-paper-shimmer-lo: #EDEBE6; --color-paper-shimmer-hi: #F2F0EB; --color-pill-category: #8B7340; --color-pill-ippo: #7A5030; --color-pill-genki2: #4A6B48; --color-pill-supp: #5C564E; --color-jp-text: #523E1E; --color-romaji: #78716c; /* ── THE GROUND a room stands on ────────────────────────────────────── Default = the gallery wall's composited stone: the body's time-of-day paper seen through the seasonal veil (base.css paints the same two layers). CHROME THAT SLIDES OVER A ROOM — the settings rail, the browse rail, the nav band — paints THIS and never a raw --color-paper, or it reads a shade off the room behind it (2026-06-11 owner note on the browse rail). A room that lays its OWN paper re-points --room-ground for its lifetime (the 玄関 hall does, home-hall.css) so the one rail is the one surface in every room it can open over — measured 2026-08-07: the rail sat at #EDECE5 on the hall's #F0EDE8, and the seam showed. ── */ --room-ground: color-mix(in srgb, var(--seasonal-primary, transparent) calc(var(--seasonal-opacity, 0.08) * 100%), var(--body-bg, #F0EDE8)); /* Relation palette — one legend, read everywhere (docs/SURFACE_CONTRACT.md). Colors are NAMED in plain English only in the graph room's pinned legend; daylight surfaces inherit the hue at punctuation dose (elements 16px or smaller — the dose rule). Laws: sound-indigo always pairs with a DOTTED line so it can never be read as interactive --color-accent; ochre never marks achievement (gold is earned-only); gold never marks relations. */ --rel-similar: #3E8E55; /* matcha — similar meaning */ --rel-opposite: #9E3B2C; /* vermilion — opposite (the word page's 対 value, kept exact) */ --rel-sound: #3A5C9E; /* ai indigo — same sound (always dotted) */ --rel-writing: #7B4FA0; /* murasaki — same writing */ --rel-writing-rgb: 123, 79, 160; /* the same hue as an rgb triplet, for rgba() rings (constellation) */ --rel-kanji: #A87C3E; /* ochre thread — same character (darkened away from gold) */ --rel-loose: #AFA28D; /* loose tie */ --seal-lacquer: #C73E26; /* hanko red — kanji identity (hue-split from the opposite vermilion) */ /* Border radius */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-full: 999px; /* Shadows — warm sumi ink, not pure black */ --shadow-sm: 0 1px 3px rgba(44, 44, 44, 0.04); --shadow: 0 2px 8px rgba(44, 44, 44, 0.07); --shadow-lg: 0 4px 15px rgba(44, 44, 44, 0.12); --shadow-subtle: 0 1px 2px rgba(44, 44, 44, 0.03); --shadow-rest: 0 1px 2px rgba(44, 44, 44, 0.03), 0 8px 28px rgba(44, 44, 44, 0.045); --shadow-hover: 0 2px 4px rgba(44, 44, 44, 0.04), 0 12px 36px rgba(44, 44, 44, 0.07); /* Timing */ --duration-fast: 0.15s; --duration: 0.25s; --duration-slow: 0.4s; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Motion voice — three named curves (grid pass 2). New motion should pick one of these instead of minting another bezier. */ --ease-brush: cubic-bezier(0.16, 1, 0.3, 1); /* reveals, entrances */ --ease-settle: cubic-bezier(0.22, 1, 0.36, 1); /* lifts, presses, hovers */ --ease-page: cubic-bezier(0.4, 0.05, 0.15, 1); /* the card flip — turning washi */ /* ── THE SLIP — the house recipe for a floating piece of paper ── Owner ruling 2026-08-01: "premium" here has never meant geometry. The one surface this app calls beautiful (the kanji drawer) draws nothing — it is beautiful because its paper drinks the subject's own pigment, its corner is a 3px print corner rather than a 10px UI radius, and its ink is warm sumi rather than neutral black. Any surface that must float over the wall is cut from this stock. Consumers set --slip-tone (the subject's colour) and inherit the rest. ONE PAPER, ONE DRESS (round 4, 14 October 2026). The kanji peek and the sentence glance fell back to two papers and wore two shadows. Both are cut now from the glance's material, the slip the owner liked on 12 October: a sheet lighter than the page, no ring, a lit lip, a contact line and a lift thrown a little left, so the sheet has a side. */ --slip-paper: #FFFDF8; /* the sheet, a shade lighter than the stone */ --slip-tone: #b0a090; /* neutral clay fallback (kanji-page's own) */ --slip-ink: #3A3633; /* warm sumi — the drawer's ink, never #2C2C2C */ --slip-quiet: #6E6860; /* the ONE secondary grey. there is no third */ --slip-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); --slip-rest: 0 1px 2px rgba(58, 46, 32, 0.05), /* contact — inside the 0.03–0.06 ceiling */ 0 10px 24px -12px rgba(58, 46, 32, 0.16); --slip-air: 0 16px 34px -10px rgba(58, 46, 32, 0.13); /* the shadow while it is still in the air */ --slip-lip: inset 0 1px 0 rgba(255, 255, 255, 0.65); /* the sheet's lit top edge */ --slip-contact: 0 1px 2px rgba(58, 46, 32, 0.05); /* where the sheet touches the page */ --slip-lift: -8px 16px 36px -8px rgba(58, 46, 32, 0.16); /* lifted, thrown a little left */ --slip-in: 190ms; --slip-land: 300ms; --slip-out: 130ms; /* Typography */ --font-jp: 'Klee One', 'Noto Sans JP', serif; --font-ui: 'Inter', 'Noto Sans JP', sans-serif; /* The KOTOBA wordmark renders in --font-ui (Inter tracked caps, brand §8); the Shippori Mincho --font-wordmark token was retired 2026-07-16 (zero consumers). */ /* ── Short-name aliases (shared by learn-mode + exercises quiz surfaces) ── */ --paper: var(--color-paper); --ink: var(--color-ink); --stone: var(--color-stone); --faint: var(--color-faint); --card: var(--color-card); --divider: var(--color-divider); --accent: var(--color-accent); --gold: var(--color-gold); --moss: var(--color-moss); --terracotta: var(--color-terracotta); --terracotta-bg: var(--color-terracotta-bg); --amber: var(--color-amber); --amber-deep: var(--color-amber-deep); --moss-bright: var(--color-moss-bright); --coral: var(--color-coral); --gold-bright: var(--color-gold-bright); --jp-text: var(--color-jp-text); /* 4-type text system */ --kanji-family: var(--font-jp); --kanji-color: var(--ink); --kanji-weight: 400; --furigana-family: 'Noto Sans JP', sans-serif; --furigana-color: var(--terracotta); --furigana-weight: 500; --romaji-family: var(--font-ui); --romaji-color: var(--color-romaji); --romaji-weight: 400; --english-family: var(--font-ui); --english-color: var(--stone); --english-weight: 500; /* Layout */ --side: 20px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Stacking — the global lookup palette (Ctrl/Cmd+K) sits above every page-level surface. LAW (docs/SEARCH_ARCHITECTURE.md §5.4): no page surface exceeds z-index 9600 (hall 9500–9600 is today's ceiling); only transient pointer-blind feedback (.entity-peek, the closing vignette) may exceed the palette. */ --z-lookup-scrim: 9800; --z-lookup-palette: 9900; }