@import 'tailwindcss';

@custom-variant light (&:where([data-theme='light'], [data-theme='light'] *));

@theme {
  --color-sleeve: #14110f;
  --color-vinyl: #1e1a17;
  --color-vinyl-2: #26211d;
  --color-dust: #8a8178;
  --color-paper: #e8e1d6;
  --color-paper-dim: #c9c1b4;

  --color-oxide: #c1502e;
  --color-tape: #d8a657;
  --color-phosphor: #7fb685;
  --color-signal: #6e9dc9;
  --color-alarm: #b33a3a;

  --color-manila: #f2ede4;
  --color-manila-2: #e8e1d6;
  --color-manila-3: #ded5c7;

  --color-base: var(--bg-base);
  --color-panel: var(--bg-panel);
  --color-raised: var(--bg-raised);

  --color-primary: var(--text-primary);
  --color-secondary: var(--text-secondary);
  --color-muted: var(--text-muted);

  --color-hairline: var(--border-hairline);
  --color-line: var(--border-default);
  --color-line-strong: var(--border-strong);

  --color-accent: var(--accent);
  --color-accent-text: var(--accent-text);
  --color-accent-hover: var(--accent-hover);

  --color-success: var(--status-success);
  --color-warning: var(--status-warning);
  --color-info: var(--status-info);

  --color-link: var(--link);
  --color-link-hover: var(--link-hover);

  --font-mono:
    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-forum: Verdana, Tahoma, sans-serif;

  --text-display: 48px;
  --text-display--line-height: 56px;
  --text-title: 32px;
  --text-title--line-height: 40px;
  --text-heading: 20px;
  --text-heading--line-height: 28px;
  --text-body: 14px;
  --text-body--line-height: 22px;
  --text-label: 11px;
  --text-label--line-height: 14px;

  --tracking-label: 0.06em;

  --radius-md: 8px;

  --animate-cursor-blink: ss-cursor-blink 1.06s steps(1) infinite;

  @keyframes ss-cursor-blink {
    0%,
    50% {
      opacity: 1;
    }
    50.01%,
    100% {
      opacity: 0;
    }
  }
}

:root {
  --bg-base: var(--color-sleeve);
  --bg-panel: var(--color-vinyl);
  --bg-raised: var(--color-vinyl-2);
  --bg-selection: rgb(110 157 201 / 0.22);

  --text-primary: #ffffff;
  --text-secondary: #e4dfd8;
  --text-muted: #bdb4a9;

  --border-hairline: rgb(138 129 120 / 0.35);
  --border-default: rgb(138 129 120 / 0.7);
  --border-strong: var(--color-dust);

  --accent: var(--color-oxide);

  --accent-text: #cd7155;
  --accent-hover: #d05f3c;

  --status-warning: var(--color-tape);
  --status-success: var(--color-phosphor);
  --status-info: var(--color-signal);

  --link: var(--color-signal);
  --link-hover: #8bb4dc;

  --tm-bg: #1e1a17;
  --tm-hd: #181513;
  --tm-fg: #ffffff;
  --tm-dim: #bdb4a9;
  --tm-bd: rgb(138 129 120 / 0.32);
  --tm-bd2: rgb(138 129 120 / 0.22);
  --tm-bd3: rgb(138 129 120 / 0.6);
  --tm-pr: #c1502e;
  --tm-cm: #aba298;
  --tm-ok: #7fb685;
  --cmd-bg: #0e0c0a;
  --tui-track: #2a2622;
  --tui-bezel: #000000;

  color-scheme: dark;
}

[data-theme='light'] {
  --bg-base: var(--color-manila);
  --bg-panel: var(--color-manila-2);
  --bg-raised: var(--color-manila-3);
  --bg-selection: rgb(76 127 174 / 0.2);

  --text-primary: var(--color-sleeve);
  --text-secondary: #574e45;
  --text-muted: #645b52;

  --border-hairline: rgb(20 17 15 / 0.15);
  --border-default: rgb(20 17 15 / 0.28);
  --border-strong: #6b6259;

  --accent: #ae4728;
  --accent-text: #9c3f23;
  --accent-hover: #c1502e;

  --status-warning: #755725;
  --status-success: #3e6543;
  --status-info: #395f82;

  --link: #395f82;
  --link-hover: #24486a;

  --tm-bg: #e9e2d7;
  --tm-hd: #dcd3c4;
  --tm-fg: #14110f;
  --tm-dim: #574e45;
  --tm-bd: rgb(20 17 15 / 0.2);
  --tm-bd2: rgb(20 17 15 / 0.13);
  --tm-bd3: rgb(20 17 15 / 0.42);
  --tm-pr: #9e3f22;
  --tm-cm: #6b6259;
  --tm-ok: #3f7147;
  --cmd-bg: #dcd3c4;
  --tui-track: #cfc5b5;
  --tui-bezel: rgb(20 17 15 / 0.28);

  color-scheme: light;
}

.logo-mark {
  background-image: url('/logo-ink.svg');
}

[data-theme='light'] .logo-mark {
  background-image: url('/logo-light.svg');
}

.tui-content {
  --color-alarm: #c26060;
  --color-oxide: #c65f40;
}

[data-theme='light'] .tui-content {
  --color-paper: #14110f;
  --color-paper-dim: #3a332c;
  --color-dust: #645b52;
  --color-oxide: #9e3f22;
  --color-tape: #8d621f;
  --color-phosphor: #3f7147;
  --color-signal: #35648f;
  --color-alarm: #8f2626;
}

@layer base {
  html {
    scroll-behavior: smooth;

    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);

    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background: var(--bg-selection);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-iteration-count: 1 !important;
      transition-duration: 80ms !important;
    }

    [class*='animate-'] {
      animation: none !important;
    }
  }
}