/**
 * low-cost — DRAFT pending Ricardo validation
 * Oficina default candidate: white + Prio-like cyan/teal (budget/value, not clutter)
 * CMO 2026-09-05: BOTH fonts = system stack ONLY (no IBM Plex / webfont).
 * Do NOT treat as locked product default until APPROVED.
 */

:root {
  /* --- Surfaces (white-led trust base) --- */
  --color-bg: #ffffff;
  --color-surface: #f2f8fa;
  --color-surface-2: #e4eef2;

  /* --- Text --- */
  --color-text: #142028;
  --color-muted: #5a6870;

  /* --- Brand --- */
  --color-primary: #00b2ca;     /* Prio-like cyan/teal */
  --color-primary-hover: #0096ab;
  --color-accent: #007a8c;      /* deeper teal for links / secondary emphasis */

  /* --- UI chrome --- */
  --color-border: #cddbe0;
  --color-focus: #00b2ca;

  /* --- Contrast helpers (CRO 2026-09-06) --- */
  --color-on-light: #142028;
  --color-on-light-muted: #5a6870;
  --color-ink-on-light: var(--color-accent); /* deep teal #007a8c — not cyan primary on white */
  --color-dark-band: #003d4d; /* charcoal teal — never bright cyan as dark band */
  --color-on-dark: #f3f4f5;
  --color-on-dark-accent: #7ec8d4; /* light teal on deep band */

  /* --- CTA (primary = cyan; dark text for stronger contrast on bright fill) --- */
  --color-cta-bg: var(--color-primary);
  --color-cta-text: #0a1a1f;
  --color-cta-bg-hover: var(--color-primary-hover);
  --color-cta-border: var(--color-primary);

  /* --- Accent CTA (deeper teal + white text — links/secondary, not rival Ligar) --- */
  --color-cta-accent-bg: var(--color-accent);
  --color-cta-accent-text: #ffffff;
  --color-cta-accent-border: #006676;

  /* --- Secondary / ghost --- */
  --color-cta-secondary-bg: #ffffff;
  --color-cta-secondary-text: var(--color-accent);
  --color-cta-secondary-border: var(--color-accent);

  /* --- Typography: system ONLY — deliberate “no brand budget on type” (CMO) --- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* --- Shape & space --- */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(20, 32, 40, 0.06);
}

/*
 * Sample usage (illustrative)
 *
 * Primary button (cyan fill + near-black text — bright cyan fails WCAG with white text):
 *   .btn-primary {
 *     background: var(--color-cta-bg);
 *     color: var(--color-cta-text);
 *     border: 1px solid var(--color-cta-border);
 *     border-radius: var(--radius);
 *     padding: 12px 24px;
 *     min-height: 44px;
 *     font-family: var(--font-sans);
 *     font-weight: 600;
 *   }
 *
 * Secondary = ghost (deeper teal outline). Do not add red urgency.
 *
 * Hero H1 (system stack — same as body):
 *   .hero h1 {
 *     font-family: var(--font-display);
 *     font-weight: 650;
 *     color: var(--color-text);
 *   }
 *   // Example: “Oficina com preços claros em Faro”
 */