/* ClientKennel — generated from tokens.json. Do not hand-edit values here; change tokens.json and regenerate (see docs/rails-integration.md). */
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/PlayfairDisplay-Variable-759b7dc1.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/assets/fonts/PlayfairDisplay-Variable-Italic-37c58aab.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/assets/fonts/Montserrat-Variable-9fa5e944.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Allura"; src: url("/assets/fonts/Allura-Regular-87c14e01.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root, [data-theme="light"] {
  color-scheme: light;
  --oxblood: #4a0e17;
  --onyx: #0f1112;
  --forest: #1e3a34;
  --brass: #c9a461;
  --bone: #ede6db;
  --slate: #3f5566;
  --mushroom: #8b7f73;
  --dusty-rose: #8c4b51;
  --canvas: #faf4ec;
  --surface: #fcf8f2;
  --surface-sunken: var(--bone);
  --border: #e3dacb;
  --border-strong: var(--mushroom);
  --ink: var(--onyx);
  --ink-muted: #5e544b;
  --accent: #8a5f1a;
  --action: var(--oxblood);
  --on-action: #faf4ec;
  --action-hover: #5e1420;
  --focus-ring: var(--oxblood);
  --sidebar: var(--oxblood);
  --sidebar-ink: var(--bone);
  --sidebar-ink-muted: #d9cbbb;
  --sidebar-focus: var(--brass);
  --nav-active-bg: #edcea3;
  --nav-active-ink: var(--oxblood);
  --status-success-bg: #c8e3d2;
  --status-success-ink: var(--forest);
  --status-warning-bg: #efcfa2;
  --status-warning-ink: var(--oxblood);
  --status-info-bg: #a9c5e3;
  --status-info-ink: var(--onyx);
  --icon-primary: var(--oxblood);
  --icon-secondary: var(--slate);
  --shadow-card: 0 1px 2px rgba(74,14,23,0.06), 0 4px 12px rgba(74,14,23,0.05);
  --shadow-raised: 0 8px 24px rgba(74,14,23,0.14);
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: var(--onyx);
  --surface: #171a1b;
  --surface-sunken: #1f2223;
  --border: #2e3234;
  --border-strong: var(--mushroom);
  --ink: var(--bone);
  --ink-muted: #b3a99c;
  --accent: var(--brass);
  --action: var(--brass);
  --on-action: var(--onyx);
  --action-hover: #d8b676;
  --focus-ring: var(--brass);
  --sidebar: #1d0507;
  --sidebar-ink: var(--bone);
  --sidebar-ink-muted: #b3a99c;
  --sidebar-focus: var(--brass);
  --nav-active-bg: var(--oxblood);
  --nav-active-ink: var(--bone);
  --status-success-bg: var(--forest);
  --status-success-ink: #cfe6d9;
  --status-warning-bg: var(--brass);
  --status-warning-ink: var(--onyx);
  --status-info-bg: var(--slate);
  --status-info-ink: #e4ecf3;
  --icon-primary: var(--brass);
  --icon-secondary: #8fa9bd;
  --shadow-card: 0 0 0 1px rgba(237,230,219,0.05);
  --shadow-raised: 0 8px 24px rgba(0,0,0,0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --canvas: var(--onyx);
    --surface: #171a1b;
    --surface-sunken: #1f2223;
    --border: #2e3234;
    --border-strong: var(--mushroom);
    --ink: var(--bone);
    --ink-muted: #b3a99c;
    --accent: var(--brass);
    --action: var(--brass);
    --on-action: var(--onyx);
    --action-hover: #d8b676;
    --focus-ring: var(--brass);
    --sidebar: #1d0507;
    --sidebar-ink: var(--bone);
    --sidebar-ink-muted: #b3a99c;
    --sidebar-focus: var(--brass);
    --nav-active-bg: var(--oxblood);
    --nav-active-ink: var(--bone);
    --status-success-bg: var(--forest);
    --status-success-ink: #cfe6d9;
    --status-warning-bg: var(--brass);
    --status-warning-ink: var(--onyx);
    --status-info-bg: var(--slate);
    --status-info-ink: #e4ecf3;
    --icon-primary: var(--brass);
    --icon-secondary: #8fa9bd;
    --shadow-card: 0 0 0 1px rgba(237,230,219,0.05);
    --shadow-raised: 0 8px 24px rgba(0,0,0,0.55);
  }
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
  --font-script: Allura, "Snell Roundhand", cursive;
}
.display-xl { font-family: var(--font-serif); font-size: 72px; line-height: 72px; font-weight: 500; letter-spacing: -0.01em; }
.display { font-family: var(--font-serif); font-size: 48px; line-height: 54px; font-weight: 500; }
.heading-1 { font-family: var(--font-serif); font-size: 40px; line-height: 48px; font-weight: 500; }
.heading-2 { font-family: var(--font-serif); font-size: 28px; line-height: 36px; font-weight: 500; }
.heading-3 { font-family: var(--font-serif); font-size: 20px; line-height: 28px; font-weight: 500; }
.stat { font-family: var(--font-serif); font-size: 32px; line-height: 36px; font-weight: 500; }
.body-lg { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; font-weight: 400; }
.body-sm { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.script-lg { font-family: var(--font-script); font-size: 56px; line-height: 60px; font-weight: 400; }
.script { font-family: var(--font-script); font-size: 32px; line-height: 36px; font-weight: 400; }