/* ==========================================================================
Corporate LP Design System v4 — Colors & Type
──────────────────────────────────────────────────────────────────────────
SOURCE OF TRUTH for runtime design tokens used on the corporate website
(ピンリッチ株式会社 / PinRich Corporate LP).
This file is the canonical source for every CSS custom property used
across the corporate landing pages. All component CSS MUST consume
these tokens via `var(--token)` — never redefine them in component
`:root{}` blocks, never hard-code hex/px values.
v4 changes (from v3)
--------------------
v4 syncs the runtime tokens to the values used in the production
wireframe (`pinrich_corporate_wireframe_v32_rewrite.html`):
• Type scale rebuilt with `clamp()` responsive sizes (`--fs-*`).
Body is now ~16–17px (was 14px). The "body 14px" rule from v3 is
retired. `--text-*` aliases are aliased onto `--fs-*` (the scale
was compressed: caption / body-sm / body-md all map to `--fs-body`).
• Spacing scale extended: `--sp-7` (28), `--sp-9` (36), `--sp-14` (56)
added between the existing 4px-grid steps for finer layout control.
• Control heights unified at 44px across `sm` / `md` / `lg` / `xl`
(mobile-first tap target). Horizontal padding still steps
12 / 16 / 20 / 28.
• Radius scale unchanged (base 6px, shadcn multiplicative scale).
• Color tokens unchanged (shadcn names, OKLCH values, primary navy).
• Class-name vocabulary unchanged (shadcn variant names).
Compatibility
-------------
- Tailwind v4 (`@theme inline`) + shadcn/ui (new-york style, baseColor=neutral).
- Light mode only. 4px spacing grid.
- Body ≈ 16–17px responsive. Comfortable tap targets (44px universal).
Naming
------
Token names follow shadcn/ui's official palette (`--background`,
`--foreground`, `--card`, `--primary`, `--secondary`, `--muted`,
`--accent`, `--destructive`, `--border`, `--input`, `--ring`, …).
Component class names follow shadcn variant conventions
(`primary`, `secondary`, `outline`, `ghost`, `destructive`, `link`).
Sizes are `sm` / `md` (default) / `lg` / `xl`.
Color space
-----------
All semantic tokens are expressed in OKLCH (perceptually uniform,
future-proof, shadcn/ui v4 default).
Fonts
-----
Self-hosted variable fonts in /fonts — no Google Fonts CDN, no external
requests. Do not add `` to any HTML
file in this project; it will compete with these @font-face declarations
and produce inconsistent rendering.
========================================================================== */
/* -------------------------------------------------------------------------- */
/* Fonts — Inter (latin, local VF) + Noto Sans JP (JP, local VF) + Roboto Mono*/
/* All web fonts are self-hosted variable fonts. No Google Fonts / CDN. */
/* Browsers pick the first family that contains each glyph, so Latin/digits */
/* render in Inter and Japanese automatically falls through to Noto Sans JP. */
/* */
/* Both VFs include full weight axis (100–900) in a single file, and Inter */
/* additionally carries an optical-size axis (opsz 14–32) so display sizes */
/* get tighter, tighter-spaced letterforms automatically. */
/* -------------------------------------------------------------------------- */
/* Inter — Latin / digits / symbols. Variable: opsz 14–32, wght 100–900 */
@font-face {
font-family: 'Inter';
src: url('/static/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations'),
url('/static/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('/static/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
url('/static/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* Roboto Mono — used sparingly for code samples, identifiers. Variable: wght 100–700 */
@font-face {
font-family: 'Roboto Mono';
src: url('/static/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype-variations'),
url('/static/fonts/RobotoMono-VariableFont_wght.ttf') format('truetype');
font-weight: 100 700;
font-style: normal;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F; /* latin + punctuation only */
}
@font-face {
font-family: 'Roboto Mono';
src: url('/static/fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype-variations'),
url('/static/fonts/RobotoMono-Italic-VariableFont_wght.ttf') format('truetype');
font-weight: 100 700;
font-style: italic;
font-display: swap;
unicode-range: U+0020-007E, U+00A0-00FF, U+2000-206F;
}
/* Noto Sans JP — Japanese + full-width forms. Variable: wght 100–900 */
@font-face {
font-family: 'Noto Sans JP';
src: url('/static/fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype-variations'),
url('/static/fonts/NotoSansJP-VariableFont_wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
font-display: swap;
/* Japanese + ASCII + full-width forms + common symbols */
unicode-range:
U+0020-007E, /* Basic Latin */
U+00A0-00FF, /* Latin-1 Supplement */
U+2000-206F, /* General Punctuation */
U+2100-214F, /* Letterlike Symbols */
U+2190-21FF, /* Arrows */
U+2460-24FF, /* Enclosed Alphanumerics (①-⑳) */
U+25A0-25FF, /* Geometric Shapes */
U+2600-26FF, /* Misc Symbols */
U+3000-303F, /* CJK Symbols & Punctuation */
U+3040-309F, /* Hiragana */
U+30A0-30FF, /* Katakana */
U+31F0-31FF, /* Katakana Phonetic Extensions */
U+3200-33FF, /* CJK Compat */
U+4E00-9FFF, /* CJK Unified Ideographs */
U+F900-FAFF, /* CJK Compat Ideographs */
U+FE30-FE4F, /* CJK Compat Forms */
U+FF00-FFEF; /* Half/Full-width Forms */
}
/* -------------------------------------------------------------------------- */
/* :root — raw values (OKLCH for colors, plain values for everything else) */
/* -------------------------------------------------------------------------- */
:root {
/* ========================================================================
shadcn core palette (light)
────────────────────────────────────────────────────────────────────────
Names match shadcn/ui exactly. `--secondary` is white on this LP — the
secondary button variant uses neutral white-with-border, not gray.
======================================================================== */
--background: oklch(1.0000 0 0 ); /* #ffffff — page bg is white on LP */
--foreground: oklch(0.2468 0.0146 261.67); /* #1d2128 — body text */
--card: oklch(1.0000 0 0 ); /* #ffffff */
--card-foreground: oklch(0.2468 0.0146 261.67); /* #1d2128 */
--popover: oklch(1.0000 0 0 ); /* #ffffff */
--popover-foreground: oklch(0.2468 0.0146 261.67); /* #1d2128 */
--primary: oklch(0.3487 0.1068 255.78); /* #0A3970 — corporate navy */
--primary-foreground: oklch(1.0000 0 0 ); /* #ffffff */
--secondary: oklch(1.0000 0 0 ); /* #ffffff (neutral white button) */
--secondary-foreground: oklch(0.2468 0.0146 261.67); /* #1d2128 */
--muted: oklch(0.9700 0.0030 264.51); /* #f4f5f7 — section bg, large surfaces */
--muted-foreground: oklch(0.5031 0.0201 267.61); /* #5f6470 — captions, hints */
--accent: oklch(0.9650 0.0070 255.78); /* subtle navy-tinted hover bg (cards, list rows) */
--accent-foreground: oklch(0.2468 0.0146 261.67); /* #1d2128 */
--destructive: oklch(0.5113 0.1821 26.56); /* #b82626 — error */
--destructive-foreground: oklch(1.0000 0 0); /* #ffffff */
--border: oklch(0.9212 0.0047 258.41); /* #e3e5e8 */
--input: oklch(0.8408 0.0095 258.38); /* #c7cbd1 */
--ring: oklch(0.3487 0.1068 255.78); /* primary — focus rings use primary */
/* ========================================================================
Primary state variants
────────────────────────────────────────────────────────────────────────
All navy variants share one source of truth — never hard-code #0d4485
or rgb(10 57 112 / 0.06) in component CSS. Change `--primary` and the
hover/active/soft tints follow.
======================================================================== */
--primary-hover: oklch(0.3950 0.1145 255.78); /* ≈ #0d4485 — primary button :hover */
--primary-active: oklch(0.3050 0.0980 255.78); /* ≈ #082c5a — primary button :active */
--primary-subtle: oklch(0.9700 0.0150 255.78); /* very pale navy tint, full surfaces */
--primary-soft: rgb(10 57 112 / 0.06); /* outline-button :hover bg */
/* ========================================================================
Extensions — neutrals (beyond shadcn core)
======================================================================== */
--border-strong: oklch(0.8408 0.0095 258.38); /* #c7cbd1 — same as --input */
--foreground-subtle: oklch(0.6491 0.0160 264.46); /* #8a8f99 — subtle text, icons */
--accent-pressed: oklch(0.9364 0.0047 258.42); /* #e8eaed — accent surface in :active */
/* ========================================================================
Extensions — semantic (success / warning + destructive triples)
Each semantic color exposes the standard triple:
-- solid color (text on muted, icon, border-strong)
---foreground white text on solid
---muted tinted background for alert/badge surfaces
---border border to pair with -muted bg
======================================================================== */
--success: oklch(0.5119 0.1280 149.28); /* #1f7a3b */
--success-foreground: oklch(1.0000 0 0); /* #ffffff */
--success-muted: oklch(0.9717 0.0107 159.29); /* #f0f8f3 */
--success-border: oklch(0.8679 0.0403 156.86); /* #bfdcc9 */
--warning: oklch(0.5078 0.1080 73.30); /* #8a5a00 */
--warning-foreground: oklch(1.0000 0 0); /* #ffffff */
--warning-muted: oklch(0.9768 0.0207 88.74); /* #fdf7e8 */
--warning-border: oklch(0.8702 0.0696 90.02); /* #e6d3a0 */
--destructive-muted: oklch(0.9741 0.0096 16.87); /* #fdf4f4 */
--destructive-border: oklch(0.8382 0.0483 18.08); /* #e8bebe */
/* ========================================================================
Extensions — deal-type accents
────────────────────────────────────────────────────────────────────────
Used in chip variants for content categorization (e.g. PRESS / PRODUCT
news tags, sale/rental property labels). Three accent hues — sale (blue),
purchase (orange), rental (teal) — each with the standard triple
(solid / muted bg / border). Use only for category labels; not for
semantic state (success/warning/destructive).
======================================================================== */
--deal-sale: oklch(0.5153 0.1881 260.90);
--deal-sale-foreground: oklch(1.0000 0 0);
--deal-sale-muted: oklch(0.9660 0.0133 262.39);
--deal-sale-border: oklch(0.8557 0.0515 259.40);
--deal-purchase: oklch(0.6045 0.1762 43.85);
--deal-purchase-foreground: oklch(1.0000 0 0);
--deal-purchase-muted: oklch(0.9747 0.0153 67.56);
--deal-purchase-border: oklch(0.8603 0.0781 67.72);
--deal-rental: oklch(0.5656 0.0963 187.48);
--deal-rental-foreground: oklch(1.0000 0 0);
--deal-rental-muted: oklch(0.9763 0.0119 184.49);
--deal-rental-border: oklch(0.8725 0.0673 186.68);
/* ========================================================================
Radius — shadcn/ui multiplicative scale (UNCHANGED from v3)
────────────────────────────────────────────────────────────────────────
`--radius` is the base. shadcn's official multipliers cascade off it,
so changing `--radius` alone re-bases the entire scale proportionally.
Multipliers: sm ×0.6 / md ×0.8 / lg ×1.0 (base) / xl ×1.4 / 2xl ×1.8 /
3xl ×2.2 / 4xl ×2.6.
The wireframe uses exactly this scale, so no values changed in v4.
6px keeps the corporate, hard-edged tone without veering into
consumer/SaaS territory.
======================================================================== */
--radius: 6px; /* base — cards, large surfaces */
--radius-sm: calc(var(--radius) * 0.6); /* 3.6px — checkbox, tiny chips */
--radius-md: calc(var(--radius) * 0.8); /* 4.8px — buttons, inputs (default) */
--radius-lg: var(--radius); /* 6px — cards (base) */
--radius-xl: calc(var(--radius) * 1.4); /* 8.4px — large panels */
--radius-2xl: calc(var(--radius) * 1.8); /* 10.8px — hero image bleed */
--radius-3xl: calc(var(--radius) * 2.2); /* 13.2px — pull-out modules */
--radius-4xl: calc(var(--radius) * 2.6); /* 15.6px — extra-soft surfaces */
--radius-full: 9999px; /* pills, chips, avatars */
/* ========================================================================
Typography — families
Inter first → latin/digits hit Inter, Japanese falls through to Noto Sans JP.
UNCHANGED from v3 (per project policy: keep self-hosted Inter + Noto JP).
======================================================================== */
--font-sans: 'Inter', 'Noto Sans JP', sans-serif;
--font-mono: 'Roboto Mono', Menlo, Consolas, monospace;
/* ========================================================================
Typography — primitive scale (`--fs-*`, NEW in v4)
────────────────────────────────────────────────────────────────────────
Each `--fs-*` is a `clamp()` so that headings scale fluidly between
mobile and desktop — body grows from 16 to 17, hero from 34 to 64.
The semantic `--text-*` tokens below alias onto these primitives, so
consumers can keep using `--text-body-md` / `--text-display-lg` etc.
and don't need to know about the `--fs-*` layer.
Scale (min → max):
fs-hero 34 → 64 (top-page hero only)
fs-hero-mid 32 → 52 (secondary hero / large CTA blocks)
fs-display 28 → 40 (page hero, section title large)
fs-section 26 → 34 (section title, alt)
fs-heading 22 → 28 (h2-equivalent, card group title)
fs-subheading 18 → 20 (h3, card title)
fs-lead 17 → 19 (lead paragraph, body large)
fs-body 16 → 17 (★ default body, caption, hint, body-sm)
fs-stat 28 → 38 (statistic numerals)
======================================================================== */
--fs-hero: clamp(34px, 6.5vw, 64px); --fs-hero-lh: 1.10;
--fs-hero-mid: clamp(32px, 5vw, 52px); --fs-hero-mid-lh: 1.15;
--fs-display: clamp(28px, 3.6vw, 40px); --fs-display-lh: 1.20;
--fs-section: clamp(26px, 3vw, 34px); --fs-section-lh: 1.25;
--fs-heading: clamp(22px, 2.4vw, 28px); --fs-heading-lh: 1.35;
--fs-subheading: clamp(18px, 1.6vw, 20px); --fs-subheading-lh: 1.50;
--fs-lead: clamp(17px, 1.4vw, 19px); --fs-lead-lh: 1.65;
--fs-body: clamp(16px, 1.1vw, 17px); --fs-body-lh: 1.70; /* ★ body default */
--fs-stat: clamp(28px, 3vw, 38px); --fs-stat-lh: 1.10;
/* ========================================================================
Typography — semantic aliases (`--text-*`)
────────────────────────────────────────────────────────────────────────
v4 collapses the previously-distinct caption / body-sm / body-md sizes
onto a single `--fs-body` (16–17px). The names are kept so existing
CSS in /assets continues to work, but the values are now compressed:
--text-caption → --fs-body (was 12px in v3)
--text-body-sm → --fs-body (was 13px in v3)
--text-body-md ★ → --fs-body (was 14px in v3) — body default
--text-body-lg → --fs-lead (was 16px in v3)
--text-display-sm → --fs-subheading (was 20px in v3)
--text-display-md → --fs-heading (was 26px in v3)
--text-display-lg → --fs-display (was 34px in v3)
--text-display-xl → --fs-display (was 44px in v3)
In other words: when you want a true large hero numeral, use `--fs-hero`
directly. The `--text-*` aliases are the LP body/heading scale.
======================================================================== */
--text-caption: var(--fs-body); --text-caption-lh: var(--fs-body-lh);
--text-body-sm: var(--fs-body); --text-body-sm-lh: var(--fs-body-lh);
--text-body-md: var(--fs-body); --text-body-md-lh: var(--fs-body-lh); /* ★ */
--text-body-lg: var(--fs-lead); --text-body-lg-lh: var(--fs-lead-lh);
--text-display-sm: var(--fs-subheading); --text-display-sm-lh: var(--fs-subheading-lh);
--text-display-md: var(--fs-heading); --text-display-md-lh: var(--fs-heading-lh);
--text-display-lg: var(--fs-display); --text-display-lg-lh: var(--fs-display-lh);
--text-display-xl: var(--fs-display); --text-display-xl-lh: var(--fs-display-lh);
/* === Weights === */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900; /* hero-title 強調用(LPトップのみ) — NEW in v4.1 */
/* === Letter spacing === */
--tracking-tight: -0.02em;
--tracking-normal: 0.01em;
--tracking-wide: 0.04em;
/* ========================================================================
Spacing (4px grid, extended in v4)
────────────────────────────────────────────────────────────────────────
v4 added `--sp-7` (28), `--sp-9` (36), `--sp-14` (56) between the
existing v3 steps, to match wireframe usage. The base `--spacing` token
is kept for arithmetic; the named steps below are the API.
======================================================================== */
--spacing: 4px;
--sp-1: calc(var(--spacing) * 1); /* 4px */
--sp-2: calc(var(--spacing) * 2); /* 8px */
--sp-3: calc(var(--spacing) * 3); /* 12px */
--sp-4: calc(var(--spacing) * 4); /* 16px */
--sp-5: calc(var(--spacing) * 5); /* 20px */
--sp-6: calc(var(--spacing) * 6); /* 24px */
--sp-7: calc(var(--spacing) * 7); /* 28px — NEW in v4 */
--sp-8: calc(var(--spacing) * 8); /* 32px */
--sp-9: calc(var(--spacing) * 9); /* 36px — NEW in v4 */
--sp-10: calc(var(--spacing) * 10); /* 40px */
--sp-12: calc(var(--spacing) * 12); /* 48px */
--sp-14: calc(var(--spacing) * 14); /* 56px — NEW in v4 */
--sp-16: calc(var(--spacing) * 16); /* 64px */
--sp-20: calc(var(--spacing) * 20); /* 80px */
--sp-24: calc(var(--spacing) * 24); /* 96px */
/* ========================================================================
Control heights — buttons, inputs, selects, segmented controls.
────────────────────────────────────────────────────────────────────────
v4 unifies all four sizes at 44px (mobile-first WCAG tap target).
The size names are kept so existing component CSS doesn't break, but
they all resolve to the same height now. Horizontal padding still
varies by size (12 / 16 / 20 / 28) so visual hierarchy survives.
======================================================================== */
--control-h-sm: 44px;
--control-h-md: 44px; /* ★ default */
--control-h-lg: 44px;
--control-h-xl: 44px; /* hero CTA — same height, wider padding via px-xl */
/* control horizontal padding (per size) — UNCHANGED from v3 */
--control-px-sm: 12px;
--control-px-md: 16px;
--control-px-lg: 20px;
--control-px-xl: 28px;
/* ========================================================================
Site-specific layout
────────────────────────────────────────────────────────────────────────
Top navigation height — used by .site-header and any sticky-offset
calculations. 64px provides comfortable vertical centering for a
44px control + breathing room.
======================================================================== */
--height-topnav: 64px;
/* ========================================================================
Containers — section / content max widths.
1080px is the content cap on the corporate LP. 720px is reserved for
narrow surfaces (forms, articles), 1280px for hero image bleed.
UNCHANGED from v3.
======================================================================== */
--container-narrow: 720px; /* article, form */
--container-content: 1080px; /* ★ default content cap (header / body wrap / footer) */
--container-wide: 1280px; /* hero, image bleed only */
/* === Page padding (responsive via clamp) === */
--page-padding-x: clamp(20px, 5vw, 64px);
--section-padding-y: clamp(64px, 9vw, 120px);
/* === Shadow === */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
--shadow-lg: 0 10px 20px -4px rgb(0 0 0 / 0.10), 0 6px 8px -6px rgb(0 0 0 / 0.06);
--shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.18);
/* === Transitions === */
--duration-fast: 120ms;
--duration-base: 180ms;
--duration-slow: 280ms;
--easing: cubic-bezier(.2, 0, 0, 1);
/* === Focus ring — uses primary navy at low alpha for subtlety === */
--ring-focus: 0 0 0 3px rgb(10 57 112 / 0.20);
/* === Breakpoints (reference values) === */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
/* ==========================================================================
LP-specific component tokens — NEW in v4.1
--------------------------------------------------------------------------
Below tokens are owned by individual page-level components (release notice
banner, mobile chat dock). They are intentionally NOT folded into the
generic --destructive / --success / --shadow palettes because each surface
has a distinct brand role on the LP and may diverge from the generic
semantic tokens over time.
========================================================================== */
/* === Release notice (リリース予定の赤バナー) ============================
Used by: .release-notice (LP-wide top banner above the hero on top page,
and below product-hero on industry pages).
Visual role: 「プロダクトに関する重要なリリース情報」を強調する赤系バナー。
Distinct from --destructive (which is for error / negative states). */
--notice-bg: #fff1f1; /* バナー背景 — 淡い赤 */
--notice-fg: #b42318; /* バナー本文文字色 — 濃赤 */
--notice-fg-strong: #912018; /* 強調 (strong要素) — さらに濃い赤 */
--notice-accent: #d92d20; /* 上下ボーダー & ラベルチップ背景 */
--notice-accent-fg: #ffffff; /* ラベルチップの白文字 */
--notice-border-w: 2px; /* ボーダー太さ(視認性) */
/* === Chat dock (常駐チャットドック / モバイル展開時) =====================
Used by: .chat-dock and its descendants (mobile-only enhanced styling
applied at max-width:768px breakpoint).
Visual role: モバイルで画面下部に固定表示する営業チャット起動バー。
primary navy をベースにしつつ、success-green の通信中インジケータと
primary-alpha の浮き影でフローティング感を表現する。 */
--chat-dock-indicator-bg: #4ade80; /* 通信中の緑ドット */
--chat-dock-indicator-ring: rgba(74, 222, 128, 0.25); /* 緑ドットの周りのリング */
--chat-dock-shadow-mobile: 0 -8px 24px rgba(10, 57, 112, 0.25),
0 -2px 8px rgba(10, 57, 112, 0.15);
--chat-dock-shadow-desktop: 0 8px 24px rgba(10, 57, 112, 0.25),
0 2px 8px rgba(10, 57, 112, 0.15);
--chat-dock-send-shadow: 0 2px 8px rgba(10, 57, 112, 0.30);
--chat-dock-input-bg: #ffffff; /* モバイル入力欄背景 */
--chat-dock-placeholder: #9ca3af; /* モバイル placeholder */
}
/* -------------------------------------------------------------------------- */
/* @theme inline — expose tokens to Tailwind v4 utilities */
/* -------------------------------------------------------------------------- */
@theme inline {
/* shadcn core palette */
--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: var(--accent);
--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);
/* primary state variants */
--color-primary-hover: var(--primary-hover);
--color-primary-active: var(--primary-active);
--color-primary-subtle: var(--primary-subtle);
/* extensions: neutrals */
--color-border-strong: var(--border-strong);
--color-foreground-subtle: var(--foreground-subtle);
--color-accent-pressed: var(--accent-pressed);
/* extensions: semantic */
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
--color-success-muted: var(--success-muted);
--color-success-border: var(--success-border);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-warning-muted: var(--warning-muted);
--color-warning-border: var(--warning-border);
--color-destructive-muted: var(--destructive-muted);
--color-destructive-border: var(--destructive-border);
/* extensions: deal-type */
--color-deal-sale: var(--deal-sale);
--color-deal-sale-foreground: var(--deal-sale-foreground);
--color-deal-sale-muted: var(--deal-sale-muted);
--color-deal-sale-border: var(--deal-sale-border);
--color-deal-purchase: var(--deal-purchase);
--color-deal-purchase-foreground: var(--deal-purchase-foreground);
--color-deal-purchase-muted: var(--deal-purchase-muted);
--color-deal-purchase-border: var(--deal-purchase-border);
--color-deal-rental: var(--deal-rental);
--color-deal-rental-foreground: var(--deal-rental-foreground);
--color-deal-rental-muted: var(--deal-rental-muted);
--color-deal-rental-border: var(--deal-rental-border);
}
/* -------------------------------------------------------------------------- */
/* Base body defaults */
/* -------------------------------------------------------------------------- */
html, body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-size: var(--text-body-md);
line-height: var(--text-body-md-lh);
letter-spacing: var(--tracking-normal);
/* Inter: cv11 = single-storey a/straight 1; ss01 = open-aperture forms.
palt = JP proportional metrics. These only apply to the relevant
glyph set; other families ignore them. */
font-feature-settings: 'cv11', 'ss01', 'palt';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
/* -------------------------------------------------------------------------- */
/* Semantic type classes (full LP scale) */
/* -------------------------------------------------------------------------- */
.t-caption { font-size: var(--text-caption); line-height: var(--text-caption-lh); }
.t-body-sm { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); }
.t-body-md { font-size: var(--text-body-md); line-height: var(--text-body-md-lh); }
.t-body-lg { font-size: var(--text-body-lg); line-height: var(--text-body-lg-lh); }
.t-display-sm { font-size: var(--text-display-sm); line-height: var(--text-display-sm-lh); letter-spacing: var(--tracking-tight); }
.t-display-md { font-size: var(--text-display-md); line-height: var(--text-display-md-lh); letter-spacing: var(--tracking-tight); }
.t-display-lg { font-size: var(--text-display-lg); line-height: var(--text-display-lg-lh); letter-spacing: var(--tracking-tight); }
.t-display-xl { font-size: var(--text-display-xl); line-height: var(--text-display-xl-lh); letter-spacing: var(--tracking-tight); }
/* semantic HTML aliases */
h1, .h1 { font-size: var(--text-display-lg); line-height: var(--text-display-lg-lh); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--text-display-md); line-height: var(--text-display-md-lh); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-tight); }
h3, .h3 { font-size: var(--text-display-sm); line-height: var(--text-display-sm-lh); font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-tight); }
p, .p { font-size: var(--text-body-md); line-height: var(--text-body-md-lh); font-weight: var(--font-weight-regular); }
small, .small { font-size: var(--text-body-sm); line-height: var(--text-body-sm-lh); color: var(--muted-foreground); }
/* weights */
.fw-medium { font-weight: var(--font-weight-medium); }
.fw-semibold { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-bold); }
/* numeric helpers */
.mono { font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* color helpers */
.fg { color: var(--foreground); }
.fg-muted { color: var(--muted-foreground); }
.fg-subtle { color: var(--foreground-subtle); }
.fg-primary{ color: var(--primary); }