/* ============================================================
   POW LEE CRANE — Colors & Typography
   Final foundation CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* Brand-supplied Montserrat Italic (variable axis 100–900) */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     BRAND COLORS
     ------------------------------------------------------------ */
  --color-navy:            #0B1F3A; /* Primary Navy */
  --color-navy-800:        #132849; /* Elevated navy */
  --color-navy-700:        #1C3560;
  --color-navy-600:        #26457A;

  --color-yellow:          #FFC107; /* Primary Industrial Yellow */
  --color-yellow-600:      #E6AE00; /* Hover */
  --color-yellow-700:      #C79700; /* Press */

  /* ------------------------------------------------------------
     NEUTRALS
     ------------------------------------------------------------ */
  --color-white:           #FFFFFF;
  --color-grey-50:         #F9FAFB;
  --color-grey-100:        #F3F4F6;
  --color-grey-200:        #E5E7EB;
  --color-grey-300:        #D1D5DB;
  --color-grey-400:        #9CA3AF;
  --color-grey-500:        #6B7280;
  --color-grey-600:        #4B5563;
  --color-grey-700:        #374151;
  --color-grey-800:        #1F2937;
  --color-grey-900:        #111827;
  --color-black:           #000000;

  /* ------------------------------------------------------------
     STATUS / SEMANTIC COLORS
     ------------------------------------------------------------ */
  --color-success:         #22C55E;
  --color-warning:         #F59E0B;
  --color-danger:          #EF4444;
  --color-info:            #3B82F6;

  /* ------------------------------------------------------------
     SEMANTIC BACKGROUNDS
     ------------------------------------------------------------ */
  --bg-page:               var(--color-white);
  --bg-surface:            var(--color-white);
  --bg-subtle:             var(--color-grey-100);
  --bg-inverse:            var(--color-navy);
  --bg-inverse-subtle:     var(--color-navy-800);

  /* ------------------------------------------------------------
     SEMANTIC FOREGROUNDS
     ------------------------------------------------------------ */
  --fg-primary:            var(--color-navy);
  --fg-secondary:          var(--color-grey-700);
  --fg-muted:              var(--color-grey-500);
  --fg-on-inverse:         var(--color-white);
  --fg-on-yellow:          var(--color-navy);

  /* ------------------------------------------------------------
     BORDERS
     ------------------------------------------------------------ */
  --border-default:        var(--color-grey-200);
  --border-strong:         var(--color-grey-300);
  --border-inverse:        var(--color-navy-700);

  /* ------------------------------------------------------------
     ACCENT / CTA
     ------------------------------------------------------------ */
  --accent:                var(--color-yellow);
  --accent-hover:          var(--color-yellow-600);
  --accent-press:          var(--color-yellow-700);

  /* ------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------ */
  --font-display:          'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:             'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-mono:             ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --text-xs:               12px;
  --text-sm:               14px;
  --text-base:             16px;
  --text-lg:               18px;
  --text-xl:               20px;
  --text-2xl:              24px; /* H3 */
  --text-3xl:              28px;
  --text-4xl:              32px; /* H2 */
  --text-5xl:              40px;
  --text-6xl:              48px; /* H1 */
  --text-7xl:              64px;

  --lh-tight:              1.1;
  --lh-snug:               1.25;
  --lh-normal:             1.5;
  --lh-relaxed:            1.65;

  --fw-regular:            400;
  --fw-medium:             500;
  --fw-semibold:           600;
  --fw-bold:               700;
  --fw-extrabold:          800;

  --tracking-tight:        -0.02em;
  --tracking-normal:       0;
  --tracking-wide:         0.04em;
  --tracking-wider:        0.08em;
  --tracking-widest:       0.14em;

  /* ------------------------------------------------------------
     SPACING
     ------------------------------------------------------------ */
  --space-1:               4px;
  --space-2:               8px;
  --space-3:               12px;
  --space-4:               16px;
  --space-5:               24px;
  --space-6:               32px;
  --space-7:               48px;
  --space-8:               64px;
  --space-9:               96px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */
  --radius-none:           0;
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-pill:           999px;

  /* ------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------ */
  --shadow-sm:             0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-md:             0 4px 12px rgba(11, 31, 58, 0.08);
  --shadow-lg:             0 12px 32px rgba(11, 31, 58, 0.12);
  --shadow-xl:             0 24px 48px rgba(11, 31, 58, 0.18);
  --shadow-inset:          inset 0 0 0 1px rgba(11, 31, 58, 0.08);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */
  --ease-out:              cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:           cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:         120ms;
  --duration-base:         200ms;
  --duration-slow:         320ms;

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --container-max:         1200px;
  --gutter:                24px;

  /* ------------------------------------------------------------
     COMPONENT FOUNDATIONS
     ------------------------------------------------------------ */
  --button-height:         44px;
  --input-height:          44px;
  --card-padding:          24px;
  --section-space-y:       64px;
  --header-height:         80px;
}

/* ============================================================
   BASE
   ============================================================ */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg-primary);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-6xl);
  font-weight: var(--fw-extrabold);
}

h2 {
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

p {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

small,
.text-small {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

.text-muted {
  color: var(--fg-muted);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-yellow-700);
}

.eyebrow--on-dark {
  color: var(--color-yellow);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ============================================================
   LINKS / FOCUS
   ============================================================ */

a {
  color: var(--color-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-navy-700);
}

*:focus-visible {
  outline: 2px solid var(--color-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.container {
  width: min(100% - (var(--gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-space-y);
}

.surface {
  background: var(--bg-surface);
}

.surface-subtle {
  background: var(--bg-subtle);
}

.surface-inverse {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}

/* ============================================================
   RESPONSIVE TYPE
   ============================================================ */

@media (max-width: 768px) {
  :root {
    --section-space-y: 48px;
    --header-height: 72px;
    --card-padding: 20px;
    --gutter: 16px;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }
}