global.css

/*
 * Cyberpunk Brutalist face: Departure Mono, the one bundled face.
 * Registered at runtime by src/utils/web-fonts.ts, which
 * requires the binary through Metro so dev and exported builds both serve it.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Cyberpunk Brutalist field computer. Squared, sharp, fast.
 */
html,
body {
  font-family: "Departure Mono", monospace;
  /* Pixel face: neutral tracking and default subpixel smoothing keep the
   * glyph grids even; antialiasing or negative tracking smears them. */
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
  background: var(--app-background);
  letter-spacing: 0;
}
html.dark,
html.dark body {
  background: var(--app-background);
}

input,
button,
textarea,
select {
  font-family: inherit;
}

/*
 * Tailwind v3 preflight paints placeholders AND empty inputs (::placeholder-shown)
 * gray-400 (#9ca3af, 2.5:1 on white). That overrides themed input colors on
 * react-native-web TextInputs whose color lives in a lower-specificity class.
 * Neutralize it so the app's own colors (and RNW's --placeholderTextColor)
 * win; the app sets an explicit placeholderTextColor on every input.
 */
:is(input:placeholder-shown, textarea:placeholder-shown) {
  color: inherit;
}
input::placeholder,
textarea::placeholder {
  color: inherit;
}

/*
 * Single source: src/theme.ts is the palette. These CSS variables mirror
 * lightColors / darkColors so NativeWind and plain CSS stay in sync.
 * Update theme.ts, then mirror the hex here.
 * Exact same as prototype board for pixel-identical grid.
 */
:root {
  --app-background: #f1f5f9;
  --app-surface: #ffffff;
  --app-surface-alt: #e2e8f0;
  --app-primary: #0b57d0;
  --app-border: #0f172a;
  --app-text: #0f172a;
  --bg: #f1f5f9;
  --bg-grid: rgba(15, 23, 42, 0.035);
  --surface: #ffffff;
  --surface-alt: #e2e8f0;
  --ink: #0f172a;
  --ink-muted: #475569;
  --primary: #0b57d0;
  --on-primary: #ffffff;
  --border: #0f172a;
  --meal-b: #075985;
  --meal-l: #804707;
  --meal-d: #96340a;
  --meal-s: #0b5f5a;
}
html.dark {
  --app-background: #1a1b26;
  --app-surface: #24283b;
  --app-surface-alt: #292e42;
  --app-primary: #7aa2f7;
  --app-border: #6b739c;
  --app-text: #c0caf5;
  --bg: #1a1b26;
  --bg-grid: rgba(192, 202, 245, 0.035);
  --surface: #24283b;
  --surface-alt: #292e42;
  --ink: #c0caf5;
  --ink-muted: #a9b1d6;
  --primary: #7aa2f7;
  --on-primary: #1a1b26;
  --border: #6b739c;
  --meal-b: #8db8ff;
  --meal-l: #ffb020;
  --meal-d: #ff92a6;
  --meal-s: #2ec4b6;
}
/*
 * gluestack-ui Tokyo Night alignment - derived from theme surfaceAlt / border
 */
html.dark {
  --color-background-50: 36 40 59;
  --color-background-100: 41 46 66;
  --color-background-200: 107 115 156;
  --color-background-300: 73 82 120;
}
html:not(.dark) {
  --color-background-50: 255 255 255;
  --color-background-100: 241 245 249;
  --color-background-200: 226 232 240;
  --color-background-300: 203 213 225;
}

/*
 * Typography Utilities: Departure Mono for tabular numeric data
 * For pixel-perfect results, set the font size to increments of 11px.
 * Departure Mono is drawn on an 11px grid. 11, 22, 33 keep stems
 * on device pixels. Body 14 is the readability compromise.
 */
.font-tabular,
.font-mono,
.font-jetbrains {
  font-family: "Departure Mono", monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}

.font-heading {
  font-family: "Departure Mono", monospace;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* 11px grid snap for tabular data on wide where crispness matters */
@media (min-width: 900px) {
  .font-tabular,
  .font-mono {
    font-size: 11px;
  }
  .text-\[14px\].font-tabular,
  .text-\[16px\].font-tabular {
    font-size: 14px;
  }
}

/*
 * Modern text wrapping & legibility
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p,
.text-pretty {
  text-wrap: pretty;
}

/* Big screen: stabilize scrollbar and avoid layout shift */
html {
  scrollbar-gutter: stable;
  interpolate-size: allow-keywords;
}

@media (min-width: 1280px) {
  body {
    text-rendering: geometricPrecision;
  }
}

/*
 * Scrollbars: hidden on thumb-driven phones, thin ledger line from 600
 */
*::-webkit-scrollbar {
  display: none;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
@media (min-width: 600px) {
  *::-webkit-scrollbar {
    display: block;
    width: 6px;
    height: 6px;
  }
  *::-webkit-scrollbar-thumb {
    background: var(--app-primary);
    border-radius: 0;
  }
  html.dark *::-webkit-scrollbar-thumb {
    background: var(--app-primary);
  }
  *::-webkit-scrollbar-track {
    background: transparent;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--app-primary) transparent;
  }
  html.dark * {
    scrollbar-color: var(--app-primary) transparent;
  }
}

/* Browser surfaces. Tokyo Night ink */
::selection {
  background: var(--app-primary);
  color: #ffffff;
}
html.dark ::selection {
  background: var(--app-primary);
  color: var(--app-background);
}
::placeholder {
  color: inherit;
  opacity: 0.85;
}
input {
  caret-color: var(--app-primary);
}
html.dark input {
  caret-color: var(--app-primary);
}

/* Sharp focus. 1.5px solid Tokyo Night ink, square */
:focus-visible {
  outline: 1.5px solid var(--app-primary);
  outline-offset: 1px;
  border-radius: 0 !important;
}
html.dark :focus-visible {
  outline-color: var(--app-primary);
}

/* Terminal world - square, sharp, no soft shadows */
.rounded-3xl,
.rounded-2xl,
.rounded-xl,
.rounded-lg,
.rounded-md,
.rounded {
  border-radius: 0 !important;
}
.rounded-full {
  border-radius: 0 !important;
}
/* cards lose soft shadow, gain 1.5px ink rule */
.shadow-soft-1,
.shadow-soft-2,
.shadow-soft-3,
.shadow-soft-4,
[class*="shadow-"] {
  box-shadow: none !important;
}
/* elevated cards -> sharp Tokyo Night border */
.bg-background-50 {
  border: 1.5px solid var(--app-border);
}
html.dark .bg-background-50 {
  border-color: var(--app-border);
}
/* primary buttons square */
.bg-primary-500 {
  border: 1.5px solid var(--app-primary);
  border-radius: 0 !important;
}
html.dark .bg-primary-500 {
  border-color: var(--app-primary);
}
/* paper grid. Tokyo Night graph. Tokenized via CSS variables — exact same as prototype board */
:root {
  --paper-grid: rgba(15, 23, 42, 0.035);
  --paper-grid-dark: rgba(192, 202, 245, 0.035);
  --scrim: rgba(26, 27, 38, 0.65);
}
html:not(.dark) body,
html:not(.dark) .app-grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
html.dark body,
html.dark .app-grid {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--bg-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
/* tabular numbers forced everywhere for ledger speed */
.font-tabular,
.font-mono,
.font-jetbrains,
[class*="font-tabular"] {
  font-variant-numeric: tabular-nums !important;
}
/* Tokyo Night rule color for outline */
[class*="border-outline"] {
  border-color: var(--app-border) !important;
}
html.dark [class*="border-outline"] {
  border-color: var(--app-border) !important;
}
/* scrollbar Tokyo Night square */
@media (min-width: 600px) {
  *::-webkit-scrollbar-thumb {
    background: var(--app-primary);
    border-radius: 0;
  }
  html.dark *::-webkit-scrollbar-thumb {
    background: var(--app-primary);
  }
}

/* Big screen performance: content-visibility for long diaries and stats.
   Only on web where the CSS is parsed. Cards below the fold skip paint
   until scrolled near the viewport. intrinsic-size keeps scrollbar stable. */
@media (min-width: 600px) {
  .meal-card,
  [data-meal-card] {
    content-visibility: auto;
    contain-intrinsic-size: auto 220px;
    contain: layout paint style;
  }
}

/* Wide shell: floating detached rail and centered diary column.
   Keeps interactive chrome away from the monitor edge on 1280+ screens,
   so reach stays inside the 1440 shell with 24px outer gutters. */
@media (min-width: 900px) {
  /* Soften the paper grid at wide where it can buzz at 24px repeat */
  body {
    background-size: 28px 28px;
  }
  /* Meal cards gain a calm hover without lifting off the paper */
  .meal-card:hover {
    border-color: var(--app-primary) !important;
  }
}
@media (min-width: 1280px) {
  body {
    background-size: 32px 32px;
  }
}
@media (min-width: 1440px) {
  html {
    scrollbar-gutter: stable both-edges;
  }
}

/* Hide inactive tab screens kept mounted by React Navigation (z-index -1).
   Without this, the inactive diary shows through the transparent empty area
   of the active Stats/Settings page on web. Keep the paper grid visible by
   keeping all screens transparent and hiding the inactive one via display. */
div[style*="z-index: -1"] {
  display: none !important;
}

/* Subtle view transition for diary date changes on supporting browsers */
@supports (view-transition-name: diary) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
  }
}

/* reduce motion. Preserve feedback without scale */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  /* pressed states fall back to opacity and invert not scale */
  [style*="scale"] {
    transform: none !important;
  }
  .active\:opacity-80:active,
  .active\:bg-background-100:active,
  .active\:bg-background-200:active {
    opacity: 0.85 !important;
  }
}

/* ledger skeleton. Ruled placeholder while SQLite hydrates */
@keyframes ledger-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
.ledger-skeleton {
  background: var(--app-surface-alt);
  background-image: linear-gradient(
    to right,
    var(--app-surface-alt) 0%,
    var(--app-background) 50%,
    var(--app-surface-alt) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: ledger-shimmer 1.2s ease-in-out infinite;
  border: 1px solid var(--app-border);
}
html.dark .ledger-skeleton {
  background: var(--app-surface-alt);
  background-image: linear-gradient(
    to right,
    var(--app-surface-alt) 0%,
    var(--app-border) 50%,
    var(--app-surface-alt) 100%
  );
  border-color: var(--app-border);
}
@media (prefers-reduced-motion: reduce) {
  .ledger-skeleton {
    animation: none;
    background-image: none;
  }
}