/* ================================================================ NOZOE STUDIO · DESIGN SYSTEM v1.0.0 — CSS Custom Properties Tokio · Lima / 東京・リマ ================================================================ Usage: 1. Import this file once at the root of your project. 2. Use semantic tokens in components (--ns-text-primary, etc.) 3. Toggle dark mode via [data-theme="dark"] on or — or rely on prefers-color-scheme automatically. ================================================================ */ /* ---------------------------------------------------------------- 1. FONT IMPORT Google Fonts CDN. Replace with self-hosted .woff2 in production. ---------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;800&family=Noto+Sans+JP:wght@400;600&display=swap'); /* ---------------------------------------------------------------- 2. PRIMITIVE TOKENS — Raw palette. Never reference in components. ---------------------------------------------------------------- */ :root { /* Ink (brand navy) */ --ns-ink-50: #F0F2F5; --ns-ink-100: #D8DCE4; --ns-ink-200: #B5BDCC; --ns-ink-300: #8B97AE; --ns-ink-400: #67748F; --ns-ink-500: #475773; --ns-ink-600: #324461; --ns-ink-700: #243450; --ns-ink-800: #1D2A40; /* brand */ --ns-ink-900: #131C2C; --ns-ink-950: #0A1119; /* Orange (accent — máx 5%) */ --ns-orange-50: #FFEEE6; --ns-orange-100: #FCE8DD; --ns-orange-200: #FAC4A8; --ns-orange-300: #F7A077; --ns-orange-400: #F4754A; --ns-orange-500: #E94E1B; /* brand */ --ns-orange-600: #D14418; --ns-orange-700: #B83C15; --ns-orange-800: #8B2D10; --ns-orange-900: #5D1E0B; /* Sky (cool neutral) */ --ns-sky-50: #F4F8FE; --ns-sky-100: #E8EFF8; --ns-sky-200: #C6D5EA; /* brand */ --ns-sky-300: #A8BDD8; --ns-sky-400: #8B9DB7; /* brand */ --ns-sky-500: #6E84A2; --ns-sky-600: #566B89; --ns-sky-700: #3F5471; /* Warm (off-white / Swiss-warm) */ --ns-warm-50: #FBFAF7; --ns-warm-100: #F8F5EF; --ns-warm-200: #F4F1EC; /* brand */ --ns-warm-300: #ECE7DF; --ns-warm-400: #E0D9CD; --ns-warm-500: #C8BFB0; /* Feedback */ --ns-success-subtle: #E5F1E8; --ns-success-default: #3E8E5C; --ns-success-strong: #2A6E45; --ns-warning-subtle: #FBF1DC; --ns-warning-default: #C28A0E; --ns-warning-strong: #8C6308; --ns-danger-subtle: #FBE3E0; --ns-danger-default: #C63A2D; --ns-danger-strong: #8E281F; --ns-info-subtle: #E1ECF7; --ns-info-default: #2C6BB0; --ns-info-strong: #1F4D80; /* ---------------------------------------------------------------- 3. TYPOGRAPHY PRIMITIVES ---------------------------------------------------------------- */ --ns-font-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif; --ns-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --ns-font-jp: 'Noto Sans JP', 'Nunito', sans-serif; --ns-fw-light: 300; --ns-fw-regular: 400; --ns-fw-semibold: 600; --ns-fw-extrabold: 800; --ns-fs-xs: 0.75rem; /* 12 */ --ns-fs-sm: 0.875rem; /* 14 */ --ns-fs-base: 1rem; /* 16 */ --ns-fs-md: 1.125rem; /* 18 */ --ns-fs-lg: 1.375rem; /* 22 */ --ns-fs-xl: 1.75rem; /* 28 */ --ns-fs-2xl: 2.5rem; /* 40 */ --ns-fs-3xl: 3.5rem; /* 56 */ --ns-fs-4xl: 4.5rem; /* 72 */ --ns-fs-5xl: 6rem; /* 96 */ --ns-lh-tight: 1.05; --ns-lh-snug: 1.2; --ns-lh-normal: 1.5; --ns-lh-relaxed: 1.65; --ns-ls-tightest: -0.04em; --ns-ls-tighter: -0.02em; --ns-ls-tight: -0.01em; --ns-ls-normal: 0em; --ns-ls-wide: 0.04em; --ns-ls-wider: 0.08em; --ns-ls-widest: 0.16em; /* ---------------------------------------------------------------- 4. SPACING — 4px base ---------------------------------------------------------------- */ --ns-space-0: 0; --ns-space-px: 1px; --ns-space-0_5: 0.125rem; /* 2 */ --ns-space-1: 0.25rem; /* 4 */ --ns-space-2: 0.5rem; /* 8 */ --ns-space-3: 0.75rem; /* 12 */ --ns-space-4: 1rem; /* 16 */ --ns-space-5: 1.25rem; /* 20 */ --ns-space-6: 1.5rem; /* 24 */ --ns-space-8: 2rem; /* 32 */ --ns-space-10: 2.5rem; /* 40 */ --ns-space-12: 3rem; /* 48 */ --ns-space-16: 4rem; /* 64 */ --ns-space-20: 5rem; /* 80 */ --ns-space-24: 6rem; /* 96 */ --ns-space-32: 8rem; /* 128 */ --ns-space-40: 10rem; /* 160 */ --ns-space-48: 12rem; /* 192 */ /* ---------------------------------------------------------------- 5. RADIUS — Mínimo, casi cuadrado ---------------------------------------------------------------- */ --ns-radius-none: 0; --ns-radius-xs: 2px; --ns-radius-sm: 3px; --ns-radius-md: 4px; --ns-radius-pill: 9999px; /* ---------------------------------------------------------------- 6. BORDER WIDTHS ---------------------------------------------------------------- */ --ns-bw-0: 0; --ns-bw-1: 1px; --ns-bw-2: 2px; --ns-bw-4: 4px; /* ---------------------------------------------------------------- 7. ELEVATION — Subtle, ink-based ---------------------------------------------------------------- */ --ns-elev-0: none; --ns-elev-1: 0 1px 2px rgba(29, 42, 64, 0.06); --ns-elev-2: 0 2px 4px rgba(29, 42, 64, 0.06), 0 4px 12px rgba(29, 42, 64, 0.04); --ns-elev-3: 0 8px 16px rgba(29, 42, 64, 0.08), 0 16px 32px rgba(29, 42, 64, 0.04); --ns-elev-focus: 0 0 0 3px rgba(233, 78, 27, 0.24); /* ---------------------------------------------------------------- 8. MOTION ---------------------------------------------------------------- */ --ns-dur-instant: 0ms; --ns-dur-fast: 150ms; --ns-dur-base: 250ms; --ns-dur-slow: 400ms; --ns-dur-slower: 600ms; --ns-ease-linear: linear; --ns-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ns-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ns-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ns-ease-anticipate: cubic-bezier(0.6, -0.05, 0.35, 1); /* ---------------------------------------------------------------- 9. LAYOUT ---------------------------------------------------------------- */ --ns-bp-sm: 640px; --ns-bp-md: 768px; --ns-bp-lg: 1024px; --ns-bp-xl: 1280px; --ns-bp-2xl: 1536px; --ns-container-narrow: 720px; --ns-container-default: 1200px; --ns-container-wide: 1440px; --ns-grid-cols-desktop: 12; --ns-grid-cols-tablet: 8; --ns-grid-cols-mobile: 4; --ns-grid-gutter: 24px; --ns-grid-margin: 80px; /* ---------------------------------------------------------------- 10. Z-INDEX ---------------------------------------------------------------- */ --ns-z-behind: -1; --ns-z-base: 0; --ns-z-raised: 10; --ns-z-dropdown: 100; --ns-z-sticky: 200; --ns-z-overlay: 300; --ns-z-modal: 400; --ns-z-toast: 500; --ns-z-tooltip: 600; /* ---------------------------------------------------------------- 11. COMPONENT TOKENS ---------------------------------------------------------------- */ --ns-btn-h-sm: 32px; --ns-btn-h-md: 40px; --ns-btn-h-lg: 48px; --ns-btn-px-sm: var(--ns-space-3); --ns-btn-px-md: var(--ns-space-5); --ns-btn-px-lg: var(--ns-space-6); --ns-input-h-sm: 32px; --ns-input-h-md: 40px; --ns-input-h-lg: 48px; --ns-card-padding: var(--ns-space-6); --ns-card-padding-large: var(--ns-space-8); } /* ================================================================ 12. SEMANTIC TOKENS — LIGHT MODE (default) Use these in components. ================================================================ */ :root, [data-theme="light"] { /* Surface */ --ns-surface-base: var(--ns-warm-200); --ns-surface-raised: #FFFFFF; --ns-surface-sunken: var(--ns-warm-300); --ns-surface-inverse: var(--ns-ink-800); /* Text */ --ns-text-primary: var(--ns-ink-800); --ns-text-secondary: var(--ns-ink-500); --ns-text-tertiary: var(--ns-sky-400); --ns-text-disabled: var(--ns-sky-300); --ns-text-inverse: var(--ns-warm-200); --ns-text-on-accent: #FFFFFF; --ns-text-accent: var(--ns-orange-500); /* Border */ --ns-border-subtle: var(--ns-warm-400); --ns-border-default: var(--ns-sky-200); --ns-border-strong: var(--ns-sky-400); --ns-border-focus: var(--ns-orange-500); --ns-border-inverse: var(--ns-ink-800); /* Accent */ --ns-accent-subtle: var(--ns-orange-100); --ns-accent: var(--ns-orange-500); --ns-accent-hover: var(--ns-orange-600); --ns-accent-active: var(--ns-orange-700); } /* ================================================================ 13. SEMANTIC TOKENS — DARK MODE ================================================================ */ [data-theme="dark"] { --ns-surface-base: var(--ns-ink-950); --ns-surface-raised: var(--ns-ink-800); --ns-surface-sunken: #080E18; --ns-surface-inverse: var(--ns-warm-200); --ns-text-primary: var(--ns-warm-200); --ns-text-secondary: var(--ns-sky-200); --ns-text-tertiary: var(--ns-sky-400); --ns-text-disabled: var(--ns-ink-500); --ns-text-inverse: var(--ns-ink-800); --ns-text-on-accent: #FFFFFF; --ns-text-accent: #FF6B3D; --ns-border-subtle: var(--ns-ink-800); --ns-border-default: var(--ns-ink-700); --ns-border-strong: var(--ns-ink-500); --ns-border-focus: #FF6B3D; --ns-border-inverse: var(--ns-warm-200); --ns-accent-subtle: #2A1812; --ns-accent: #FF6B3D; --ns-accent-hover: #FF7E55; --ns-accent-active: #FF8E69; /* Elevation in dark mode uses pure black for depth */ --ns-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3); --ns-elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); --ns-elev-3: 0 8px 16px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.2); --ns-elev-focus: 0 0 0 3px rgba(255, 107, 61, 0.32); } /* Auto-dark when user prefers dark and no explicit theme set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ns-surface-base: var(--ns-ink-950); --ns-surface-raised: var(--ns-ink-800); --ns-surface-sunken: #080E18; --ns-surface-inverse: var(--ns-warm-200); --ns-text-primary: var(--ns-warm-200); --ns-text-secondary: var(--ns-sky-200); --ns-text-tertiary: var(--ns-sky-400); --ns-text-disabled: var(--ns-ink-500); --ns-text-inverse: var(--ns-ink-800); --ns-text-accent: #FF6B3D; --ns-border-subtle: var(--ns-ink-800); --ns-border-default: var(--ns-ink-700); --ns-border-strong: var(--ns-ink-500); --ns-border-focus: #FF6B3D; --ns-accent-subtle: #2A1812; --ns-accent: #FF6B3D; --ns-accent-hover: #FF7E55; --ns-accent-active: #FF8E69; --ns-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3); --ns-elev-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); --ns-elev-3: 0 8px 16px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.2); } } /* ================================================================ 14. BASE RESET — minimal, opinionated ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-feature-settings: "kern", "liga", "calt"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--ns-surface-base); color: var(--ns-text-primary); font-family: var(--ns-font-sans); font-size: var(--ns-fs-base); line-height: var(--ns-lh-normal); font-weight: var(--ns-fw-regular); } /* ================================================================ 15. UTILITY CLASSES — Typography ================================================================ */ .ns-display-xl { font: var(--ns-fw-extrabold) var(--ns-fs-5xl)/var(--ns-lh-tight) var(--ns-font-sans); letter-spacing: var(--ns-ls-tightest); } .ns-display-l { font: var(--ns-fw-extrabold) var(--ns-fs-4xl)/var(--ns-lh-tight) var(--ns-font-sans); letter-spacing: var(--ns-ls-tighter); } .ns-display-m { font: var(--ns-fw-extrabold) var(--ns-fs-3xl)/var(--ns-lh-tight) var(--ns-font-sans); letter-spacing: var(--ns-ls-tighter); } .ns-h1 { font: var(--ns-fw-extrabold) var(--ns-fs-2xl)/var(--ns-lh-snug) var(--ns-font-sans); letter-spacing: var(--ns-ls-tight); } .ns-h2 { font: var(--ns-fw-semibold) var(--ns-fs-xl)/var(--ns-lh-snug) var(--ns-font-sans); letter-spacing: var(--ns-ls-tight); } .ns-h3 { font: var(--ns-fw-semibold) var(--ns-fs-lg)/var(--ns-lh-snug) var(--ns-font-sans); } .ns-h4 { font: var(--ns-fw-semibold) var(--ns-fs-md)/var(--ns-lh-snug) var(--ns-font-sans); } .ns-body-l { font: var(--ns-fw-regular) var(--ns-fs-md)/var(--ns-lh-relaxed) var(--ns-font-sans); } .ns-body { font: var(--ns-fw-regular) var(--ns-fs-base)/var(--ns-lh-normal) var(--ns-font-sans); } .ns-body-s { font: var(--ns-fw-regular) var(--ns-fs-sm)/var(--ns-lh-normal) var(--ns-font-sans); } .ns-caption { font: var(--ns-fw-regular) var(--ns-fs-xs)/var(--ns-lh-normal) var(--ns-font-sans); } .ns-eyebrow { font: var(--ns-fw-semibold) var(--ns-fs-xs)/var(--ns-lh-normal) var(--ns-font-sans); letter-spacing: var(--ns-ls-widest); text-transform: uppercase; } .ns-label { font: var(--ns-fw-semibold) var(--ns-fs-sm)/var(--ns-lh-normal) var(--ns-font-sans); } .ns-mono { font: var(--ns-fw-regular) var(--ns-fs-sm)/var(--ns-lh-normal) var(--ns-font-mono); } /* ================================================================ 16. FOCUS RING — Accessibility, brand-aware ================================================================ */ :focus-visible { outline: none; box-shadow: var(--ns-elev-focus); border-radius: var(--ns-radius-md); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }