/*
 * Mandala Rails — Design Tokens
 *
 * Single source of truth for color, type, spacing, and corner radius.
 * Loaded first (the leading underscore sorts this ahead of application.css)
 * via Propshaft's `stylesheet_link_tag :app`, so every token below is
 * available to application.css with zero extra wiring.
 *
 * Change the app's look — subtly or dramatically — from here.
 */

:root {
  /* ── Color: core ── */
  --color-ink: #1a1a1a;
  --color-ink-hover: #333;
  --color-canvas: #f5f5f0;
  --color-surface: #fff;
  --color-border: #e0e0e0;
  --color-link: var(--color-ink);

  /* ── Color: neutral ramp (muted text, hairlines, placeholders) ── */
  --color-gray-600: #666;
  --color-gray-500: #888;
  --color-gray-400: #999;
  --color-gray-300: #aaa;
  --color-gray-200: #ccc;
  --color-gray-100: #ddd;

  /* ── Color: status ── */
  --color-negative: #c0392b;
  --color-negative-hover: #96281b;
  --color-positive: #1e7a3c;
  --color-warning: #e0a800;

  /* ── Color: surfaces & accents ── */
  --color-banner-bg: #fdf3d0;
  --color-banner-text: #5c4a12;
  --color-badge-bg: #e8e8e0;
  --color-tile-center-bg: #f0f0e8;
  --color-tile-center-bg-hover: #e8e8dc;
  --color-error-bg: #fde;
  --color-error-border: #fcc;
  --overlay-hover: rgba(0, 0, 0, 0.04);
  --overlay-hover-subtle: rgba(0, 0, 0, 0.02);

  /* ── Type ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-2xs: 0.7rem;
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.1rem;
  /* Headings scale with the viewport so they don't dominate a phone screen.
     Body steps above stay fixed to keep small text readable. */
  --text-lg: clamp(1.25rem, 1rem + 1.4vw, 1.5rem);
  --text-xl: clamp(1.4rem, 1rem + 2.4vw, 1.8rem);

  /* ── Spacing ── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --grid-gap: 6px;

  /* ── Radius & borders ── */
  --radius: 4px;
  --radius-card: 6px;
  --radius-pill: 99px;
  --border: 1px solid var(--color-border);

  /* ── Responsive ──
   *
   * The app has a single mobile breakpoint. CSS `@media` conditions can't read
   * custom properties, so the value can't literally be a token — but this is
   * its documented source of truth. Change it here and in the matching
   * `@media (max-width: 40rem)` blocks (application.css). 40rem ≈ 640px, the
   * same one-breakpoint model fizzy and campfire use.
   */

  /* Minimum comfortable touch target (iOS/Android guidance is ~44px). */
  --tap-min: 44px;

  /* Safe-area insets for notched phones / installed web apps. Zero on every
   * other device. Fed by `viewport-fit=cover` in the layout head. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}