/* ============================================
   Philips Smart Locks — Optimized Landing Pages
   Brand: Navy + Teal, Inter typography
   Mode: Free-explore (no Design Library)
   ============================================ */

/* ---- Color Scales ---- */
:root {
  /* Primary: Teal (brand accent / CTA) */
  --philips-primary-50: #ecfdf8;
  --philips-primary-100: #d1faec;
  --philips-primary-200: #a5f3da;
  --philips-primary-300: #6eebc6;
  --philips-primary-400: #34e0b8;
  --philips-primary-500: #2bd9bb;
  --philips-primary-600: #15b89c;
  --philips-primary-700: #0e927d;
  --philips-primary-800: #0c7564;
  --philips-primary-900: #0a5e51;
  --philips-primary-950: #043f37;

  /* Neutral: Navy-derived */
  --philips-neutral-50: #f6f7f8;
  --philips-neutral-100: #eceef0;
  --philips-neutral-200: #dfe4e3;
  --philips-neutral-300: #c4ccce;
  --philips-neutral-400: #82939d;
  --philips-neutral-500: #63717c;
  --philips-neutral-600: #4e5a64;
  --philips-neutral-700: #2a3a48;
  --philips-neutral-800: #12202c;
  --philips-neutral-900: #0d2233;
  --philips-neutral-950: #071c2c;

  /* Semantic state colors */
  --state-success: #2bd9bb;
  --state-warning: #ffb35c;
  --state-error: #ef4444;
  --state-info: #3b82f6;
}

/* ---- Semantic Aliases (light mode) ---- */
:root {
  --philips-background: #fbfaf7;
  --philips-foreground: #12202c;
  --philips-card: #ffffff;
  --philips-card-foreground: #12202c;
  --philips-popover: #ffffff;
  --philips-popover-foreground: #12202c;
  --philips-primary: #2bd9bb;
  --philips-primary-foreground: #071c2c;
  --philips-muted: #f5f1e9;
  --philips-muted-foreground: #63717c;
  --philips-border: #dfe4e3;
  --philips-input: #dfe4e3;
  --philips-ring: #2bd9bb;

  /* Surface extras */
  --philips-cream: #f5f1e9;
  --philips-navy: #071c2c;
  --philips-navy-deep: #04131f;
  --philips-ink: #12202c;
  --philips-teal-dark: #0c8f7d;

  /* Radius */
  --philips-radius-small: 4px;
  --philips-radius-medium: 8px;
  --philips-radius-large: 16px;
  --philips-radius-full: 9999px;

  /* Shadows — static surfaces ≤ 0.05 alpha */
  --philips-shadow-sm: 0 1px 3px rgba(7,28,44,.04);
  --philips-shadow-md: 0 4px 12px rgba(7,28,44,.05);
  /* Floating layers may use deeper elevation */
  --philips-shadow-lg: 0 28px 80px rgba(7,28,44,.16);
}

/* ---- Semantic Aliases (dark mode) ---- */
.dark {
  --philips-background: #071c2c;
  --philips-foreground: #f6f7f8;
  --philips-card: #0d2233;
  --philips-card-foreground: #f6f7f8;
  --philips-popover: #0d2233;
  --philips-popover-foreground: #f6f7f8;
  --philips-primary: #2bd9bb;
  --philips-primary-foreground: #071c2c;
  --philips-muted: #12202c;
  --philips-muted-foreground: #82939d;
  --philips-border: #1a2a38;
  --philips-input: #1a2a38;
  --philips-ring: #2bd9bb;
}

/* ---- Typography ---- */
:root {
  --philips-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --philips-font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

/* Typography classes */
.philips-h1 {
  font-family: var(--philips-font-sans);
  font-weight: 850;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.philips-h2 {
  font-family: var(--philips-font-sans);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.philips-h3 {
  font-family: var(--philips-font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.philips-body {
  font-family: var(--philips-font-sans);
  font-weight: 400;
  line-height: 1.6;
}
.philips-small {
  font-family: var(--philips-font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.philips-eyebrow {
  font-family: var(--philips-font-sans);
  font-weight: 850;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}