@import "tailwindcss";

/* The same semantic tokens the account pages use, so a space browsed here
   looks like the rest of pds.js. Fonts stay on the system stacks: the build
   inlines every asset into one document, and a webfont would multiply its
   size. */

@custom-variant dark {
  &:where([data-theme="dark"], [data-theme="dark"] *) {
    @slot;
  }
  @media (prefers-color-scheme: dark) {
    &:where(
        :root:not([data-theme="light"]),
        :root:not([data-theme="light"]) *
      ) {
      @slot;
    }
  }
}

@theme inline {
  --color-background: var(--background);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-border: var(--border);
  --color-input: var(--input);

  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-faint: var(--faint);

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent-foreground: var(--accent-foreground);

  --color-destructive: var(--destructive);
  --color-destructive-dim: var(--destructive-dim);
  --color-success: var(--success);
  --color-success-dim: var(--success-dim);
  --color-warning: var(--warning);
  --color-warning-dim: var(--warning-dim);

  --color-ring: var(--ring);
  --color-key: var(--key);

  --radius-lg: 0.75rem;

  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, menlo, monospace;
}

:root {
  color-scheme: light dark;

  --background: #fafafb;
  --card: #ffffff;
  --muted: #f2f2f6;
  --accent: #eaeaf1;
  --border: #e5e5ec;
  --input: #d4d4de;

  --foreground: #18181d;
  --muted-foreground: #63636f;
  --faint: #8e8e9a;

  --primary: #18181d;
  --primary-foreground: #fafafb;
  --secondary: #eeeef3;
  --secondary-foreground: #18181d;
  --accent-foreground: #18181d;

  --destructive: #dc2626;
  --destructive-dim: #fdecec;
  --success: #15a34a;
  --success-dim: #e9faf0;
  --warning: #a16207;
  --warning-dim: #fdf6e3;

  --ring: #6d6df0;
  --key: #5656d6;

  --code-comment: #7b7b8c;
  --code-keyword: #8250df;
  --code-string: #0a7d55;
  --code-number: #9a5b00;
  --code-title: #1f5fb0;
  --code-attr: #b3452b;
  --code-meta: #63636f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #0a0a0c;
    --card: #101014;
    --muted: #15151a;
    --accent: #17171d;
    --border: #1e1e25;
    --input: #26262f;

    --foreground: #f4f4f7;
    --muted-foreground: #8b8b9c;
    --faint: #6c6c7c;

    --primary: #f4f4f7;
    --primary-foreground: #0a0a0c;
    --secondary: #23232b;
    --secondary-foreground: #f4f4f7;
    --accent-foreground: #f4f4f7;

    --destructive: #ef4444;
    --destructive-dim: #1c1216;
    --success: #4ade80;
    --success-dim: #10221a;
    --warning: #f0b866;
    --warning-dim: #221a10;

    --ring: #6d6df0;
    --key: #a6a6f0;

    --code-comment: #74748a;
    --code-keyword: #c4a2f5;
    --code-string: #7fd8a8;
    --code-number: #f0b866;
    --code-title: #85b7f0;
    --code-attr: #f0a58a;
    --code-meta: #9a9ab0;
  }
}

:root[data-theme="dark"] {
  --background: #0a0a0c;
  --card: #101014;
  --muted: #15151a;
  --accent: #17171d;
  --border: #1e1e25;
  --input: #26262f;

  --foreground: #f4f4f7;
  --muted-foreground: #8b8b9c;
  --faint: #6c6c7c;

  --primary: #f4f4f7;
  --primary-foreground: #0a0a0c;
  --secondary: #23232b;
  --secondary-foreground: #f4f4f7;
  --accent-foreground: #f4f4f7;

  --destructive: #ef4444;
  --destructive-dim: #1c1216;
  --success: #4ade80;
  --success-dim: #10221a;
  --warning: #f0b866;
  --warning-dim: #221a10;

  --ring: #6d6df0;
  --key: #a6a6f0;

  --code-comment: #74748a;
  --code-keyword: #c4a2f5;
  --code-string: #7fd8a8;
  --code-number: #f0b866;
  --code-title: #85b7f0;
  --code-attr: #f0a58a;
  --code-meta: #9a9ab0;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
}

/* The read indicator eases in rather than appearing, so a read that finishes
   just past the quiet window does not snap on and straight off again. */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fade-in 180ms ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
  }
}