/* ============================================================
   InfoWest Design System — Colors & Typography
   ============================================================
   The Internet People. St. George, UT — serving Southern &
   Central Utah since 1994.

   Import this file at the top of any InfoWest design:
     <link rel="stylesheet" href="colors_and_type.css">

   Design tokens follow the --iw-* namespace. Semantic aliases
   (--fg-primary, --bg-surface, etc.) provide a layer of intent
   on top of the raw brand palette.
   ============================================================ */

/* ---------- Fonts: self-hosted Lato ---------- */
@font-face {
  font-family: 'Lato';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Lato-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 100;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Lato-ThinItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Lato-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Lato-LightItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Lato-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Lato-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Lato-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Lato-BoldItalic.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('fonts/Lato-Black.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url('fonts/Lato-BlackItalic.ttf') format('truetype');
}

/* ---------- Design tokens ---------- */
:root {
  /* Core brand */
  --iw-amber: #FFC10E;
  --iw-orient: #005187;
  --iw-white: #FFFFFF;
  --iw-black: #010101;

  /* Accent blues */
  --iw-midnight-blue: #003366;
  --iw-mariner: #2A7DE1;

  /* Accent yellows */
  --iw-fuel-yellow: #EDA928;
  --iw-supernova: #FFCC00;

  /* Neutrals */
  --iw-cod-gray: #111111;
  --iw-dove-gray: #666666;
  --iw-silver-chalice: #999999;
  --iw-gray-50:  #F9FAFB;
  --iw-gray-100: #F3F4F6;
  --iw-gray-200: #E5E7EB;
  --iw-gray-300: #D1D5DB;

  /* Semantic status colors (supporting, rarely hero) */
  --iw-success: #16A34A;   /* green-600 — check/done */
  --iw-warning: #EDA928;   /* fuel-yellow */
  --iw-danger:  #C0392B;
  --iw-info:    #2A7DE1;   /* mariner */

  /* Semantic aliases — use these in components */
  --fg-primary:   var(--iw-cod-gray);
  --fg-secondary: var(--iw-dove-gray);
  --fg-muted:     var(--iw-silver-chalice);
  --fg-on-dark:   var(--iw-white);
  --fg-link:      var(--iw-orient);
  --fg-brand:     var(--iw-orient);   /* headings in brand blue */
  --fg-accent:    var(--iw-amber);

  --bg-surface:     var(--iw-white);
  --bg-surface-2:   var(--iw-gray-50);
  --bg-surface-3:   var(--iw-gray-100);
  --bg-brand:       var(--iw-orient);
  --bg-brand-dark:  var(--iw-midnight-blue);
  --bg-accent:      var(--iw-amber);
  --bg-accent-hover:var(--iw-fuel-yellow);

  --border-subtle:  var(--iw-gray-200);
  --border-default: var(--iw-gray-300);
  --border-strong:  var(--iw-silver-chalice);
  --border-accent:  var(--iw-amber);
  --border-brand:   var(--iw-orient);

  /* Typography */
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Weights */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;
  --fw-black:   900;

  /* Type scale — Lato-tuned, mobile-first defaults */
  --fs-caption: 0.75rem;   /* 12px — eyebrows, legal, tags */
  --fs-small:   0.875rem;  /* 14px — meta, nav */
  --fs-body:    1rem;      /* 16px — base body */
  --fs-body-lg: 1.125rem;  /* 18px — lead paragraphs */
  --fs-h6:      1rem;      /* 16px */
  --fs-h5:      1.125rem;  /* 18px */
  --fs-h4:      1.25rem;   /* 20px — small subheads */
  --fs-h3:      1.5rem;    /* 24px — section subheads */
  --fs-h2:      2.25rem;   /* 36px — section titles */
  --fs-h1:      3rem;      /* 48px — page titles */
  --fs-display: 3.75rem;   /* 60px — hero */
  --fs-eyebrow: 0.75rem;   /* 12px uppercase tracked */

  /* Line heights */
  --lh-tight:  1.1;    /* display */
  --lh-snug:   1.25;   /* headings */
  --lh-normal: 1.5;    /* small body */
  --lh-loose:  1.6;    /* body, per brand guidelines */

  /* Letter spacing */
  --ls-tight:    -0.02em;   /* big display */
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.1em;     /* eyebrows, uppercase CTAs */
  --ls-widest:   0.15em;

  /* Radii — homepage uses rounded-xl (12px) and rounded-2xl (16px) heavily */
  --radius-sm: 4px;       /* buttons, pills, inputs */
  --radius-md: 8px;       /* medium cards, small surfaces */
  --radius-lg: 12px;      /* primary cards (rounded-xl) */
  --radius-xl: 16px;      /* hero panels, feature cards (rounded-2xl) */
  --radius-pill: 9999px;  /* full-pill badges, chips */

  /* Spacing — 4px base scale */
  --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;

  /* Shadows — warm, not too dark. Tailwind-matched. */
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Focus ring — brand orient */
  --focus-ring: 0 0 0 2px var(--iw-white), 0 0 0 4px var(--iw-orient);
  --focus-ring-amber: 0 0 0 2px var(--iw-white), 0 0 0 4px var(--iw-amber);

  /* Transitions — brand defaults to 200–300ms ease on color/shadow */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* Container */
  --container-max: 1280px;   /* matches max-w-7xl in prototype */
  --container-px:  32px;

  /* Protection gradient — hero text-on-image overlay */
  --protect-gradient: linear-gradient(to top right, rgba(0,0,0,0.7), rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.2));
}

/* ---------- Base element styles ---------- */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
  background: var(--bg-surface);
}

/* ---------- Semantic typography ---------- */
.iw-display {
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h1, .iw-h1 {
  font-weight: var(--fw-black);       /* 900 — per brand */
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-brand);
}

h2, .iw-h2 {
  font-weight: 800;                   /* Extra Bold per brand */
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-brand);
}

h3, .iw-h3 {
  font-weight: var(--fw-bold);        /* 700 */
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h4, .iw-h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h5, .iw-h5 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

h6, .iw-h6 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h6);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
}

p, .iw-body {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-primary);
}

.iw-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
}

.iw-small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

.iw-caption {
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);   /* per brand */
  color: var(--fg-muted);
}

/* Eyebrow — the uppercase kicker above a section title */
.iw-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-black);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-brand);
}

/* The little "amber rule" that precedes headlines site-wide */
.iw-amber-rule {
  display: block;
  width: 80px;
  height: 4px;
  background: var(--iw-amber);
  border-radius: 2px;
}

/* Code / mono */
code, .iw-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-surface-3);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  color: var(--fg-primary);
}

/* Links */
a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
a:hover {
  color: var(--iw-midnight-blue);
}

/* Selection */
::selection {
  background: var(--iw-amber);
  color: var(--iw-cod-gray);
}

/* Responsive type bumps */
@media (min-width: 768px) {
  :root {
    --fs-h1:      3.5rem;   /* 56px */
    --fs-display: 4.5rem;   /* 72px */
    --fs-h2:      2.5rem;   /* 40px */
  }
}
@media (min-width: 1024px) {
  :root {
    --fs-h1:      4rem;     /* 64px */
    --fs-display: 5rem;     /* 80px */
  }
}