/*
 * Approach Auto Mobility — Brand Design Tokens
 * Source: Approach Auto Mobility Brand Board
 *
 * This file provides CSS custom properties (variables) and opt-in component
 * classes only. It does NOT override bare HTML elements — Tailwind handles those.
 * Reference these variables when writing custom CSS or inline styles.
 */

/* ============================================================
   1. COLOR TOKENS
   ============================================================ */

:root {
  --color-primary:        #5CC884; /* primary green */
  --color-primary-light:  #82EA96; /* lighter green — hover states */
  --color-primary-dark:   #00986b; /* darker green — used for interactive buttons */
  --color-dark:           #141414; /* near-black */
  --color-gray-mid:       #898F89; /* muted text, borders */
  --color-gray-light:     #ECEDED; /* backgrounds, dividers */
  --color-off-white:      #FFFFFB; /* page/card backgrounds */

  /* Semantic aliases */
  --color-accent:         var(--color-primary);
  --color-accent-hover:   var(--color-primary-light);
}

/* ============================================================
   2. TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  --font-heading: 'Saira', sans-serif;
  --font-body:    'Titillium Web', sans-serif;
}

/* ============================================================
   3. SHAPE & SHADOW TOKENS
   ============================================================ */

:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(20, 20, 20, 0.08);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.12);
  --shadow-lg: 0 8px 24px rgba(20, 20, 20, 0.16);
}

/* ============================================================
   4. OPT-IN COMPONENT CLASSES
   Use these explicitly in markup — they do not auto-apply.
   ============================================================ */

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
}
.badge-green { background-color: rgba(92, 200, 132, 0.15); color: #2a8a52; }
.badge-dark  { background-color: var(--color-dark); color: var(--color-primary); }
.badge-gray  { background-color: var(--color-gray-light); color: var(--color-gray-mid); }

/* Dark section utility */
.section-dark {
  background-color: var(--color-dark);
  color: var(--color-off-white);
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--color-off-white);
}