@import "./fonts.css";
@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

/*
 * ── iPad Readability & Touch Configuration ────────────────────────────────────
 *
 * This app is primarily used on an iPad at arm's length. The Tailwind
 * configuration below enforces:
 *
 *   1. Base font sizes — body text is 16px minimum; key UI text (headings,
 *      labels, inputs) targets 20px+. See the @theme and @layer base blocks.
 *
 *   2. Touch-friendly spacing — a custom spacing scale with generous
 *      padding/margins suitable for large touch interfaces.
 *
 *   3. touch-target-min utility — a custom Tailwind utility class that
 *      enforces the Apple HIG minimum touch-target size of 44×44pt.
 *      Usage: <button class="touch-target-min">…</button>
 *
 *   4. Touch interaction defaults — `touch-action: manipulation` on the
 *      body prevents accidental double-tap zoom on iPad Safari.
 *
 *   5. Tap feedback — all interactive elements (button, a, [role="button"])
 *      have base-layer active-state styling (opacity + scale) for visible
 *      press feedback on touch. Individual elements can layer Tailwind
 *      `active:` utilities on top for more specific feedback.
 *
 * See also: docs/mvp-plan.md, Story 1.1.4 and Story 1.3.1.
 * See also: docs/touch-target-convention.md for touch target sizing guide.
 * ──────────────────────────────────────────────────────────────────────────────
 */

/* ── Custom theme tokens ───────────────────────────────────────────────────── */
@theme inline {
  /* Figma: Inter for UI, JetBrains Mono for numbers (see fonts.css). */
  --font-sans: var(--font-family-base);
  --font-mono: var(--font-family-mono);
}

@theme {
  /* Font sizes optimised for iPad at arm's length.
   * "base" (body) = 16px, "lg" = 20px for key UI text, scaling up from there.
   * Tailwind v4 uses --text-* / --text-*--line-height tokens for text-*
   * utilities.                                                                */
  --text-sm: 0.875rem;                /* 14px — secondary/caption text         */
  --text-sm--line-height: 1.25rem;    /* 20px                                  */
  --text-base: 1rem;                  /* 16px — body / minimum readable size   */
  --text-base--line-height: 1.5rem;   /* 24px                                  */
  --text-lg: 1.25rem;                 /* 20px — key UI text, inputs, list items*/
  --text-lg--line-height: 1.75rem;    /* 28px                                  */
  --text-xl: 1.5rem;                  /* 24px — section headings               */
  --text-xl--line-height: 2rem;       /* 32px                                  */
  --text-2xl: 1.75rem;               /* 28px — page headings                  */
  --text-2xl--line-height: 2.25rem;   /* 36px                                  */
  --text-3xl: 2.25rem;               /* 36px — hero / balance display         */
  --text-3xl--line-height: 2.75rem;   /* 44px                                  */

  /* Touch-friendly spacing scale.
   * These supplement the default Tailwind scale with more generous values
   * at the mid-range, making p-4/p-6/p-8 feel right on a 10" tablet.         */
  --spacing-touch-xs: 0.5rem;   /*  8px                                       */
  --spacing-touch-sm: 0.75rem;  /* 12px                                       */
  --spacing-touch-md: 1rem;     /* 16px                                       */
  --spacing-touch-lg: 1.5rem;   /* 24px                                       */
  --spacing-touch-xl: 2rem;     /* 32px                                       */
  --spacing-touch-2xl: 3rem;    /* 48px                                       */
}

/* ── Base (reset) layer ────────────────────────────────────────────────────── */
@layer base {
  html {
    /* Ensure 1rem = 16px regardless of browser defaults */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    /* Inter for all UI text (Figma). */
    font-family: var(--font-family-base);

    /* 16px base, comfortable line-height for reading at arm's length */
    font-size: 1rem;         /* 16px minimum */
    line-height: 1.5;        /* 24px */

    /* Prevent double-tap zoom on iPad Safari (Apple HIG recommendation) */
    touch-action: manipulation;

    /* Smooth font rendering on Retina displays */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Key UI text defaults — headings at 20px+ for arm's-length readability */
  h1 {
    font-size: 1.75rem;      /* 28px — page headings */
    line-height: 2.25rem;    /* 36px */
    font-weight: 700;
  }

  h2 {
    font-size: 1.5rem;       /* 24px — section headings */
    line-height: 2rem;       /* 32px */
    font-weight: 600;
  }

  h3 {
    font-size: 1.25rem;      /* 20px — subsection headings */
    line-height: 1.75rem;    /* 28px */
    font-weight: 600;
  }

  /* Form controls: large enough for touch and readable at arm's length */
  input,
  select,
  textarea,
  button {
    font-size: 1.25rem;      /* 20px — key UI text */
    line-height: 1.75rem;    /* 28px */
  }

  /* Labels should match input size for visual consistency */
  label {
    font-size: 1.125rem;     /* 18px */
    line-height: 1.5rem;     /* 24px */
    font-weight: 500;
  }

  /* ── Tap feedback for all interactive elements ─────────────────────────────
   * Provides a visible press state on touch for buttons, links, and any
   * element with role="button". The opacity + scale shift gives tactile
   * feedback on iPad without relying on hover states (which don't apply to
   * touch).
   *
   * Individual elements can override these with Tailwind active: utilities
   * for more specific feedback (e.g., active:bg-blue-700).
   * ──────────────────────────────────────────────────────────────────────── */
  button,
  a,
  [role="button"] {
    transition: opacity 0.1s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent; /* Remove Safari's default tap highlight */
  }

  button:active,
  a:active,
  [role="button"]:active {
    opacity: 0.7;
    transform: scale(0.97);
  }
}

/* ── Custom utility: touch-target-min ──────────────────────────────────────── */
/*
 * Enforces the Apple Human Interface Guidelines minimum touch target of
 * 44×44pt. Apply to any tappable element: buttons, links, icon actions.
 *
 * Usage:
 *   <button class="touch-target-min">Tap me</button>
 *   <a href="/admin" class="touch-target-min">Admin</a>
 *
 * The class sets min-width and min-height to 44px, centres content via
 * inline-flex, and adds comfortable default padding.
 */
@utility touch-target-min {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  cursor: pointer;
}

/* Native <option> elements inside styled <select>s inherit colored text/bg,
   making dropdown items illegible. Force standard readable colours. */
select option {
  background-color: #ffffff;
  color: #111827;
}

.dark select option {
  background-color: #1f2937;
  color: #f3f4f6;
}

/* ── Grocery item scratch-out animation ────────────────────────────────────── */
@keyframes scratch-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Hide the browser's native clear button on search inputs so we show only our custom one. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-ms-clear {
  display: none;
}

/* ── Safe-area header (viewport-fit=cover) ──────────────────────────────────── */
.tab-bar-layout > header {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.5rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
}

/* ── Tab bar layout ─────────────────────────────────────────────────────────── */
.tab-bar-layout {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.tab-bar-layout__content {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Tab bar ────────────────────────────────────────────────────────────────── */
.tab-bar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  background-color: #ffffff;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.dark .tab-bar {
  border-color: #374151;
  background-color: #111827;
}

.tab-bar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 16px;
  text-decoration: none;
  color: #9ca3af;
  transition: color 0.15s ease;
}

.tab-bar__tab:hover {
  color: #6b7280;
}

.dark .tab-bar__tab:hover {
  color: #d1d5db;
}

.tab-bar__tab:active {
  opacity: 0.7;
  transform: scale(0.95);
  background-color: #f3f4f6;
  border-radius: 8px;
}

.dark .tab-bar__tab:active {
  background-color: #1f2937;
}

.tab-bar__tab--active {
  color: #2563eb;
}

.dark .tab-bar__tab--active {
  color: #60a5fa;
}

.tab-bar__tab--active:hover {
  color: #2563eb;
}

.dark .tab-bar__tab--active:hover {
  color: #60a5fa;
}

.tab-bar__icon {
  width: 28px;
  height: 28px;
}

.tab-bar__label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  margin-top: 2px;
  font-weight: 500;
}

.tab-bar__icon-wrap {
  position: relative;
  display: inline-flex;
}

.tab-bar__badge {
  position: absolute;
  top: -5px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: #dc2626;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-family: var(--font-family-mono);
  pointer-events: none;
}