/*
Theme Name: PasswordsKit
Theme URI: https://passwordskit.com/
Author: PasswordsKit Team
Author URI: https://passwordskit.com/about-us
Description: Privacy-first, modern and blazing-fast WordPress theme for PasswordsKit with a bespoke static landing page and rich Gutenberg blog patterns.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
Text Domain: passwordskit
*/

/* --- Design Tokens & Variables --- */
:root {
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8FAFC;
  --color-border: #E2E8F0;
  --color-ink: #0F172A;
  --color-ink-secondary: #334155;
  --color-muted: #64748B;
  --color-accent: #2563EB;
  --color-accent-hover: #1D4ED8;
  --color-subtle: #DBEAFE;
  --color-subtle-border: #BFDBFE;

  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
  --shadow-card: 0 4px 20px -2px rgba(15, 23, 42, 0.06);
  --shadow-mockup: 0 14px 34px -4px rgba(37, 99, 235, 0.12), 0 8px 18px -4px rgba(15, 23, 42, 0.18);

  --container-max: 1140px;
  --container-narrow: 760px;
}

/* --- Base & Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  font-family: var(--font-main);
  background-color: var(--color-bg);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover {
  color: var(--color-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

p {
  margin-bottom: 1.25rem;
  color: var(--color-ink-secondary);
}

/* --- Layout Containers --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.main-content {
  flex: 1 0 auto;
}