/* Applied Industrials — brand design tokens (CSS custom properties)
 * CONFIRMED against the LIVE site (appliedindustrials.ai — a Lovable/React+shadcn app):
 * the production accent is #F26530 and the app uses shadcn slate neutrals + system-ui
 * fonts. Green is a logo-only accent (from the deck), not used broadly on the live site.
 * This file is the single source of truth for brand color in decks/docs; the LIVE site's
 * own theme lives in its Lovable project.
 */
:root {
  /* ---- Brand core ---- */
  --ai-orange:        #F26530;  /* PRIMARY ACCENT — confirmed from the live site */
  --ai-orange-bright: #FF6A13;  /* high-energy accent / alert callouts */
  --ai-orange-soft:   #FCE3D8;  /* orange tint for backgrounds/badges */
  --ai-green:         #1B4332;  /* logo-only wordmark green (deck) — use sparingly */
  --ai-green-deep:    #123024;  /* darker green for depth */
  --ai-navy:          #0F172A;  /* slate-900 — headings + dark text (shadcn default) */
  --ai-navy-deep:     #0B1220;  /* darkest slate (hero/footer bg) */

  /* ---- Neutrals ---- */
  --ai-ink:      #1A1E24;  /* body text */
  --ai-slate:    #5A6472;  /* secondary text */
  --ai-line:     #E4E8EE;  /* borders/dividers */
  --ai-bg:       #F7F8FA;  /* light section background */
  --ai-white:    #FFFFFF;

  /* ---- Semantic roles (use these in components) ---- */
  --color-accent:        var(--ai-orange);
  --color-accent-strong: var(--ai-orange-bright);
  --color-heading:       var(--ai-navy);
  --color-brand:         var(--ai-green);
  --color-text:          var(--ai-ink);
  --color-text-muted:    var(--ai-slate);
  --color-surface:       var(--ai-white);
  --color-surface-alt:   var(--ai-bg);
  --color-surface-dark:  var(--ai-navy-deep);
  --color-border:        var(--ai-line);

  /* ---- Type ---- */
  --font-heading: "Poppins", "Montserrat", "Inter", system-ui, sans-serif; /* confirm brand font */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Radius / shadow (calm, industrial, confident) ---- */
  --radius:    12px;
  --radius-sm: 8px;
  --shadow:    0 6px 24px rgba(15, 42, 74, 0.08);
}