/**
 * trust-blue — DRAFT pending Ricardo validation
 * Oficina default candidate: white + deep trust blue + signal yellow accent
 * CMO 2026-09-05: display = IBM Plex Sans (drop serif); yellow = chips only.
 * Do NOT treat as locked product default until APPROVED.
 */

:root {
  /* --- Surfaces (white-anchored) --- */
  --color-bg: #ffffff;
  --color-surface: #f4f7fb;      /* cool light panel — not beige */
  --color-surface-2: #e8eef6;   /* optional alt strip */

  /* --- Text --- */
  --color-text: #142033;        /* near-navy charcoal */
  --color-muted: #5a6b7d;       /* WCAG-minded muted on white */

  /* --- Brand --- */
  --color-primary: #0b3d8c;     /* deep trust blue — primary CTA */
  --color-primary-hover: #082e6a;
  --color-accent: #f0c01a;      /* signal yellow — badges / chips only; NOT Ligar; NOT body text on white */

  /* --- UI chrome --- */
  --color-border: #d5dee9;
  --color-focus: #2a6bb5;       /* mid blue focus — yellow is poor for focus rings */

  /* --- Contrast helpers (CRO 2026-09-06) --- */
  --color-on-light: #142033;
  --color-on-light-muted: #5a6b7d;
  --color-ink-on-light: var(--color-primary); /* deep blue — not yellow accent on white */
  --color-dark-band: var(--color-primary);
  --color-on-dark: #f3f4f5;
  --color-on-dark-accent: #f0c01a; /* signal yellow on deep blue — large/link OK */

  /* --- CTA (primary button = trust blue) --- */
  --color-cta-bg: var(--color-primary);
  --color-cta-text: #ffffff;
  --color-cta-bg-hover: var(--color-primary-hover);
  --color-cta-border: var(--color-primary);

  /* --- Accent CTA / badge (yellow + dark text — chips only, not rival hero) --- */
  --color-cta-accent-bg: var(--color-accent);
  --color-cta-accent-text: #142033;
  --color-cta-accent-border: #d4a80f;

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

  /* --- Typography (latin-ext friendly; verify PT glyphs) --- */
  /* CMO: display = same IBM Plex Sans stack (drop serif) */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* --- Shape & space (calm workshop — not soft-card farm) --- */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;         /* use sparingly (chips), not every card */

  --space-1: 0.25rem;           /* 4px */
  --space-2: 0.5rem;            /* 8px */
  --space-3: 0.75rem;           /* 12px */
  --space-4: 1rem;              /* 16px */
  --space-5: 1.5rem;            /* 24px */
  --space-6: 2rem;              /* 32px */
  --space-7: 3rem;              /* 48px */
  --space-8: 4rem;              /* 64px */

  --shadow-none: none;
  --shadow-soft: 0 1px 2px rgba(20, 32, 51, 0.06); /* optional; prefer borders */
}

/*
 * Sample usage (illustrative — not a full component library)
 *
 * Primary button (ONE filled primary — Ligar):
 *   .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;
 *   }
 *   .btn-primary:hover {
 *     background: var(--color-cta-bg-hover);
 *   }
 *
 * Secondary = ghost only (Pedir orçamento):
 *   .btn-secondary {
 *     background: var(--color-cta-secondary-bg);
 *     color: var(--color-cta-secondary-text);
 *     border: 1px solid var(--color-cta-secondary-border);
 *   }
 *
 * Yellow badge / chip only (accent ≠ rival hero — do NOT promote yellow to Ligar):
 *   .badge-signal {
 *     background: var(--color-cta-accent-bg);
 *     color: var(--color-cta-accent-text);
 *     border-radius: var(--radius-sm);
 *     padding: var(--space-1) var(--space-3);
 *     font-family: var(--font-sans);
 *     font-weight: 700;
 *     font-size: 0.875rem;
 *   }
 *
 * Hero H1 (sans, weight 700; optional letter-spacing -0.02em):
 *   .hero h1 {
 *     font-family: var(--font-display);
 *     font-weight: 700;
 *     color: var(--color-text);
 *     letter-spacing: -0.02em;   // optional
 *     line-height: 1.2;
 *     margin: 0 0 var(--space-4);
 *   }
 *   // Example copy (impersonal / 3rd person per §14):
 *   // “Oficina de mecânica em Braga”
 */