/* ============================================================================
   Premier Custom Storage — Design System v1
   ----------------------------------------------------------------------------
   Single source of truth for site-wide visual language.
   Aesthetic: elegant SaaS/agency — navy, slate, off-white, restrained accent.
   Include on every page:  <link rel="stylesheet" href="/lib/design-system.css">
   ----------------------------------------------------------------------------
   Sections:
     1. Font imports
     2. Design tokens (CSS custom properties)
     3. Modern reset
     4. Base typography
     5. Layout primitives (container, section)
     6. Components: buttons, cards, inputs, badges, alerts, tables, nav, footer
     7. Utilities (eyebrow, divider, skip-link, visually-hidden)
     8. Focus rings and reduced-motion
   Breakpoints (used in @media — custom props can't appear inside media queries):
       --bp-sm:  480px
       --bp-md:  768px
       --bp-lg:  1024px
       --bp-xl:  1280px
   ============================================================================ */

/* ── 1. Fonts ─────────────────────────────────────────────────────────────── */
/* Inter for body/UI (clean modern sans), Fraunces for display (warm modern serif).
   Both hosted by Google Fonts; CSP already allows fonts.googleapis.com + fonts.gstatic.com. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

/* ── 2. Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Color — navy scale (primary brand) */
  --navy-900: #0b1322;
  --navy-700: #162033;
  --navy-500: #1f2c47;
  --navy-300: #3a4a6b;

  /* Color — slate scale (neutrals) */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50:  #f8fafc;

  /* Color — surfaces */
  --charcoal:  #111827;
  --white:     #ffffff;
  --off-white: #fafaf7;

  /* Single restrained accent — dusty teal (calm, professional, not playful) */
  --accent:        #4a7c7e;
  --accent-strong: #355c5e;
  --accent-soft:   #e6efef;

  /* Semantic colors */
  --color-success:    #047857;
  --color-success-bg: #ecfdf5;
  --color-warning:    #b45309;
  --color-warning-bg: #fffbeb;
  --color-danger:     #b91c1c;
  --color-danger-bg:  #fef2f2;
  --color-info:       #1d4ed8;
  --color-info-bg:    #eff6ff;

  /* Semantic aliases (use these in components, not raw scale values) */
  --color-bg:           var(--off-white);
  --color-surface:      var(--white);
  --color-surface-alt:  var(--slate-50);
  --color-text:         var(--charcoal);
  --color-text-muted:   var(--slate-500);
  --color-text-subtle:  var(--slate-400);
  --color-text-inverse: var(--white);
  --color-border:       var(--slate-200);
  --color-border-strong:var(--slate-300);
  --color-link:         var(--navy-700);
  --color-link-hover:   var(--accent-strong);
  --color-brand:        var(--navy-900);
  --color-brand-soft:   var(--slate-100);

  /* Typography — families */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Typography — type scale (rem; 1rem = 16px baseline) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */

  /* Typography — line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Typography — weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Typography — letter spacing */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  /* Spacing — 8px-based scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-14: 96px;
  --space-16: 128px;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows — restrained, no glow */
  --shadow-xs: 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);

  /* Transitions */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --container-narrow:  720px;
  --container-wide:    1200px;
  --container-padding: clamp(16px, 4vw, 32px);

  /* Z-index scale */
  --z-base:    0;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--navy-700);
}

/* ── 3. Modern reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; padding: 0; }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition-base); }
a:hover { color: var(--color-link-hover); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }

/* ── 4. Base typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}
h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3.6vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
p { line-height: var(--leading-relaxed); color: var(--color-text); }
small { font-size: var(--text-sm); }
strong, b { font-weight: var(--weight-semibold); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* ── 5. Layout primitives ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

.section { padding-block: clamp(var(--space-9), 8vw, var(--space-14)); }
.section--tight { padding-block: clamp(var(--space-7), 6vw, var(--space-10)); }
.section--loose { padding-block: clamp(var(--space-12), 10vw, var(--space-16)); }
.section--surface { background-color: var(--color-surface); }
.section--alt     { background-color: var(--color-surface-alt); }
.section--dark    { background-color: var(--navy-900); color: var(--color-text-inverse); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 { color: var(--white); }
.section--dark p  { color: var(--slate-300); }

/* ── 6. Components ──────────────────────────────────────────────────────── */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-color: var(--slate-100);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}
/* Re-assert color on hover — the global `a:hover { color: var(--color-link-hover) }`
   above this in the cascade outranks `.btn`'s color when only `.btn` (no variant) is
   applied to an <a>, and the text flips to dark teal on hover. */
.btn:hover { background-color: var(--slate-200); color: var(--color-text); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn--primary {
  background-color: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}
.btn--primary:hover { background-color: var(--navy-700); border-color: var(--navy-700); color: var(--white); box-shadow: var(--shadow-sm); }

.btn--secondary {
  background-color: var(--white);
  color: var(--navy-900);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background-color: var(--slate-50); border-color: var(--navy-700); color: var(--navy-900); }

.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
}
.btn--ghost:hover { background-color: var(--slate-100); color: var(--charcoal); }

.btn--danger {
  background-color: var(--color-danger);
  color: var(--white);
  border-color: var(--color-danger);
}
.btn--danger:hover { background-color: #991b1b; border-color: #991b1b; color: var(--white); }

.btn--accent {
  background-color: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.btn--accent:hover { background-color: var(--accent-strong); border-color: var(--accent-strong); color: var(--white); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--block { width: 100%; }

/* Cards */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-xs);
}
.card--bordered { border-color: var(--color-border-strong); box-shadow: none; }
.card--flat     { box-shadow: none; }
.card--interactive {
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.card--interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.card--interactive:focus-within { outline: none; box-shadow: var(--focus-ring); }

.card__header { margin-bottom: var(--space-4); }
.card__title  { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-2); }
.card__body   { color: var(--color-text); }
.card__footer { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }

/* Form fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: 0.005em;
}
.input, .textarea, .select {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  appearance: none;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--slate-400); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--navy-700);
  box-shadow: 0 0 0 3px rgba(22, 32, 51, 0.12);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.textarea { min-height: 120px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-9);
}
.field--error .input,
.field--error .textarea,
.field--error .select { border-color: var(--color-danger); }
.field--error .input:focus-visible { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); }
.help-text { font-size: var(--text-xs); color: var(--color-text-muted); }
.help-text--error { color: var(--color-danger); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: var(--slate-100);
  color: var(--slate-700);
}
.badge--neutral { background-color: var(--slate-100); color: var(--slate-700); }
.badge--success { background-color: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge--danger  { background-color: var(--color-danger-bg);  color: var(--color-danger); }
.badge--info    { background-color: var(--color-info-bg);    color: var(--color-info); }
.badge--accent  { background-color: var(--accent-soft);      color: var(--accent-strong); }

/* Alerts */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.alert__title { font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.alert--info    { background-color: var(--color-info-bg);    border-color: #bfdbfe; color: var(--color-info); }
.alert--success { background-color: var(--color-success-bg); border-color: #a7f3d0; color: var(--color-success); }
.alert--warning { background-color: var(--color-warning-bg); border-color: #fde68a; color: var(--color-warning); }
.alert--danger  { background-color: var(--color-danger-bg);  border-color: #fecaca; color: var(--color-danger); }

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-4) var(--container-padding);
  background-color: var(--navy-900);
  color: var(--white);
}
.nav__brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--white);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}
.nav__brand:hover { color: var(--white); }
.nav__list { display: flex; gap: var(--space-6); align-items: center; }
.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--slate-300);
  text-decoration: none;
  letter-spacing: 0.01em;
  padding: var(--space-2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.nav__link:hover { color: var(--white); border-bottom-color: var(--slate-400); }
.nav__link--active { color: var(--white); border-bottom-color: var(--accent); }
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--white);
  background-color: var(--accent);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-base);
}
.nav__cta:hover { background-color: var(--accent-strong); color: var(--white); }

/* Footer */
.footer {
  background-color: var(--navy-900);
  color: var(--slate-300);
  padding-block: var(--space-12) var(--space-7);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-9);
}
.footer__col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.footer__col a {
  color: var(--slate-400);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-base);
}
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--slate-800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--slate-400); /* a11y: --slate-500 on --navy-900 is 4.0:1, fails AA */
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* Tables */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.table th, .table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.table th {
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background-color: var(--color-surface-alt);
}
.table tbody tr:hover { background-color: var(--slate-50); }
.table__row--alt { background-color: var(--color-surface-alt); }

/* ── 7. Utilities ───────────────────────────────────────────────────────── */

/* Eyebrow — small uppercase label that sits above a heading */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--space-3);
}

/* Dividers */
.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  border: 0;
  margin-block: var(--space-7);
}
.divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin-inline: var(--space-4);
  margin-block: 0;
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  background-color: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: top var(--transition-base);
}
.skip-link:focus { top: var(--space-3); color: var(--white); }

/* Visually hidden (a11y) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Generic text utilities */
.text-muted   { color: var(--color-text-muted); }
.text-subtle  { color: var(--color-text-subtle); }
.text-center  { text-align: center; }
.text-display { font-family: var(--font-display); }
.text-balance { text-wrap: balance; }

/* ── 8. Focus rings + reduced motion ────────────────────────────────────── */
*:focus-visible {
  outline: 2px solid var(--navy-700);
  outline-offset: 2px;
  border-radius: 2px;
}
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: none; /* component-level focus styles take over */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}