/* ============================================================
   Zeejay Lab — Colors & Type
   Editorial portfolio palette, Inter-based with mono headings
   Source: prs_landing_page-main/client/src/index.css + index.html
   ============================================================ */

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

:root {
  /* ---------- Fonts ---------- */
  --font-sans: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- Brand core ---------- */
  --brand-primary:      #163b6b;  /* Deep editorial navy — buttons, headings, brand */
  --brand-primary-fg:   #ffffff;
  --brand-tomato:       #e8342a;  /* Logo tomato body */
  --brand-tomato-light: #f06a60;  /* Logo tomato highlight */
  --brand-stem:         #3a8c3a;  /* Tomato stem & leaves */

  /* ---------- Surface / neutrals ---------- */
  --bg:            #fbfcfe;        /* Page background, subtle blue-white */
  --bg-muted:      #f5f7fb;        /* Diagonal split section half */
  --surface:       #ffffff;        /* Cards, inputs, navbar */
  --surface-muted: #eef2f7;        /* Muted blocks */
  --surface-tint:  #f8f5f0;        /* Warm product-card background */
  --border:        #e5eaf1;        /* Hairline card border */
  --border-warm:   #e2dbd0;        /* Warm border used on product cards */

  /* ---------- Foreground / text ---------- */
  --fg-1:  #1f2937;   /* Primary text */
  --fg-2:  #374151;   /* Secondary text (secondary-fg) */
  --fg-3:  #64748b;   /* Body copy muted (slate-500) */
  --fg-4:  #94a3b8;   /* Kickers / captions (slate-400) */
  --fg-5:  #d1ccc5;   /* Empty-state / disabled stars */

  /* ---------- Feedback ---------- */
  --success: #22c55e;
  --warning: #eab308;
  --danger:  #dc2626;
  --info:    #0ea5e9;

  /* ---------- HMIT priority scale (PRS 3.0) ---------- */
  --hmit-1: #e63946;  /* Critical (red) */
  --hmit-2: #f59e0b;  /* High (amber) */
  --hmit-3: #84cc16;  /* Medium (lime) */
  --hmit-4: #0ea5e9;  /* Lower (sky) */
  --hmit-5: #9ca3af;  /* Optional (gray) */

  /* Chart palette (mirrors HMIT) */
  --chart-1: #e63946;
  --chart-2: #f59e0b;
  --chart-3: #84cc16;
  --chart-4: #0ea5e9;
  --chart-5: #9ca3af;

  /* ---------- Radii ---------- */
  --radius-xs:    0.25rem;  /*  4px — pill micro */
  --radius-sm:    0.375rem; /*  6px — inputs */
  --radius-md:    0.5rem;   /*  8px — chips */
  --radius-lg:    0.65rem;  /* 10.4px — base --radius */
  --radius-xl:    1rem;     /* 16px */
  --radius-2xl:   1.25rem;  /* 20px — image panels */
  --radius-3xl:   1.5rem;   /* 24px — folio-card */
  --radius-pill:  9999px;   /* full pill */

  /* ---------- Elevation ---------- */
  --shadow-hairline: 0 1px 0 rgba(15, 23, 42, 0.02);   /* folio-card */
  --shadow-xs:       0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:       0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md:       0 8px 24px rgba(15, 23, 42, 0.07);
  --shadow-lg:       0 8px 32px rgba(22, 59, 107, 0.18); /* flip-card lift */

  /* ---------- Spacing scale (Tailwind-aligned) ---------- */
  --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;

  /* ---------- Signature backgrounds ---------- */
  --bg-split:  linear-gradient(135deg, #ffffff 0%, #ffffff 46%, #f5f7fb 46%, #f5f7fb 100%);
  --bg-radial: radial-gradient(circle at top right, rgba(22, 59, 107, 0.08), transparent 58%);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   200ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
}

/* ============================================================
   Semantic type styles
   Vibe: crisp editorial. Heads use tight negative tracking
   (-0.04em → -0.06em) at display sizes. Body copy sits at
   slate-500 with ~1.8 leading for a calm reading rhythm.
   ============================================================ */

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  font-feature-settings: "ss01" 1, "cv10" 1;
  -webkit-font-smoothing: antialiased;
}

.kicker {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fg-4);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.display-xl {
  font-family: var(--font-sans);
  font-size: 4.5rem;            /* 72px */
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.06em;
  color: var(--brand-primary);
}

.display-lg {
  font-size: 3.75rem;           /* 60px */
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.06em;
  color: var(--brand-primary);
}

.h1 {
  font-size: 3rem;              /* 48px */
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--brand-primary);
}

.h2 {
  font-size: 1.875rem;          /* 30px */
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--brand-primary);
}

.h3 {
  font-size: 1.25rem;           /* 20px */
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--brand-primary);
}

.h4 {
  font-size: 1.125rem;          /* 18px */
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--brand-primary);
}

.body-lg {
  font-size: 1.125rem;          /* 18px */
  line-height: 2;
  color: var(--fg-3);
}

.body {
  font-size: 1rem;              /* 16px */
  line-height: 1.75;
  color: var(--fg-3);
}

.body-sm {
  font-size: 0.875rem;          /* 14px */
  line-height: 1.6;
  color: var(--fg-3);
}

.caps {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--fg-4);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

/* ============================================================
   Responsive Utilities & Overrides
   ============================================================ */
@media (max-width: 800px) {
  [style*="display: grid"], 
  [style*="display:grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  
  [style*="grid-template-columns: auto 84px 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  [style*="padding: 0 32px"] { padding: 0 20px !important; }
  [style*="padding: 64px 0"] { padding: 40px 0 !important; }
  [style*="padding: 56px 0"] { padding: 32px 0 !important; }
  [style*="padding: 40px 0"] { padding: 32px 0 !important; }

  h1, h2, 
  [style*="fontSize: 72"], [style*="fontSize: 64"], [style*="fontSize: 56"] {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  [style*="fontSize: 44"] {
    font-size: 2rem !important;
  }

  footer div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  footer nav[style*="display: flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  [style*="aspectRatio: 1"], [style*="aspect-ratio: 1"] {
    max-width: 200px;
    margin: 0 auto;
  }

  /* Target FlipCard inner wrapper */
  [style*="width: 380"] {
    width: 100% !important;
    max-height: 380px !important;
  }
}