/*
 * Professor Higgins — Custom Styles
 *
 * T003: overrides and extensions on top of Tailwind Play CDN.
 * Tailwind provides the utility classes; this file provides:
 *   1. CSS custom properties (design tokens) for colors and spacing
 *   2. Light theme as the default — warm cream parchment background,
 *      matches Claude.ai's signature visual identity
 *   3. Base typography and body reset beyond Tailwind's preflight
 *   4. Utility classes Tailwind doesn't cover (focus ring, safe-area insets)
 *
 * Constitution references:
 * - §II No Build Step — plain CSS, no Sass, no PostCSS, no autoprefixer
 * - §VI Mobile-First — all sizes designed for 375×667 iPhone SE baseline
 *
 * Palette: "Claude-inspired warm light" (2026-04-11)
 * Key move away from Tailwind's cool slate palette:
 *   - Background and surfaces are WARM cream / parchment, not pure white
 *   - Accent is a distinctive rust orange matching Claude.ai's visual identity
 *   - Text is warm near-black, not pure black or slate
 * The effect is "handwritten notebook / parchment" rather than "tech dashboard".
 */

/* ------------------------------------------------------------------ *
 * 1. Design tokens (CSS custom properties)                           *
 * ------------------------------------------------------------------ */

:root {
  /* Brand colors — must match manifest.webmanifest theme/background */
  --higgins-accent: #C8724B;           /* Claude orange (darker for light-bg contrast) */
  --higgins-accent-dark: #A85A36;      /* darker hover */
  --higgins-accent-light: #D97757;     /* lighter highlight */

  /* Surface / background (warm light, default theme) */
  --higgins-bg: #F5F1E8;               /* warm cream (main canvas) */
  --higgins-bg-elevated: #FAF9F4;      /* card / panel surface (slightly lighter) */
  --higgins-bg-hover: #EDE8DA;         /* hover state (slightly darker than bg) */
  --higgins-border: #E0DBCB;           /* subtle warm tan separator */

  /* Text — warm dark, not pure black */
  --higgins-text: #1F1E1A;             /* primary (warm near-black) */
  --higgins-text-muted: #6E6B64;       /* secondary / labels */
  --higgins-text-dim: #A0998E;         /* tertiary / footer */

  /* Semantic */
  --higgins-danger: #B8453C;           /* warm red (darker for light bg) */
  --higgins-warning: #C98A2E;          /* warm amber */
  --higgins-success: #5F8A3C;          /* muted warm green (not used as primary accent) */

  /* Typography */
  --higgins-font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --higgins-font-serif: Georgia, "Times New Roman", "PMingLiU", serif;
  --higgins-font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* Layout */
  --higgins-max-width: 420px;          /* Single-hand 375×667 + buffer */
  --higgins-radius: 12px;
  --higgins-radius-sm: 8px;

  /* Safe area (iOS notch / home indicator) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------------ *
 * 2. Base reset extensions                                           *
 * ------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  width: 100%;
}

html,
body {
  font-family: var(--higgins-font-sans);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--higgins-bg);
  color: var(--higgins-text);
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  /* iOS safe-area padding — respects notch + home indicator */
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
}

/* Disable pinch-zoom accidental triggers but keep accessibility zoom via browser menu.
   font-size: 16px prevents iOS Safari auto-zoom on focus (triggers at <16px). */
input, textarea, select, button {
  font: inherit;
  font-size: 16px;
}

/* Prevent text selection on buttons by default (feels more app-like) */
button {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}

/* Allow selection in text inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------------ *
 * 3. Focus styles (accessibility)                                    *
 * ------------------------------------------------------------------ */

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

/* Remove default focus ring when using keyboard navigation inside Alpine */
*:focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------------------------ *
 * 4. Reusable component classes                                      *
 * ------------------------------------------------------------------ */

/* Full-viewport canvas — apply to <body> or root container */
.higgins-canvas {
  background-color: var(--higgins-bg);
  color: var(--higgins-text);
  min-height: 100vh;
}

/* Accent text utility (titles, stat numbers) */
.higgins-accent-text {
  color: var(--higgins-accent);
}

/* Muted text utility */
.higgins-muted-text {
  color: var(--higgins-text-muted);
}

/* Main content container — constrains to mobile-first max width */
.higgins-shell {
  width: 100%;
  max-width: var(--higgins-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: 16px;
  overflow-x: hidden;
}

/* Card surface */
.higgins-card {
  background-color: var(--higgins-bg-elevated);
  border: 1px solid var(--higgins-border);
  border-radius: var(--higgins-radius);
  padding: 16px;
  color: var(--higgins-text);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.higgins-card:hover {
  background-color: var(--higgins-bg-hover);
  border-color: var(--higgins-accent);
}

/* Primary action button */
.higgins-btn-primary {
  background-color: var(--higgins-accent);
  color: #FFFFFF;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--higgins-radius-sm);
  transition: background-color 0.15s ease;
  min-height: 44px; /* iOS HIG minimum tap target */
}

.higgins-btn-primary:hover {
  background-color: var(--higgins-accent-dark);
}

.higgins-btn-primary:disabled {
  background-color: var(--higgins-bg-hover);
  color: var(--higgins-text-muted);
  cursor: not-allowed;
}

/* Secondary / ghost button */
.higgins-btn-ghost {
  background-color: transparent;
  color: var(--higgins-text);
  border: 1px solid var(--higgins-border);
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--higgins-radius-sm);
  transition: background-color 0.15s ease;
  min-height: 44px;
}

.higgins-btn-ghost:hover {
  background-color: var(--higgins-bg-elevated);
  border-color: var(--higgins-accent);
}

/* ------------------------------------------------------------------ *
 * 5. Boot fallback (pre-Alpine.js paint)                             *
 * ------------------------------------------------------------------ */

#boot-fallback {
  /* Hidden once Alpine mounts and replaces #app content.
     Stays visible if JS is disabled (see <noscript> in index.html). */
  opacity: 0.6;
  animation: higgins-pulse 1.8s ease-in-out infinite;
}

@keyframes higgins-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Hide boot fallback once app is alive (app.js sets data-booted on <html>) */
html[data-booted="true"] #boot-fallback {
  display: none;
}

/* ------------------------------------------------------------------ *
 * 6. Utility: screen-reader only                                     *
 * ------------------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ------------------------------------------------------------------ *
 * 7. Reduced motion respect                                          *
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}