@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;
}