@import "tailwindcss";@import "uniwind";@import "./generated-uniwind-themes.css"; /* ─── Theme tokens ──────────────────────────────────────────────────── */@layer theme { :root { @variant android { --font-mono: "monospace"; } @variant light { /* Page backgrounds */ --color-screen: #f2f2f7; --color-sheet: rgba(242, 242, 247, 0.98); --color-sheet-solid: #f2f2f7; /* Card / surface */ --color-card: #ffffff; --color-card-alt: #f5f5f5; --color-card-translucent: rgba(255, 255, 255, 0.8); --color-thread-canvas: #f5f5f5; --color-thread-selected: #ffffff; --color-thread-selected-foreground: #262626; --color-thread-selected-foreground-muted: #737373; --color-composer-panel: rgba(245, 245, 245, 0.88); --color-composer-surface: rgba(255, 255, 255, 0.94); --color-composer-border: rgba(0, 0, 0, 0.1); /* Text */ --color-foreground: #262626; --color-foreground-secondary: #525252; --color-foreground-muted: #737373; --color-foreground-tertiary: #8e8e93; /* Borders & separators */ --color-border: rgba(0, 0, 0, 0.08); --color-border-subtle: rgba(0, 0, 0, 0.06); --color-separator: rgba(0, 0, 0, 0.04); /* Subtle backgrounds (badges, pills, overlays) */ --color-subtle: rgba(0, 0, 0, 0.04); --color-subtle-strong: rgba(0, 0, 0, 0.08); --color-inline-skill-background: rgba(217, 70, 239, 0.12); --color-inline-skill-border: rgba(217, 70, 239, 0.25); --color-inline-skill-foreground: #a21caf; /* Primary action */ --color-primary: #262626; --color-primary-foreground: #ffffff; --color-primary-shadow: #000000; /* Secondary action */ --color-secondary: #ffffff; --color-secondary-foreground: #262626; --color-secondary-border: rgba(0, 0, 0, 0.08); --color-switch-active-track: #34c759; --color-switch-active-thumb: #ffffff; --color-switch-inactive-track: rgba(0, 0, 0, 0.08); --color-switch-inactive-thumb: #8e8e93; /* Warning */ --color-warning: #fffbeb; --color-warning-border: #fde68a; --color-warning-foreground: #b45309; /* Danger */ --color-danger: #fef2f2; --color-danger-border: rgba(239, 68, 68, 0.12); --color-danger-foreground: #dc2626; /* Inputs */ --color-input: #ffffff; --color-input-border: rgba(0, 0, 0, 0.1); --color-sidebar-search: rgba(118, 118, 128, 0.12); --color-placeholder: #737373; /* Icons */ --color-icon: #262626; --color-icon-muted: #525252; --color-icon-subtle: #a3a3a3; /* Header / glass chrome */ --color-header: rgba(255, 255, 255, 0.97); --color-header-border: rgba(0, 0, 0, 0.06); --color-glass-surface: rgba(255, 255, 255, 0.72); --color-glass-tint: rgba(255, 255, 255, 0.18); /* StatusBar */ --color-status-bar: #f2f2f7; /* Markdown */ --color-md-body: #111111; --color-md-strong: #000000; --color-md-link: #2563eb; --color-md-blockquote-border: rgba(0, 0, 0, 0.08); --color-md-blockquote-bg: rgba(0, 0, 0, 0.02); --color-md-code-bg: rgba(0, 0, 0, 0.04); --color-md-code-text: #262626; --color-md-user-code-bg: rgba(255, 255, 255, 0.22); --color-md-user-code-text: #ffffff; --color-md-user-fence-bg: rgba(0, 0, 0, 0.16); --color-md-user-fence-text: #ffffff; --color-md-hr: rgba(0, 0, 0, 0.08); /* iMessage-style user bubble */ --color-user-bubble: #007aff; --color-user-bubble-foreground: #ffffff; --color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78); --color-user-bubble-skill-foreground: #f0abfc; /* Drawer / modal backdrop */ --color-backdrop: rgba(0, 0, 0, 0.22); --color-drawer: rgba(255, 255, 255, 0.99); --color-drawer-shadow: rgba(0, 0, 0, 0.12); /* Misc */ --color-dot-separator: rgba(0, 0, 0, 0.2); --color-wordmark: #262626; --color-chevron: rgba(0, 0, 0, 0.2); } @variant dark { /* Page backgrounds */ --color-screen: #0a0a0a; --color-sheet: rgba(14, 14, 14, 0.98); --color-sheet-solid: #0e0e0e; /* Card / surface */ --color-card: #171717; --color-card-alt: #1c1c1c; --color-card-translucent: rgba(17, 17, 17, 0.8); --color-thread-canvas: #1c1c1c; --color-thread-selected: #171717; --color-thread-selected-foreground: #f5f5f5; --color-thread-selected-foreground-muted: #8e8e93; --color-composer-panel: rgba(28, 28, 28, 0.92); --color-composer-surface: rgba(23, 23, 23, 0.9); --color-composer-border: rgba(255, 255, 255, 0.08); /* Text */ --color-foreground: #f5f5f5; --color-foreground-secondary: #a3a3a3; --color-foreground-muted: #8e8e93; --color-foreground-tertiary: #636366; /* Borders & separators */ --color-border: rgba(255, 255, 255, 0.06); --color-border-subtle: rgba(255, 255, 255, 0.04); --color-separator: rgba(255, 255, 255, 0.03); /* Subtle backgrounds (badges, pills, overlays) */ --color-subtle: rgba(255, 255, 255, 0.04); --color-subtle-strong: rgba(255, 255, 255, 0.08); --color-inline-skill-background: rgba(217, 70, 239, 0.12); --color-inline-skill-border: rgba(217, 70, 239, 0.25); --color-inline-skill-foreground: #f0abfc; /* Primary action */ --color-primary: #f5f5f5; --color-primary-foreground: #0a0a0a; --color-primary-shadow: #000000; /* Secondary action */ --color-secondary: rgba(255, 255, 255, 0.04); --color-secondary-foreground: #f5f5f5; --color-secondary-border: rgba(255, 255, 255, 0.06); --color-switch-active-track: #30d158; --color-switch-active-thumb: #ffffff; --color-switch-inactive-track: rgba(255, 255, 255, 0.06); --color-switch-inactive-thumb: #8e8e93; /* Warning */ --color-warning: rgba(69, 26, 3, 0.4); --color-warning-border: rgba(120, 53, 15, 0.6); --color-warning-foreground: #fcd34d; /* Danger */ --color-danger: rgba(239, 68, 68, 0.14); --color-danger-border: rgba(248, 113, 113, 0.18); --color-danger-foreground: #fca5a5; /* Inputs */ --color-input: #141414; --color-input-border: rgba(255, 255, 255, 0.08); --color-sidebar-search: rgba(118, 118, 128, 0.24); --color-placeholder: #8e8e93; /* Icons */ --color-icon: #f5f5f5; --color-icon-muted: #a3a3a3; --color-icon-subtle: #8e8e93; /* Header / glass chrome */ --color-header: rgba(10, 10, 10, 0.97); --color-header-border: rgba(255, 255, 255, 0.06); --color-glass-surface: rgba(23, 23, 23, 0.78); --color-glass-tint: rgba(23, 23, 23, 0.24); /* StatusBar */ --color-status-bar: #0a0a0a; /* Markdown */ --color-md-body: #e5e5e5; --color-md-strong: #f5f5f5; --color-md-link: #60a5fa; --color-md-blockquote-border: rgba(255, 255, 255, 0.1); --color-md-blockquote-bg: rgba(255, 255, 255, 0.03); --color-md-code-bg: rgba(255, 255, 255, 0.06); --color-md-code-text: #e5e5e5; --color-md-user-code-bg: rgba(255, 255, 255, 0.18); --color-md-user-code-text: #ffffff; --color-md-user-fence-bg: rgba(0, 0, 0, 0.28); --color-md-user-fence-text: #ffffff; --color-md-hr: rgba(255, 255, 255, 0.08); /* iMessage-style user bubble */ --color-user-bubble: #0a84ff; --color-user-bubble-foreground: #ffffff; --color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78); --color-user-bubble-skill-foreground: #f0abfc; /* Drawer / modal backdrop */ --color-backdrop: rgba(0, 0, 0, 0.48); --color-drawer: rgba(14, 14, 14, 0.99); --color-drawer-shadow: rgba(0, 0, 0, 0.32); /* Misc */ --color-dot-separator: rgba(255, 255, 255, 0.2); --color-wordmark: #f5f5f5; --color-chevron: rgba(255, 255, 255, 0.2); } }} /* ─── Typography ────────────────────────────────────────────────────── */@theme { /* Keep these native family names aligned with app.config.ts. */ --font-sans: "DMSans-Regular"; --font-medium: "DMSans-Medium"; --font-bold: "DMSans-Bold"; /* Keep this scale aligned with src/lib/typography.ts for native style props. */ --text-3xs: 11px; --text-3xs--line-height: 14px; --text-2xs: 12px; --text-2xs--line-height: 16px; --text-xs: 13px; --text-xs--line-height: 17px; --text-sm: 14px; --text-sm--line-height: 19px; --text-base: 16px; --text-base--line-height: 23px; --text-lg: 18px; --text-lg--line-height: 23px; --text-xl: 21px; --text-xl--line-height: 28px; --text-2xl: 26px; --text-2xl--line-height: 32px; --text-3xl: 30px; --text-3xl--line-height: 36px;} /* ─── Custom utilities ──────────────────────────────────────────────── */@utility font-t3-medium { font-family: var(--font-medium);} @utility font-t3-bold { font-family: var(--font-bold);} @utility font-t3-extrabold { font-family: var(--font-bold); font-weight: 800;}
@import "tailwindcss";
@import "uniwind";
@import "./generated-uniwind-themes.css";
/* ─── Theme tokens ──────────────────────────────────────────────────── */
@layer theme {
:root {
@variant android {
--font-mono: "monospace";
}
@variant light {
/* Page backgrounds */
--color-screen: #f2f2f7;
--color-sheet: rgba(242, 242, 247, 0.98);
--color-sheet-solid: #f2f2f7;
/* Card / surface */
--color-card: #ffffff;
--color-card-alt: #f5f5f5;
--color-card-translucent: rgba(255, 255, 255, 0.8);
--color-thread-canvas: #f5f5f5;
--color-thread-selected: #ffffff;
--color-thread-selected-foreground: #262626;
--color-thread-selected-foreground-muted: #737373;
--color-composer-panel: rgba(245, 245, 245, 0.88);
--color-composer-surface: rgba(255, 255, 255, 0.94);
--color-composer-border: rgba(0, 0, 0, 0.1);
/* Text */
--color-foreground: #262626;
--color-foreground-secondary: #525252;
--color-foreground-muted: #737373;
--color-foreground-tertiary: #8e8e93;
/* Borders & separators */
--color-border: rgba(0, 0, 0, 0.08);
--color-border-subtle: rgba(0, 0, 0, 0.06);
--color-separator: rgba(0, 0, 0, 0.04);
/* Subtle backgrounds (badges, pills, overlays) */
--color-subtle: rgba(0, 0, 0, 0.04);
--color-subtle-strong: rgba(0, 0, 0, 0.08);
--color-inline-skill-background: rgba(217, 70, 239, 0.12);
--color-inline-skill-border: rgba(217, 70, 239, 0.25);
--color-inline-skill-foreground: #a21caf;
/* Primary action */
--color-primary: #262626;
--color-primary-foreground: #ffffff;
--color-primary-shadow: #000000;
/* Secondary action */
--color-secondary: #ffffff;
--color-secondary-foreground: #262626;
--color-secondary-border: rgba(0, 0, 0, 0.08);
--color-switch-active-track: #34c759;
--color-switch-active-thumb: #ffffff;
--color-switch-inactive-track: rgba(0, 0, 0, 0.08);
--color-switch-inactive-thumb: #8e8e93;
/* Warning */
--color-warning: #fffbeb;
--color-warning-border: #fde68a;
--color-warning-foreground: #b45309;
/* Danger */
--color-danger: #fef2f2;
--color-danger-border: rgba(239, 68, 68, 0.12);
--color-danger-foreground: #dc2626;
/* Inputs */
--color-input: #ffffff;
--color-input-border: rgba(0, 0, 0, 0.1);
--color-sidebar-search: rgba(118, 118, 128, 0.12);
--color-placeholder: #737373;
/* Icons */
--color-icon: #262626;
--color-icon-muted: #525252;
--color-icon-subtle: #a3a3a3;
/* Header / glass chrome */
--color-header: rgba(255, 255, 255, 0.97);
--color-header-border: rgba(0, 0, 0, 0.06);
--color-glass-surface: rgba(255, 255, 255, 0.72);
--color-glass-tint: rgba(255, 255, 255, 0.18);
/* StatusBar */
--color-status-bar: #f2f2f7;
/* Markdown */
--color-md-body: #111111;
--color-md-strong: #000000;
--color-md-link: #2563eb;
--color-md-blockquote-border: rgba(0, 0, 0, 0.08);
--color-md-blockquote-bg: rgba(0, 0, 0, 0.02);
--color-md-code-bg: rgba(0, 0, 0, 0.04);
--color-md-code-text: #262626;
--color-md-user-code-bg: rgba(255, 255, 255, 0.22);
--color-md-user-code-text: #ffffff;
--color-md-user-fence-bg: rgba(0, 0, 0, 0.16);
--color-md-user-fence-text: #ffffff;
--color-md-hr: rgba(0, 0, 0, 0.08);
/* iMessage-style user bubble */
--color-user-bubble: #007aff;
--color-user-bubble-foreground: #ffffff;
--color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78);
--color-user-bubble-skill-foreground: #f0abfc;
/* Drawer / modal backdrop */
--color-backdrop: rgba(0, 0, 0, 0.22);
--color-drawer: rgba(255, 255, 255, 0.99);
--color-drawer-shadow: rgba(0, 0, 0, 0.12);
/* Misc */
--color-dot-separator: rgba(0, 0, 0, 0.2);
--color-wordmark: #262626;
--color-chevron: rgba(0, 0, 0, 0.2);
}
@variant dark {
/* Page backgrounds */
--color-screen: #0a0a0a;
--color-sheet: rgba(14, 14, 14, 0.98);
--color-sheet-solid: #0e0e0e;
/* Card / surface */
--color-card: #171717;
--color-card-alt: #1c1c1c;
--color-card-translucent: rgba(17, 17, 17, 0.8);
--color-thread-canvas: #1c1c1c;
--color-thread-selected: #171717;
--color-thread-selected-foreground: #f5f5f5;
--color-thread-selected-foreground-muted: #8e8e93;
--color-composer-panel: rgba(28, 28, 28, 0.92);
--color-composer-surface: rgba(23, 23, 23, 0.9);
--color-composer-border: rgba(255, 255, 255, 0.08);
/* Text */
--color-foreground: #f5f5f5;
--color-foreground-secondary: #a3a3a3;
--color-foreground-muted: #8e8e93;
--color-foreground-tertiary: #636366;
/* Borders & separators */
--color-border: rgba(255, 255, 255, 0.06);
--color-border-subtle: rgba(255, 255, 255, 0.04);
--color-separator: rgba(255, 255, 255, 0.03);
/* Subtle backgrounds (badges, pills, overlays) */
--color-subtle: rgba(255, 255, 255, 0.04);
--color-subtle-strong: rgba(255, 255, 255, 0.08);
--color-inline-skill-background: rgba(217, 70, 239, 0.12);
--color-inline-skill-border: rgba(217, 70, 239, 0.25);
--color-inline-skill-foreground: #f0abfc;
/* Primary action */
--color-primary: #f5f5f5;
--color-primary-foreground: #0a0a0a;
--color-primary-shadow: #000000;
/* Secondary action */
--color-secondary: rgba(255, 255, 255, 0.04);
--color-secondary-foreground: #f5f5f5;
--color-secondary-border: rgba(255, 255, 255, 0.06);
--color-switch-active-track: #30d158;
--color-switch-active-thumb: #ffffff;
--color-switch-inactive-track: rgba(255, 255, 255, 0.06);
--color-switch-inactive-thumb: #8e8e93;
/* Warning */
--color-warning: rgba(69, 26, 3, 0.4);
--color-warning-border: rgba(120, 53, 15, 0.6);
--color-warning-foreground: #fcd34d;
/* Danger */
--color-danger: rgba(239, 68, 68, 0.14);
--color-danger-border: rgba(248, 113, 113, 0.18);
--color-danger-foreground: #fca5a5;
/* Inputs */
--color-input: #141414;
--color-input-border: rgba(255, 255, 255, 0.08);
--color-sidebar-search: rgba(118, 118, 128, 0.24);
--color-placeholder: #8e8e93;
/* Icons */
--color-icon: #f5f5f5;
--color-icon-muted: #a3a3a3;
--color-icon-subtle: #8e8e93;
/* Header / glass chrome */
--color-header: rgba(10, 10, 10, 0.97);
--color-header-border: rgba(255, 255, 255, 0.06);
--color-glass-surface: rgba(23, 23, 23, 0.78);
--color-glass-tint: rgba(23, 23, 23, 0.24);
/* StatusBar */
--color-status-bar: #0a0a0a;
/* Markdown */
--color-md-body: #e5e5e5;
--color-md-strong: #f5f5f5;
--color-md-link: #60a5fa;
--color-md-blockquote-border: rgba(255, 255, 255, 0.1);
--color-md-blockquote-bg: rgba(255, 255, 255, 0.03);
--color-md-code-bg: rgba(255, 255, 255, 0.06);
--color-md-code-text: #e5e5e5;
--color-md-user-code-bg: rgba(255, 255, 255, 0.18);
--color-md-user-code-text: #ffffff;
--color-md-user-fence-bg: rgba(0, 0, 0, 0.28);
--color-md-user-fence-text: #ffffff;
--color-md-hr: rgba(255, 255, 255, 0.08);
/* iMessage-style user bubble */
--color-user-bubble: #0a84ff;
--color-user-bubble-foreground: #ffffff;
--color-user-bubble-foreground-muted: rgba(255, 255, 255, 0.78);
--color-user-bubble-skill-foreground: #f0abfc;
/* Drawer / modal backdrop */
--color-backdrop: rgba(0, 0, 0, 0.48);
--color-drawer: rgba(14, 14, 14, 0.99);
--color-drawer-shadow: rgba(0, 0, 0, 0.32);
/* Misc */
--color-dot-separator: rgba(255, 255, 255, 0.2);
--color-wordmark: #f5f5f5;
--color-chevron: rgba(255, 255, 255, 0.2);
}
}
}
/* ─── Typography ────────────────────────────────────────────────────── */
@theme {
/* Keep these native family names aligned with app.config.ts. */
--font-sans: "DMSans-Regular";
--font-medium: "DMSans-Medium";
--font-bold: "DMSans-Bold";
/* Keep this scale aligned with src/lib/typography.ts for native style props. */
--text-3xs: 11px;
--text-3xs--line-height: 14px;
--text-2xs: 12px;
--text-2xs--line-height: 16px;
--text-xs: 13px;
--text-xs--line-height: 17px;
--text-sm: 14px;
--text-sm--line-height: 19px;
--text-base: 16px;
--text-base--line-height: 23px;
--text-lg: 18px;
--text-lg--line-height: 23px;
--text-xl: 21px;
--text-xl--line-height: 28px;
--text-2xl: 26px;
--text-2xl--line-height: 32px;
--text-3xl: 30px;
--text-3xl--line-height: 36px;
}
/* ─── Custom utilities ──────────────────────────────────────────────── */
@utility font-t3-medium {
font-family: var(--font-medium);
}
@utility font-t3-bold {
font-family: var(--font-bold);
}
@utility font-t3-extrabold {
font-family: var(--font-bold);
font-weight: 800;
}