/* ==========================================================================
   InfoWest Design System — Colors & Typography Tokens
   ==========================================================================
   "The Internet People" — a regional fiber & wireless ISP in St. George, Utah.
   Ported from the InfoWest Design System (colors_and_type.css). Fonts are
   self-hosted (woff2) under usersystem/static/usersystem/fonts/.
   ========================================================================== */

/* --- Typography: Lato is the single brand typeface (self-hosted) -------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lato-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Lato-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Lato-Black.woff2') format('woff2');
}

/* Material Symbols Outlined — self-hosted subset (brand icon set) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
}

:root {
  /* -----------------------------------------------------------------------
     COLOR TOKENS (raw palette — named per brand guidelines)
     ----------------------------------------------------------------------- */

  /* Core brand */
  --iw-amber:          #FFC10E;  /* Primary brand yellow/gold */
  --iw-orient:         #005187;  /* Primary brand blue */
  --iw-white:          #FFFFFF;
  --iw-black:          #010101;

  /* Accents */
  --iw-midnight-blue:  #003366;  /* Darker blue accent */
  --iw-mariner:        #2A7DE1;  /* Lighter blue accent */
  --iw-fuel-yellow:    #EDA928;  /* Darker gold accent (hover state) */
  --iw-supernova:      #FFCC00;  /* Brighter yellow accent */

  /* Neutrals */
  --iw-cod-gray:       #111111;  /* Near-black body text */
  --iw-dove-gray:      #666666;  /* Secondary text */
  --iw-silver-chalice: #999999;  /* Borders, muted text */

  /* Tints (derived, used throughout site) */
  --iw-amber-10:       rgba(255, 193, 14, 0.10);
  --iw-amber-20:       rgba(255, 193, 14, 0.20);
  --iw-orient-5:       rgba(0, 81, 135, 0.05);
  --iw-orient-10:      rgba(0, 81, 135, 0.10);
  --iw-orient-95:      rgba(0, 81, 135, 0.95);
  --iw-black-40:       rgba(0, 0, 0, 0.40);
  --iw-black-70:       rgba(0, 0, 0, 0.70);
  --iw-white-70:       rgba(255, 255, 255, 0.70);
  --iw-white-80:       rgba(255, 255, 255, 0.80);

  /* Backgrounds / surfaces */
  --iw-bg:             var(--iw-white);
  --iw-surface:        var(--iw-white);
  --iw-surface-muted:  #F9FAFB;          /* bg-gray-50 in the prototype */
  --iw-surface-dark:   var(--iw-orient);

  /* Semantic — text */
  --iw-fg-1:           var(--iw-cod-gray);  /* Primary text */
  --iw-fg-2:           var(--iw-dove-gray); /* Secondary text */
  --iw-fg-3:           var(--iw-silver-chalice); /* Tertiary / disclaimers */
  --iw-fg-on-dark:     var(--iw-white);
  --iw-fg-on-amber:    var(--iw-cod-gray); /* WCAG: dark text on gold */

  /* Semantic — ink / borders */
  --iw-border:         #E5E7EB;          /* gray-200, used on cards */
  --iw-border-strong:  var(--iw-silver-chalice);
  --iw-divider:        #F3F4F6;          /* gray-100 */

  /* Semantic — actions */
  --iw-action-primary:        var(--iw-amber);    /* Amber = primary CTA */
  --iw-action-primary-hover:  var(--iw-fuel-yellow);
  --iw-action-primary-fg:     var(--iw-cod-gray);
  --iw-action-secondary:      var(--iw-orient);   /* Orient = secondary CTA */
  --iw-action-secondary-hover:var(--iw-midnight-blue);
  --iw-action-secondary-fg:   var(--iw-white);
  --iw-link:                  var(--iw-orient);
  --iw-link-hover:            var(--iw-mariner);
  --iw-focus-ring:            var(--iw-orient);

  /* Semantic — status */
  --iw-success:        #16A34A;
  --iw-warning:        var(--iw-fuel-yellow);
  --iw-error:          #DC2626;
  --iw-info:           var(--iw-mariner);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     ----------------------------------------------------------------------- */

  --iw-font-sans:      "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --iw-font-icons:     "Material Symbols Outlined";

  /* Weights — self-hosted Lato: 400 / 700 / 900 */
  --iw-fw-regular:     400;
  --iw-fw-bold:        700;
  --iw-fw-black:       900;

  /* Type scale (rem assumes 16px root) */
  --iw-text-xs:        0.75rem;    /* 12px — eyebrows, disclaimers */
  --iw-text-sm:        0.875rem;   /* 14px — supporting copy */
  --iw-text-base:      1rem;       /* 16px — body */
  --iw-text-lg:        1.125rem;   /* 18px — lead copy */
  --iw-text-xl:        1.25rem;    /* 20px — small H3 */
  --iw-text-2xl:       1.5rem;     /* 24px — H3 / section subhead */
  --iw-text-3xl:       1.875rem;   /* 30px — H2 (mobile) */
  --iw-text-4xl:       2.25rem;    /* 36px — H2 (desktop) */
  --iw-text-5xl:       3rem;       /* 48px — H1 */
  --iw-text-6xl:       3.75rem;    /* 60px — Hero H1 */

  --iw-leading-tight:  1.1;
  --iw-leading-snug:   1.25;
  --iw-leading-normal: 1.5;
  --iw-leading-relaxed:1.65;

  /* Tracking — brand loves tight headlines + uppercase widely-spaced eyebrows */
  --iw-tracking-tight:   -0.02em;
  --iw-tracking-normal:  0;
  --iw-tracking-wide:    0.05em;
  --iw-tracking-wider:   0.1em;
  --iw-tracking-widest:  0.15em;

  /* -----------------------------------------------------------------------
     SPACING / RADIUS / SHADOW / MOTION
     ----------------------------------------------------------------------- */

  /* Spacing (Tailwind-like, used throughout the prototype) */
  --iw-space-1:  0.25rem;
  --iw-space-2:  0.5rem;
  --iw-space-3:  0.75rem;
  --iw-space-4:  1rem;
  --iw-space-5:  1.25rem;
  --iw-space-6:  1.5rem;
  --iw-space-8:  2rem;
  --iw-space-10: 2.5rem;
  --iw-space-12: 3rem;
  --iw-space-16: 4rem;
  --iw-space-20: 5rem;
  --iw-space-24: 6rem;

  /* Radii — site uses rounded rects; never pill, rarely square */
  --iw-radius-sm:   0.25rem;   /* 4px — buttons, inputs */
  --iw-radius-md:   0.5rem;    /* 8px — nav capsule, tags */
  --iw-radius-lg:   0.75rem;   /* 12px — cards */
  --iw-radius-xl:   1rem;      /* 16px — hero panel */
  --iw-radius-2xl:  1rem;      /* 16px — package cards, shell containers */
  --iw-radius-full: 9999px;    /* pill badges, numeric step circles */

  /* Shadow system — site uses soft shadows on cards, dramatic shadow on shell */
  --iw-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --iw-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
  --iw-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --iw-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --iw-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --iw-shadow-sticky-up: 0 -4px 20px rgba(0,0,0,0.15); /* mobile footer */

  /* Layout */
  --iw-container:   80rem;     /* max-w-7xl */
  --iw-container-prose: 48rem; /* max-w-3xl */

  /* Motion */
  --iw-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --iw-dur-fast:   150ms;
  --iw-dur-base:   200ms;
  --iw-dur-slow:   300ms;
}

/* ==========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Drop this file in and heading/body/link styles match brand automatically.
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--iw-bg);
  color: var(--iw-fg-1);
  font-family: var(--iw-font-sans);
  font-weight: var(--iw-fw-regular);
  font-size: var(--iw-text-base);
  line-height: var(--iw-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — Lato Black, tight tracking, Orient by default */
h1, .iw-h1 {
  font-family: var(--iw-font-sans);
  font-weight: var(--iw-fw-black);
  font-size: clamp(var(--iw-text-4xl), 4.5vw, var(--iw-text-6xl));
  line-height: var(--iw-leading-tight);
  letter-spacing: var(--iw-tracking-tight);
  color: var(--iw-orient);
  margin: 0 0 var(--iw-space-4);
}

h2, .iw-h2 {
  font-weight: var(--iw-fw-black);
  font-size: clamp(var(--iw-text-3xl), 3.5vw, var(--iw-text-4xl));
  line-height: var(--iw-leading-tight);
  letter-spacing: var(--iw-tracking-tight);
  color: var(--iw-orient);
  margin: 0 0 var(--iw-space-4);
}

h3, .iw-h3 {
  font-weight: var(--iw-fw-black);
  font-size: var(--iw-text-xl);
  line-height: var(--iw-leading-snug);
  color: var(--iw-orient);
  margin: 0 0 var(--iw-space-2);
}

h4, .iw-h4 {
  font-weight: var(--iw-fw-bold);
  font-size: var(--iw-text-lg);
  line-height: var(--iw-leading-snug);
  color: var(--iw-cod-gray);
  margin: 0 0 var(--iw-space-2);
}

/* Eyebrow — all caps, wider tracking, small, Orient or Amber */
.iw-eyebrow {
  display: inline-block;
  font-size: var(--iw-text-xs);
  font-weight: var(--iw-fw-black);
  text-transform: uppercase;
  letter-spacing: var(--iw-tracking-widest);
  color: var(--iw-orient);
}
.iw-eyebrow--amber { color: var(--iw-amber); }

/* Body */
p, .iw-body {
  font-size: var(--iw-text-base);
  line-height: var(--iw-leading-relaxed);
  color: var(--iw-fg-1);
  margin: 0 0 var(--iw-space-4);
}

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

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

.iw-caption {
  font-size: var(--iw-text-xs);
  color: var(--iw-fg-3);
}

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

strong, b { font-weight: var(--iw-fw-bold); }

/* Focus ring — consistent 2px offset blue ring (the site's a11y convention) */
:focus-visible {
  outline: 2px solid var(--iw-focus-ring);
  outline-offset: 2px;
  border-radius: var(--iw-radius-sm);
}

/* The signature Amber accent rule used above every section title */
.iw-accent-rule {
  display: block;
  height: 4px;
  width: 80px;
  background: var(--iw-amber);
  margin: 0 0 var(--iw-space-4);
  border-radius: 2px;
}

/* Brand icon helper */
.material-symbols-outlined {
  font-family: var(--iw-font-icons);
  font-weight: normal;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ==========================================================================
   SHARED BRAND COMPONENTS — buttons (used across app + auth pages)
   ========================================================================== */
.iw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--iw-space-2);
  font-family: var(--iw-font-sans);
  font-weight: var(--iw-fw-bold);
  font-size: var(--iw-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--iw-tracking-wide);
  padding: var(--iw-space-3) var(--iw-space-6);
  border: none;
  border-radius: var(--iw-radius-sm);
  cursor: pointer;
  transition: background-color var(--iw-dur-base) var(--iw-ease),
              color var(--iw-dur-base) var(--iw-ease);
}
.iw-btn--primary {
  background: var(--iw-action-primary);
  color: var(--iw-action-primary-fg);
}
.iw-btn--primary:hover,
.iw-btn--primary:active { background: var(--iw-action-primary-hover); }

.iw-btn--secondary {
  background: var(--iw-action-secondary);
  color: var(--iw-action-secondary-fg);
}
.iw-btn--secondary:hover,
.iw-btn--secondary:active { background: var(--iw-action-secondary-hover); color: var(--iw-white); }