/* PyCap design system — "Classic Luxury".
 *
 * The :root and [data-theme="dark"] token blocks below are the owner's system, verbatim.
 * They are the source of truth: change them there or not at all. Everything after the
 * EXTENSIONS marker is additive and kept inside the system's own philosophy —
 * restraint, no pure black/white, no saturated colour, motion felt rather than seen.
 */

/* ---------------------------------------------------------------- tokens — verbatim */

:root {
  /* Colors: Light Mode (Classic Luxury) */
  --color-bg-primary: #F9F8F6; /* Warm Alabaster */
  --color-bg-secondary: #FFFFFF;
  --color-text-primary: #1A1A1A; /* Charcoal */
  --color-text-secondary: #7E7A74; /* Warm Gray */
  --color-accent: #C5A880; /* Champagne Gold */
  --color-border: #E8E5E0; /* Soft Cream-Gray */

  /* Typography */
  --font-family-display: "Cormorant Garamond", serif;
  --font-family-body: "Inter", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --letter-spacing-uppercase: 0.1em;
  --line-height-display: 1.15;
  --line-height-body: 1.7;

  /* Spacing & Layout */
  --spacing-section-padding: 8rem;
  --spacing-container-max-width: 1200px;
  --spacing-gap-lg: 3rem;
  --spacing-gap-sm: 1rem;

  /* Motion */
  --transition-duration: 0.35s;
  --transition-timing: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Colors: Dark Mode Override (Obsidian & Soft Sand) */
[data-theme="dark"], .dark-mode {
  --color-bg-primary: #121212;
  --color-bg-secondary: #1A1A1A;
  --color-text-primary: #F4F3EF;
  --color-text-secondary: #9B9893;
  --color-accent: #E0C8A8;
  --color-border: #2A2927;
}

/* ------------------------------------------------------------------- EXTENSIONS */

/* The OS preference selects dark when no explicit choice was made. The system's own
 * [data-theme] hook (above) stays the stronger signal, so a future toggle wins over the OS
 * in both directions — data-theme="light" pins light even for a dark-mode OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #121212;
    --color-bg-secondary: #1A1A1A;
    --color-text-primary: #F4F3EF;
    --color-text-secondary: #9B9893;
    --color-accent: #E0C8A8;
    --color-border: #2A2927;
  }
}

:root {
  /* Keys, code, odds and quotas are most of what this site displays; the luxury system
   * names only display and body faces. System mono, no third face to load. */
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Status, desaturated per the system's own rule against saturated colour. Oxblood for
   * errors, moss for confirmations — never traffic-light red/green. */
  --color-error: #8A4B3C;
  --color-success: #5F6F52;

  /* One derived surface: the accent at low alpha, for gold-tinted wash backgrounds
   * (badges, reveal panel) without introducing a new hue. */
  --color-accent-wash: rgba(197, 168, 128, 0.12);
}

[data-theme="dark"], .dark-mode {
  --color-error: #B07A6A;
  --color-success: #8B9B7E;
  --color-accent-wash: rgba(224, 200, 168, 0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-error: #B07A6A;
    --color-success: #8B9B7E;
    --color-accent-wash: rgba(224, 200, 168, 0.10);
  }
}

/* Self-hosted variable fonts — the site makes zero third-party requests, and a Google
 * Fonts call would be its first. One file per family covers every weight used. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

/* --------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light dark; }
[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}

h1, h2, h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-display);
  margin: 0 0 var(--spacing-gap-sm);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.25rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-size: 1.35rem; font-weight: var(--font-weight-medium); }

p { margin: 0 0 var(--spacing-gap-sm); }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em;
  transition: color var(--transition-duration) var(--transition-timing);
}
a:hover { color: var(--color-accent); }

code, pre, kbd {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
}
pre {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  line-height: 1.6;
}

/* The focus ring must survive on every interactive element — it is exempt from the accent
 * budget precisely because it has to be visible everywhere. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Motion is felt, not seen — and for those who ask for none, none. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- primitives */

.container {
  max-width: var(--spacing-container-max-width);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding: calc(var(--spacing-section-padding) * 0.6) 0; }
@media (min-width: 900px) { .section { padding: var(--spacing-section-padding) 0; } }

/* Uppercase eyebrow — chrome, so it takes the secondary neutral, never the gold. */
.eyebrow {
  font-family: var(--font-family-body);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  max-width: 42rem;
}

.card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: 2rem;
}

.hairline { border: 0; border-top: 1px solid var(--color-border); margin: 0; }

/* Buttons: quiet by default; the single filled variant carries the accent. */
.button {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 0.85rem 1.75rem;
  cursor: pointer;
  transition: border-color var(--transition-duration) var(--transition-timing),
              background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}
.button:hover { border-color: var(--color-accent); color: var(--color-text-primary); }
.button--primary {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}
.button--primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #1A1A1A;
}
.button:disabled { opacity: 0.45; cursor: default; }

.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  background: var(--color-accent-wash);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.85rem;
}

input[type="email"], input[type="text"] {
  font-family: var(--font-family-body);
  font-size: 1rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color var(--transition-duration) var(--transition-timing);
}
input:focus { border-color: var(--color-accent); outline: none; }

.status-error { color: var(--color-error); }
.status-success { color: var(--color-success); }

table { border-collapse: collapse; width: 100%; }
th {
  font-size: 0.72rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}