/* ===================================================================== ROOCHE DIGITAL — Foundations: Color + Type (DARK THEME) --------------------------------------------------------------------- Source of truth: "Rooche Digital Brand Book v1" (Figma). Brand palette: Red #EB1C30 · Dark #23262F · White #FFFFFF. Type: Poppins (display/headings) + SF Pro Display (body/UI). This file adapts the (light) brand book to a DARK canvas as requested, mapping the brand dark #23262F into a layered surface system and keeping red + white as the voltage on top. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=Shippori+Mincho:wght@500;600;700;800&display=swap'); :root { /* ---- BRAND CORE (verbatim from the brand book) -------------------- */ --brand-red: #EB1C30; /* primary brand color (39× in book) */ --brand-dark: #23262F; /* brand dark / ink (92×) */ --brand-white: #FFFFFF; /* brand white (197×) */ --brand-red-deep: #CA0014; /* darker red used in stationery */ --brand-red-soft: #FF5555; /* light red */ --brand-navy: #111E36; /* deep navy (text accent in book) */ --brand-blue: #8298CC; /* muted accent blue */ --brand-gray: #4F4F4F; /* hairline / stroke gray */ --brand-gray-2: #C4C4C4; /* light gray */ /* ---- DARK SURFACES (brand-dark expanded into a scale) ------------- */ --ink-900: #131519; /* page background — deepest */ --ink-850: #181B21; /* base surface */ --ink-800: #1E212A; /* card / panel */ --ink-750: #23262F; /* raised / hover — the literal brand dark */ --ink-700: #2B2F3A; /* pressed / inset */ --line-1: #313640; /* hairline border */ --line-2: #3D434F; /* strong border / divider */ /* ---- FOREGROUND --------------------------------------------------- */ --paper: #FFFFFF; --mute-300: #C4C4C4; /* secondary text (brand light gray) */ --mute-400: #9aa0ab; /* tertiary / captions */ --mute-500: #6c727d; /* faint / placeholder */ --mute-600: #4d535d; /* disabled */ /* ---- SEMANTIC: SURFACE -------------------------------------------- */ --bg: var(--ink-900); --surface: var(--ink-800); --surface-raised: var(--ink-750); --surface-inset: var(--ink-700); --border: var(--line-1); --border-strong: var(--line-2); /* ---- SEMANTIC: FOREGROUND ----------------------------------------- */ --fg1: var(--paper); /* primary text */ --fg2: var(--mute-300); /* secondary text */ --fg3: var(--mute-400); /* tertiary */ --fg-disabled: var(--mute-600); --fg-on-accent: #FFFFFF; /* text on red fills */ /* ---- SEMANTIC: ACCENT / STATE ------------------------------------- */ --accent: var(--brand-red); --accent-hover: #FF3346; /* lighten on dark for hover */ --accent-press: var(--brand-red-deep); --accent-soft: rgba(235,28,48,0.14); /* tinted fill on dark */ --focus-ring: var(--brand-red); --danger: var(--brand-red); --success: #36c98d; /* derived green for success states */ --info: var(--brand-blue); --red-glow: rgba(235,28,48,0.30); /* ---- TYPE FAMILIES ------------------------------------------------ */ /* Poppins = display + headings (geometric, the brand voice). SF Pro Display = body/UI; falls back to the system SF stack on non-Apple devices (see README — flagged substitution). */ --font-display: 'Poppins', 'Noto Sans JP', system-ui, sans-serif; --font-heading: 'Poppins', 'Noto Sans JP', system-ui, sans-serif; /* Editorial serif (Mincho) for large display headings & pull-quotes. Covers Latin + 日本語. Inspired by the Y-N10 reference. */ --font-serif: 'Shippori Mincho', 'Noto Serif JP', Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, 'Noto Sans JP', Arial, sans-serif; /* ---- WEIGHTS ------------------------------------------------------ */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* ---- TYPE SCALE (semantic) ---------------------------------------- */ /* Display — Poppins Bold, tight tracking (book: 40–53px in print; scaled up for screen). */ --display-1-size: clamp(2.75rem, 6.5vw, 5.5rem); --display-1-lh: 1.02; --display-1-ls: -0.03em; --display-2-size: clamp(2rem, 4vw, 3.25rem); --display-2-lh: 1.06; --display-2-ls: -0.025em; --h1-size: clamp(1.75rem, 3vw, 2.5rem); --h1-lh: 1.12; --h1-ls: -0.02em; --h2-size: clamp(1.375rem, 2.2vw, 1.75rem); --h2-lh: 1.18; --h2-ls: -0.015em; --h3-size: 1.25rem; --h3-lh: 1.3; --h3-ls: -0.01em; /* Body — SF Pro, book uses 14/20 */ --body-lg-size: 1.0625rem; --body-lg-lh: 1.65; --body-size: 0.9375rem; --body-lh: 1.6; --body-sm-size: 0.8125rem; --body-sm-lh: 1.55; /* Label / eyebrow — Poppins Bold, wide tracking (book: 15px/0.09em) */ --label-size: 0.75rem; --label-lh: 1; --label-ls: 0.09em; /* ---- RADII -------------------------------------------------------- */ /* Brand book uses sharp squares; we allow a small friendly radius for interactive UI while keeping brand marks sharp. */ --r-none: 0px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* ---- SPACING (4px base) ------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- ELEVATION ---------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 8px 24px -10px rgba(0,0,0,0.6); --shadow-pop: 0 20px 60px -20px rgba(0,0,0,0.75); --glow-red: 0 8px 30px -8px var(--red-glow); /* ---- MOTION ------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur: 280ms; --dur-slow: 560ms; } /* ===================================================================== SEMANTIC TYPE CLASSES ===================================================================== */ .display-1 { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--display-1-size); line-height:var(--display-1-lh); letter-spacing:var(--display-1-ls); color:var(--fg1); } .display-2 { font-family:var(--font-display); font-weight:var(--w-bold); font-size:var(--display-2-size); line-height:var(--display-2-lh); letter-spacing:var(--display-2-ls); color:var(--fg1); } .h1 { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:var(--h1-size); line-height:var(--h1-lh); letter-spacing:var(--h1-ls); color:var(--fg1); } .h2 { font-family:var(--font-heading); font-weight:var(--w-semibold); font-size:var(--h2-size); line-height:var(--h2-lh); letter-spacing:var(--h2-ls); color:var(--fg1); } .h3 { font-family:var(--font-heading); font-weight:var(--w-semibold); font-size:var(--h3-size); line-height:var(--h3-lh); letter-spacing:var(--h3-ls); color:var(--fg1); } .body-lg { font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--body-lg-size); line-height:var(--body-lg-lh); color:var(--fg2); } .body { font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--body-size); line-height:var(--body-lh); color:var(--fg2); } .body-sm { font-family:var(--font-body); font-weight:var(--w-regular); font-size:var(--body-sm-size); line-height:var(--body-sm-lh); color:var(--fg3); } .label { font-family:var(--font-heading); font-weight:var(--w-bold); font-size:var(--label-size); line-height:var(--label-lh); letter-spacing:var(--label-ls); text-transform:uppercase; color:var(--fg3); }