/* ==========================================================================
 * Rent Ready Web Design System v1.0.0 . design tokens
 *
 * Canonical source for every color, radius, shadow, and timing in this app.
 * Property names mirror the @theme block of the design system gist verbatim
 * so this file stays diffable against upstream:
 *   https://gist.github.com/WiggityZwiggity/387241e2650c25bcb87843586b24dfc1
 *
 * The gist is Tailwind v4 CSS-first. This project has no Node toolchain, so
 * the tokens are plain custom properties and there are no generated utility
 * classes. Values are identical; only the delivery differs.
 *
 * RULES THIS FILE EXISTS TO ENFORCE
 *   1. No hex or rgba() literal belongs anywhere but this file. Components
 *      reference var(--...). tests/api/test_design_system.py enforces it.
 *   2. Cyan is an accent: CTAs, metric values, links, active states. It is
 *      never a background wash.
 *   3. White on cyan-500 is 2.09:1 and fails AA. Text on any color fill is
 *      navy (7.85:1 on cyan). White is permitted only on a bold button label.
 *   4. Shadows are cast in navy, never black. Never #000, never #E5E5E5.
 *
 * This file contains :root and nothing else. That is deliberate: it is read
 * verbatim by workers/report.py and inlined into customer-facing HTML
 * reports, which must carry no layout or component rules from the web app.
 * ========================================================================== */

:root {
  /* ---- Palette C . cyan (primary accent) ---------------------------- */
  --color-cyan-50: #E5FBF9;
  --color-cyan-100: #B0F2EC;
  --color-cyan-200: #66E5DA;
  --color-cyan-300: #33D9CB;
  --color-cyan-500: #00C9B7;
  --color-cyan-600: #00A89A;
  --color-cyan-700: #00877C;
  --color-cyan-800: #00665E;

  /* ---- Palette C . deep navy ---------------------------------------- */
  --color-navy-50: #EEF1F6;
  --color-navy-100: #C5CCDB;
  --color-navy-300: #4C5A78;
  --color-navy-500: #0D1F3C;
  --color-navy-600: #0A1830;
  --color-navy-700: #071124;

  /* ---- Palette C . secondary metric accents ------------------------- */
  --color-violet-500: #A78BFA;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;

  /* ---- Palette C . coral (warnings and destructive only) ------------ */
  --color-coral-500: #FF6B5A;

  /* ---- Surface and text --------------------------------------------- */
  --color-bg: #FFFFFF;
  --color-bg-subtle: #FAFBFC;
  --color-surface: #FFFFFF;
  --color-text: #0D1F3C;
  --color-text-secondary: #4B5563;
  --color-text-caption: #9CA3AF;

  /* Borders carry a navy tint. Never a neutral grey. */
  --color-border: rgba(16, 29, 59, 0.06);
  --color-border-medium: rgba(16, 29, 59, 0.1);
  --color-border-input: rgba(16, 29, 59, 0.12);

  /* ---- Navy alpha ramp ----------------------------------------------
   * Collapses the scattered one-off rgba(16,29,59,a) literals that the
   * previous stylesheets carried into a single named ramp. */
  --color-navy-a60: rgba(16, 29, 59, 0.6);
  --color-navy-a40: rgba(16, 29, 59, 0.4);
  --color-navy-a10: rgba(16, 29, 59, 0.1);
  --color-navy-a05: rgba(16, 29, 59, 0.05);
  --color-scrim: rgba(13, 31, 60, 0.8);

  /* ---- Accent tints -------------------------------------------------
   * Alpha derivations of the accents above, for pill and banner fills.
   * The system uses this grammar itself in its secondary-button hover,
   * rgba(0,201,183,0.05). No new brand color is introduced here. */
  --color-cyan-tint: rgba(0, 201, 183, 0.1);
  --color-cyan-tint-soft: rgba(0, 201, 183, 0.05);
  --color-cyan-ring: rgba(0, 201, 183, 0.35);
  --color-blue-tint: rgba(59, 130, 246, 0.1);
  --color-coral-tint: rgba(255, 107, 90, 0.12);
  --color-coral-tint-soft: rgba(255, 107, 90, 0.07);

  /* ---- Semantic roles ------------------------------------------------ */
  --color-accent: var(--color-cyan-500);
  --color-accent-hover: var(--color-cyan-600);
  /* Inline link text. cyan-800 is 6.86:1 on white; cyan-500 is 2.09:1 and
   * cyan-700 is 4.41:1, which misses AA for normal text. */
  --color-link: var(--color-cyan-800);

  /* ---- Shape --------------------------------------------------------- */
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-chip: 4px;
  --radius-badge: 100px;

  /* ---- Shadows . navy-cast, never black ------------------------------ */
  --shadow-sm: 0 1px 2px 0 rgba(16, 29, 59, 0.05);
  --shadow-card: 0 2px 16px -4px rgba(16, 29, 59, 0.08);
  --shadow-card-hover: 0 4px 16px rgba(13, 31, 60, 0.1);
  --shadow-elevated: 0 8px 32px -4px rgba(16, 29, 59, 0.12);

  /* ---- Motion --------------------------------------------------------
   * Animate transform and opacity only. Never width, height, top, left. */
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-caption: 300ms;
  --duration-reveal: 500ms;

  /* ---- Type ----------------------------------------------------------
   * The gist ships a bug where DM Sans is loaded but never applied, so the
   * live site renders in system-ui. Naming the family here is the fix. */
  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  --text-caption: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1280px;
  --container-pad: 16px;
  --container-pad-sm: 24px;
  --container-pad-lg: 32px;
  --section-pad: 64px;
  --section-pad-lg: 96px;
}