/* JoseOS design tokens. Light is default, dark follows the system unless [data-theme] is set. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root {
  /* Color */
  --ground: #E3E6E9;
  --screen: #F4F5F6;
  --card: #FFFFFF;
  --surface: rgba(250, 251, 252, 0.72);
  --ink: #121417;
  --muted: #666E77;
  --faint: #9CA3AA;
  --line: rgba(18, 20, 23, 0.075);
  --brass: #8F621A;
  --brass-soft: rgba(143, 98, 26, 0.11);
  --late: #B23F18;
  --good: #2E7A4C;
  --quiet: #4C6276;
  --mono-a: #B3B9C0;
  --mono-b: #8A919A;
  --bubble-me: #121417;
  --bubble-me-ink: #F4F5F6;
  --bubble-them: #FFFFFF;
  --scrim: rgba(18, 20, 23, 0.18);

  /* Depth */
  --shadow: 0 0.5px 0 rgba(18, 20, 23, 0.04), 0 10px 30px -14px rgba(18, 20, 23, 0.22);
  --shadow-sheet: 0 -10px 40px -16px rgba(0, 0, 0, 0.35);
  --blur-bar: blur(24px) saturate(1.8);

  /* Type */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --fs-title: 34px;   --lh-title: 1.06;  --tr-title: -0.04em;
  --fs-headline: 23px; --lh-headline: 1.22; --tr-headline: -0.035em;
  --fs-section: 20px; --tr-section: -0.03em;
  --fs-body: 16px;    --lh-body: 1.4;    --tr-body: -0.01em;
  --fs-secondary: 13.5px;
  --fs-caption: 12px;
  --fs-ledger: 25px;  --tr-ledger: -0.045em;

  /* Space and shape */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --gutter: 16px;
  --group-gap: 26px;
  --r-list: 22px;
  --r-sheet: 32px;
  --r-button: 15px;
  --r-tile: 12px;
  --r-pill: 999px;
  --hairline: 0.5px;

  /* Motion */
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --d-micro: 200ms;
  --d-standard: 420ms;
  --d-sheet-open: 640ms;
  --d-sheet-close: 520ms;
  --d-thread: 800ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B0D10; --screen: #121519; --card: #1B1F24; --surface: rgba(28, 32, 37, 0.72);
    --ink: #ECEEF0; --muted: #99A1A9; --faint: #666E76; --line: rgba(236, 238, 240, 0.075);
    --brass: #D7A95E; --brass-soft: rgba(215, 169, 94, 0.14); --late: #F28A5E; --good: #5FBF84; --quiet: #93A9BF;
    --mono-a: #5D646C; --mono-b: #40464D;
    --bubble-me: #ECEEF0; --bubble-me-ink: #121519; --bubble-them: #1F242A; --scrim: rgba(0, 0, 0, 0.45);
    --shadow: 0 0.5px 0 rgba(255, 255, 255, 0.03), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0B0D10; --screen: #121519; --card: #1B1F24; --surface: rgba(28, 32, 37, 0.72);
  --ink: #ECEEF0; --muted: #99A1A9; --faint: #666E76; --line: rgba(236, 238, 240, 0.075);
  --brass: #D7A95E; --brass-soft: rgba(215, 169, 94, 0.14); --late: #F28A5E; --good: #5FBF84; --quiet: #93A9BF;
  --mono-a: #5D646C; --mono-b: #40464D;
  --bubble-me: #ECEEF0; --bubble-me-ink: #121519; --bubble-them: #1F242A; --scrim: rgba(0, 0, 0, 0.45);
  --shadow: 0 0.5px 0 rgba(255, 255, 255, 0.03), 0 12px 32px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* Fallback for browsers without linear() easing */
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --spring: cubic-bezier(.2, .9, .25, 1); }
}

html { background: var(--screen); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}