@import 'tailwindcss'; @import 'tw-animate-css'; /* Google Fonts — Inter / JetBrains Mono / Tektur (handoff spec). * Stage 3.9: @nstart/ui удалён, fonts/theme imports + @source directive * убраны. Tailwind v4 теперь scan'ит только наш src/. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Tektur:wght@500;600;700&display=swap'); /* === Dark mode trigger === * shadcn использует .dark class по умолчанию. Handoff просит [data-theme="dark"] * на . Custom variant связывает оба пути — компоненты с `dark:` modifier * срабатывают при любом из условий. */ @custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *)); /* === DESIGN TOKENS — Light theme (Earth, default :root) === */ :root { --color-ink: #1a1714; --color-ink-2: #52483d; --color-mute: #8c8276; --color-bg: #fbf8ee; --color-surface: #ffffff; --color-surface-2: #f4eedc; --color-line: #e3dccb; --color-line-2: #efe9d8; --color-navy: #3a2818; --color-accent: #b05a2e; --color-accent-bg: rgb(176 90 46 / 11%); --color-on-accent: #ffffff; --color-green: #4f7038; --color-green-bg: #e4ead0; --color-warn: #a8762a; --color-warn-bg: #f6e8bc; --color-pink: #a64636; --color-pink-bg: #f4d9cd; /* shadcn semantic tokens — re-mapped onto наши значения */ --background: var(--color-bg); --foreground: var(--color-ink); --card: var(--color-surface); --card-foreground: var(--color-ink); --popover: var(--color-surface); --popover-foreground: var(--color-ink); --primary: var(--color-navy); --primary-foreground: var(--color-on-accent); --secondary: var(--color-surface-2); --secondary-foreground: var(--color-ink); --muted: var(--color-surface-2); --muted-foreground: var(--color-mute); --accent: var(--color-accent); --accent-foreground: var(--color-on-accent); --destructive: var(--color-pink); --destructive-foreground: var(--color-on-accent); --border: var(--color-line); --input: var(--color-line); --ring: var(--color-accent); } [data-theme='dark'] { --color-ink: #f0ece4; --color-ink-2: #c8c1b3; --color-mute: #8a8474; --color-bg: #1c1a17; --color-surface: #262421; --color-surface-2: #2e2b27; --color-line: #3a3733; --color-line-2: #2d2a27; --color-navy: #d97757; --color-accent: #d97757; --color-accent-bg: rgb(217 119 87 / 16%); --color-on-accent: #1c1a17; --color-green: #6fa97d; --color-green-bg: rgb(111 169 125 / 18%); --color-warn: #d4a653; --color-warn-bg: rgb(212 166 83 / 18%); --color-pink: #d18272; --color-pink-bg: rgb(209 130 114 / 20%); --background: var(--color-bg); --foreground: var(--color-ink); --card: var(--color-surface); --card-foreground: var(--color-ink); --popover: var(--color-surface); --popover-foreground: var(--color-ink); --primary: var(--color-navy); --primary-foreground: var(--color-on-accent); --secondary: var(--color-surface-2); --secondary-foreground: var(--color-ink); --muted: var(--color-surface-2); --muted-foreground: var(--color-mute); --accent: var(--color-accent); --accent-foreground: var(--color-on-accent); --destructive: var(--color-pink); --destructive-foreground: var(--color-on-accent); --border: var(--color-line); --input: var(--color-line); --ring: var(--color-accent); } /* Tailwind v4 @theme inline — экспонирует CSS vars как utility classes * (`bg-bg`, `text-ink`, `border-line`, `bg-accent` и т.д.). */ @theme inline { --color-bg: var(--color-bg); --color-surface: var(--color-surface); --color-surface-2: var(--color-surface-2); --color-ink: var(--color-ink); --color-ink-2: var(--color-ink-2); --color-mute: var(--color-mute); --color-line: var(--color-line); --color-line-2: var(--color-line-2); --color-navy: var(--color-navy); --color-accent: var(--color-accent); --color-accent-bg: var(--color-accent-bg); --color-on-accent: var(--color-on-accent); --color-green: var(--color-green); --color-green-bg: var(--color-green-bg); --color-warn: var(--color-warn); --color-warn-bg: var(--color-warn-bg); --color-pink: var(--color-pink); --color-pink-bg: var(--color-pink-bg); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', monospace; --font-display: 'Tektur', 'Inter', sans-serif; /* Font scale — НЕ переопределяем Tailwind defaults. Все наши места * используют семантические @utility ниже (text-body, text-cell, text-mono, * text-title-*, text-cap). text-sm/text-xs/text-2xs не используются нигде * после Stage 3.9 — @nstart/ui (который требовал --text-sm override) * удалён. */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; } /* === Semantic typography utilities per design_handoff_ordinis_mdm/README.md === * Type system — 7 ролей, каждая соответствует месту в UI: * * text-title-xl — 22/600 modal title, section header (rare) * text-title-lg — 17/600 page title в editor * text-title-md — 15/600 dictionary card title * text-body — 13/400 workhorse: body, buttons, tabs, inputs * text-cell — 12.5/500 table cell text * text-mono — 11/500 Mono: IDs, dates, FK refs * text-cap — 10.5/600 Tektur UPPERCASE caption / section label * * Color и weight overrides поверх — добавлять отдельными utility classes * (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/ * font-display/uppercase/tracking — они baked в соответствующие utility. */ /* font-family: var(--font-sans) explicit — наследование может ломаться когда * титлы используются внутри @nstart/ui Card/PageHeader которые sеtают * font-family: Tektur на parent. После Stage 3.9 (nstart removed) можно * убрать font-family из этих utilities — body inherit будет достаточно. */ @utility text-title-xl { font-family: var(--font-sans); font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } @utility text-title-lg { font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; } @utility text-title-md { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; } @utility text-body { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.45; } @utility text-cell { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; line-height: 1.35; } @utility text-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.4; } @utility text-cap { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.10em; } html, body, #root { height: 100%; } body { background: var(--color-bg); color: var(--color-ink); font-family: var(--font-sans); font-feature-settings: 'ss01', 'cv11', 'cv02', 'cv03', 'cv04'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Tektur uppercase caption helper — handoff .cap class */ .cap { font-family: var(--font-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-mute); } /* === Legacy fallback: старые компоненты используют nstart token names * (--color-carbon, --color-ultramarain etc). Маппим их на новые pending * полная миграция. === */ :root, [data-theme='dark'] { --color-carbon: var(--color-ink); --color-ultramarain: var(--color-accent); --color-orbit: var(--color-warn); --color-regolith: var(--color-line); --color-asteroid: var(--color-mute); }