/* =========================================================================
   FORKLIFT RENTALS DFW -- Design System
   colors_and_type.css

   Foundational tokens: color palette + typography.
   Built by MAD Monkey Media. Brand colors derived from the company logo
   (navy gear / sky-blue forklift / orange ring) and refined into a full
   system for the website rebuild.

   FONTS: Barlow + Barlow Semi Condensed (Google Fonts).
   NOTE: The client has no defined brand typeface. Barlow was selected as the
   nearest match to the bold, condensed logo wordmark + a clean industrial body.
   See README.md "Font substitution" if you want to swap these.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------
     BRAND COLOR -- Navy (primary). Deepest tone is the logo gear.
     --------------------------------------------------------------------- */
  --navy-950: #07182B;   /* logo gear / deepest ink */
  --navy-900: #0F2A47;   /* PRIMARY brand navy -- buttons, headers, headings */
  --navy-800: #18395C;
  --navy-700: #234A72;
  --navy-600: #335F8C;

  /* ---------------------------------------------------------------------
     BRAND COLOR -- Orange (accent / action). From the logo ring.
     --------------------------------------------------------------------- */
  --orange-600: #D8641C;  /* pressed / hover-dark */
  --orange-500: #F2792E;  /* PRIMARY accent -- "Rent Now", highlights */
  --orange-400: #F79152;
  --orange-100: #FDE7D6;  /* tints, badges */

  /* ---------------------------------------------------------------------
     BRAND COLOR -- Sky (secondary). From the logo forklift + banner.
     --------------------------------------------------------------------- */
  --sky-600: #3E9BE0;
  --sky-500: #5FB4F4;
  --sky-400: #6AB9F9;     /* logo forklift blue */
  --sky-200: #C2E2FB;
  --sky-100: #E3F2FD;     /* banner tint / soft fills */

  /* ---------------------------------------------------------------------
     NEUTRALS -- cool gray scale tuned to sit under the navy.
     --------------------------------------------------------------------- */
  --white:    #FFFFFF;
  --gray-50:  #F6F8FA;    /* page section background */
  --gray-100: #EDF1F5;
  --gray-200: #E3E8EE;    /* default border */
  --gray-300: #CBD4DE;
  --gray-400: #94A3B4;
  --gray-500: #64748B;    /* muted text */
  --gray-600: #475569;
  --gray-700: #33425A;    /* body text */
  --gray-900: #0F2A47;    /* = navy-900, strong text */

  /* ---------------------------------------------------------------------
     SEMANTIC -- feedback colors
     --------------------------------------------------------------------- */
  --success: #1F8A4C;
  --success-bg: #E4F4EA;
  --warning: #C9820B;
  --warning-bg: #FBF0D9;
  --danger:  #C8372B;
  --danger-bg: #FBE7E5;
  --info:    var(--sky-600);

  /* ---------------------------------------------------------------------
     SEMANTIC ROLE TOKENS -- prefer these in product code
     --------------------------------------------------------------------- */
  --color-bg:            var(--white);
  --color-bg-subtle:     var(--gray-50);
  --color-surface:       var(--white);
  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);

  --fg-1: var(--navy-900);   /* primary text / headings */
  --fg-2: var(--gray-700);   /* body text */
  --fg-3: var(--gray-500);   /* muted / captions */
  --fg-on-dark:    #FFFFFF;
  --fg-on-dark-2:  #B9C6D6;  /* secondary text on navy */

  --color-primary:        var(--navy-900);
  --color-primary-hover:  var(--navy-800);
  --color-accent:         var(--orange-500);
  --color-accent-hover:   var(--orange-600);
  --color-link:           var(--sky-600);
  --focus-ring:           0 0 0 3px rgba(95, 180, 244, 0.45);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY -- families
     Display/headings: Barlow Semi Condensed (echoes the condensed wordmark)
     Body/UI:          Barlow
     --------------------------------------------------------------------- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Type scale (1.250 major-third-ish, tuned) */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;   /* uppercase labels / wordmark feel */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ---------------------------------------------------------------------
     RADIUS . SHADOW . SPACING
     --------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default card / input radius */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 42, 71, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 42, 71, 0.08), 0 1px 2px rgba(15, 42, 71, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 42, 71, 0.10);
  --shadow-lg: 0 12px 28px rgba(15, 42, 71, 0.14);
  --shadow-focus: var(--focus-ring);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max: 1240px;
  --transition-fast: 120ms ease;
  --transition: 180ms ease;
}

/* =========================================================================
   SEMANTIC TYPE CLASSES -- apply directly or use as a reference for product CSS
   ========================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

/* Eyebrow / section kicker -- small uppercase label, an industrial signature */
.eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--orange-500);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.label {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  color: var(--fg-1);
}

/* Prices / numeric -- tabular figures, condensed for the catalog feel */
.price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--navy-900);
  letter-spacing: var(--tracking-normal);
}

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}