/*
 * Cascade Web Solutions theme for self-hosted DocuSeal.
 * Loaded after DocuSeal's own CSS in every layout (admin, sign-in, client signing form).
 * Values follow the Cascade Brand & Design Guide v1.0: navy-led, blue for actions,
 * white-space-forward, Poppins only, 6px buttons, 10px inputs, 12px cards, navy-tinted shadows.
 * DocuSeal uses daisyUI 3, whose theme colors are "H S% L%" triplets.
 */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); }

:root,
html[data-theme] {
  /* Brand tokens */
  --cascade-navy: #1E3B55;
  --cascade-blue: #2966CC;
  --cascade-blue-700: #2253A8;
  --cascade-blue-800: #1C4588;
  --cascade-blue-50: #F2F6FC;
  --cascade-blue-100: #E3ECF9;
  --cascade-slate: #233349;
  --cascade-offwhite: #F6F8F7;
  --cascade-border: #DFE4E7;
  --cascade-border-strong: #C4CCD3;
  --cascade-gray: #9AA4A7;
  --cascade-soft-blue: #98ADDC;
  --cascade-shadow: 0 8px 24px rgba(30, 59, 85, .10);
  --cascade-shadow-hover: 0 12px 32px rgba(30, 59, 85, .14);
  --cascade-ease: cubic-bezier(.2, 0, 0, 1);

  /* daisyUI 3 theme (H S% L%) */
  --p: 216 66% 95%;          /* primary: blue tint, used for selected/hover fills */
  --pf: 217 62% 90%;
  --pc: 208 48% 23%;
  --s: 222 51% 73%;          /* secondary: soft blue (decorative only) */
  --sf: 222 51% 65%;
  --sc: 208 48% 23%;
  --a: 218 62% 48%;          /* accent: Cascade Blue (amber stays semantic-only via warning) */
  --af: 218 66% 40%;
  --ac: 0 0% 100%;
  --n: 218 62% 48%;          /* neutral = primary action buttons: Cascade Blue */
  --nf: 218 66% 40%;         /* blue 700 hover */
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;           /* pure white canvas */
  --b2: 150 9% 97%;          /* off-white soft sections */
  --b3: 203 14% 89%;         /* border gray */
  --bc: 215 35% 21%;         /* deep slate body text */
  --in: 218 62% 48%;
  --inc: 0 0% 100%;
  --su: 105 48% 39%;         /* data green */
  --suc: 0 0% 100%;
  --wa: 40 79% 50%;          /* amber */
  --wac: 208 48% 15%;
  --er: 0 55% 51%;           /* red */
  --erc: 0 0% 100%;

  --rounded-box: 12px;
  --rounded-btn: 6px;
  --rounded-badge: 9999px;
  --btn-text-case: none;
  --btn-focus-scale: 1;
  --animation-btn: .14s;
  --animation-input: .14s;
  --tab-radius: 6px;
}

html, body {
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--cascade-slate);
  background-color: #fff;
}

h1, h2, h3, h4 { color: var(--cascade-navy); letter-spacing: -0.02em; }
h1 { font-weight: 700; }
h2, h3, h4 { font-weight: 600; }

/* Links: blue, darken on hover */
a.link, .link-neutral { color: var(--cascade-blue); }
a.link:hover, .link-neutral:hover { color: var(--cascade-blue-700); }

/* Buttons: 6px radius, Title Case, medium weight, 1px lift on hover, no scale-down */
.btn, .base-button, .white-button {
  border-radius: 6px;
  font-weight: 500;
  text-transform: capitalize;  /* Title Case buttons per guide */
  letter-spacing: 0;
  transition: background-color .16s var(--cascade-ease), border-color .16s var(--cascade-ease), color .16s var(--cascade-ease), transform .16s var(--cascade-ease), box-shadow .16s var(--cascade-ease);
}
.btn:active:hover, .btn:active:focus, .base-button:active { transform: translateY(0); }

.btn-neutral, .base-button {
  background-color: var(--cascade-blue);
  border-color: var(--cascade-blue);
  color: #fff;
}
.btn-neutral:hover, .base-button:hover {
  background-color: var(--cascade-blue-700);
  border-color: var(--cascade-blue-700);
  transform: translateY(-1px);
}
.btn-neutral:active, .base-button:active { background-color: var(--cascade-blue-800); border-color: var(--cascade-blue-800); }

/* Secondary (outline/white) buttons: navy text, hairline border; hover fills blue 50 with a blue border */
.white-button, .btn-outline {
  background-color: #fff;
  border: 1px solid var(--cascade-border-strong) !important;
  color: var(--cascade-navy);
}
.white-button:hover, .btn-outline:hover {
  background-color: var(--cascade-blue-50);
  border-color: var(--cascade-blue) !important;
  color: var(--cascade-navy);
}

.btn[disabled], .btn-disabled, .btn:disabled {
  background-color: var(--cascade-border) !important;
  border-color: var(--cascade-border) !important;
  color: var(--cascade-gray) !important;
  box-shadow: none;
  transform: none;
}

/* Inputs: 10px radius, standard border, blue border + soft inner ring on focus */
.input, .select, .textarea, .base-input, .base-select {
  border-radius: 10px;
  border-color: var(--cascade-border-strong);
  background-color: #fff;
  color: var(--cascade-slate);
}
.base-textarea, .textarea { border-radius: 10px; }
.input:focus, .select:focus, .textarea:focus, .base-input:focus, .base-select:focus {
  outline: 3px solid var(--cascade-soft-blue);
  outline-offset: 2px;
  border-color: var(--cascade-blue);
  box-shadow: inset 0 0 0 3px rgba(41, 102, 204, .16);
}
.label, .label-text { color: var(--cascade-navy); font-weight: 500; }

.checkbox:checked, .checkbox[checked='true'], .radio:checked, .toggle:checked {
  --chkbg: var(--n);
  --chkfg: var(--nc);
  background-color: var(--cascade-blue);
  border-color: var(--cascade-blue);
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cascade-soft-blue);
  outline-offset: 2px;
}

/* Cards and soft panels (template tiles, submission rows, settings boxes) */
.card, .rounded-2xl.bg-base-200, .rounded-3xl.bg-base-200 {
  border-radius: 12px;
}
.bg-base-200 { background-color: var(--cascade-offwhite); }
a.bg-base-200, .card.bg-base-200 { border: 1px solid var(--cascade-border); }
a.bg-base-200:hover, .card.bg-base-200:hover { box-shadow: var(--cascade-shadow-hover); border-color: var(--cascade-border-strong); }

/* Navbar: white, hairline bottom divider, no shadow */
.navbar, body > div:first-child > .navbar { background-color: #fff; }

/* Signed-out pages: the navbar "Sign In" link duplicates the sign-in form */
a[href$="/sign_in"]:not(.btn):not(.link) { display: none; }

/* Badges: full radius, title case, AA-contrast tinted fills (status always carries a word) */
.badge { border-radius: 9999px; font-weight: 500; text-transform: none; }
.badge-info, .badge-primary { background-color: var(--cascade-blue-100) !important; color: var(--cascade-navy) !important; border-color: transparent !important; }
.badge-success { background-color: #E5F1E1 !important; color: #2F6B1F !important; border-color: transparent !important; }
.badge-warning { background-color: #FBF0D9 !important; color: #7A5200 !important; border-color: transparent !important; }
.badge-error { background-color: #F8E3E3 !important; color: #9B2C2C !important; border-color: transparent !important; }
.badge-neutral { background-color: var(--cascade-navy) !important; color: #fff !important; border-color: transparent !important; }

/* The template page's main action ("Send New Contract") is the primary blue button */
#add_recipients_button { background-color: var(--cascade-blue); border-color: var(--cascade-blue) !important; color: #fff; }
#add_recipients_button:hover { background-color: var(--cascade-blue-700); border-color: var(--cascade-blue-700) !important; color: #fff; transform: translateY(-1px); }

/* Tabs: selected = blue text + blue underline */
.tab-active, .tab.tab-active { color: var(--cascade-blue) !important; border-color: var(--cascade-blue) !important; }

/* Modals: 12px corners, navy-tinted shadow */
.modal-box { border-radius: 12px; box-shadow: 0 24px 64px rgba(30, 59, 85, .18); }

/* Dropdown menus */
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active { background-color: var(--cascade-blue-100); color: var(--cascade-navy); }

/* Tooltips */
.tooltip { --tooltip-color: var(--cascade-navy); --tooltip-text-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:hover, .base-button:hover { transform: none !important; }
}