/*! dp-master.css v3.0 — Unified framework (includes former docs-fixes)
   - Design tokens (light/dark)
   - Layout utilities (container, grid, flex, spacing)
   - Typography & surfaces
   - Buttons, badges
   - Cards
   - Tables
   - Forms & switch
   - Navbar
   - Alerts
   - Modal (:target)
   - Drawer (checkbox + labels)
   - Tabs, Accordion, Dropdown, Tooltip
   - Toasts (CSS-only)
   - Carousel (pure CSS)
   - Masonry
   - Progress, Skeleton
   - Hero
   - Animations helpers
*/

/* -------------------------------
   Tokens & Theming
----------------------------------*/
:root{
  /* Brand (computed) */
  --dp-hue: 220;
  --dp-sat: 85%;
  --dp-light: 56%;
  --dp-primary: hsl(var(--dp-hue) var(--dp-sat) var(--dp-light));

  /* Extended palette */
  --dp-success: hsl(145 60% 45%);
  --dp-warning: hsl(38 95% 55%);
  --dp-danger:  hsl(0 75% 55%);
  --dp-info:    hsl(200 90% 50%);

  /* Neutral scale */
  --dp-gray-50:  hsl(210 20% 98%);
  --dp-gray-100: hsl(210 20% 96%);
  --dp-gray-200: hsl(210 15% 90%);
  --dp-gray-300: hsl(210 14% 83%);
  --dp-gray-400: hsl(210 12% 68%);
  --dp-gray-500: hsl(210 10% 55%);
  --dp-gray-600: hsl(210 9% 42%);
  --dp-gray-700: hsl(210 10% 32%);
  --dp-gray-800: hsl(210 11% 23%);
  --dp-gray-900: hsl(210 13% 13%);

  /* Semantic text & surfaces */
  --dp-text: var(--dp-gray-900);
  --dp-text-soft: var(--dp-gray-600);
  --dp-bg: var(--dp-gray-50);
  --dp-elev-1: var(--dp-gray-100);
  --dp-elev-2: var(--dp-gray-200);
  --dp-elev-3: var(--dp-gray-300);
  --dp-border: var(--dp-gray-200);
}
html[data-theme="dark"]{
  --dp-text: var(--dp-gray-100);
  --dp-text-soft: var(--dp-gray-400);
  --dp-bg: var(--dp-gray-900);
  --dp-elev-1: var(--dp-gray-800);
  --dp-elev-2: var(--dp-gray-700);
  --dp-elev-3: var(--dp-gray-600);
  --dp-border: var(--dp-gray-700);

  /* Shifted accents for contrast in dark mode */
  --dp-success: hsl(145 50% 60%);
  --dp-warning: hsl(38 90% 65%);
  --dp-danger:  hsl(0 70% 65%);
  --dp-info:    hsl(200 85% 65%);
}
html{ scroll-behavior:smooth; }
body{
  background:var(--dp-bg); color:var(--dp-text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
        "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* -------------------------------
   Layout utilities
----------------------------------*/
.dp-container{ max-width: 1100px; margin-inline:auto; padding-inline:1rem; }
.dp-rounded{ border-radius:.75rem; }
.dp-p-2{ padding:.5rem; } .dp-p-3{ padding:.75rem; } .dp-p-4{ padding:1rem; } .dp-p-16{ padding:1rem; }
.dp-my-2{ margin-block:.5rem; } .dp-my-4{ margin-block:1rem; } .dp-my-6{ margin-block:1.5rem; } .dp-my-8{ margin-block:2rem; }
.dp-mt-2{ margin-top:.5rem; } .dp-mb-2{ margin-bottom:.5rem; }
.dp-grid{ display:grid; } .dp-grid-2{ grid-template-columns: 1fr; }
@media (min-width: 780px){ .dp-grid-2{ grid-template-columns: 1fr 1fr; } }
.dp-grid-3{ grid-template-columns: repeat(3, 1fr); } .dp-grid-4{ grid-template-columns: repeat(4, 1fr); }
.dp-gap-3{ gap:.75rem; } .dp-gap-4{ gap:1rem; }
.dp-flex{ display:flex; } .dp-between{ justify-content:space-between; } .dp-center{ justify-content:center; align-items:center; }
.dp-hide-sm{ display:none; } @media (min-width: 720px){ .dp-hide-sm{ display:initial; } }

/* -------------------------------
   Typography & surfaces
----------------------------------*/
.dp-h1{ font-size: clamp(1.8rem, 2.4vw + 1rem, 2.6rem); font-weight:800; }
.dp-h2{ font-size: 1.6rem; font-weight:700; }
.dp-h3{ font-size: 1.25rem; font-weight:700; }
.dp-lead{ font-size:1.05rem; color: var(--dp-text-soft); }
.dp-code{ font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; background: var(--dp-elev-2);
         padding:.15rem .35rem; border-radius:.35rem; }
.dp-text-soft{ color: var(--dp-text-soft); }
.dp-bg-primary{ background: var(--dp-primary); color:#fff; }
.dp-surface{ background:var(--dp-elev-1); border:1px solid var(--dp-border); }

/* -------------------------------
   Navbar
----------------------------------*/
.dp-navbar{ position: sticky; top:0; z-index:20; background:var(--dp-elev-1); border-bottom:1px solid var(--dp-border); }
.dp-navbar .dp-container{ display:flex; align-items:center; justify-content:space-between; min-height:58px; }
.dp-brand{ font-weight:700; }
.dp-nav a{ padding:.5rem .75rem; display:inline-block; color:inherit; text-decoration:none; border-radius:.5rem; }
.dp-nav a:hover{ background:var(--dp-elev-2); }

/* -------------------------------
   Buttons & badges
----------------------------------*/
.dp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border-radius:.65rem;
  border:1px solid var(--dp-border); background:#fff; color:inherit; cursor:pointer; text-decoration:none;
  transition: transform .08s ease, background .2s ease, border .2s ease, filter .2s ease; }
.dp-btn:hover{ background:var(--dp-elev-2); }
.dp-btn:active{ transform: translateY(1px); }
.dp-btn-sm{ padding:.4rem .65rem; font-size:.9rem; }
.dp-btn-outline{ background:transparent; }
.dp-btn-primary{ background:var(--dp-primary); color:#fff; border-color: color-mix(in oklab, var(--dp-primary), black 20%); }
.dp-btn-primary:hover{ filter:brightness(1.05); }
.dp-btn-accent{ background: color-mix(in oklab, var(--dp-primary), white 45%); border-color: color-mix(in oklab, var(--dp-primary), black 20%); color:#0a0a0a; }
.dp-btn-ghost{ background:transparent; border-color:transparent; }
.dp-btn-icon{ width:2.25rem; height:2.25rem; padding:0; }
.dp-btn-group > *{ margin-right:.5rem; } .dp-btn-group > *:last-child{ margin-right:0; }
.dp-badge{ display:inline-block; padding:.2rem .5rem; border:1px solid var(--dp-border); border-radius:.5rem; background:var(--dp-elev-1); }
.dp-badge.primary{ background: color-mix(in oklab, var(--dp-primary), white 80%); border-color: color-mix(in oklab, var(--dp-primary), black 20%); }

/* Spinner */
@keyframes dp-spin{ to{ transform: rotate(360deg); } }
.dp-spinner{ width:1.1rem; height:1.1rem; border-radius:999px; border:3px solid var(--dp-border); border-top-color: var(--dp-primary);
  display:inline-block; animation: dp-spin .9s linear infinite; }

/* -------------------------------
   Cards
----------------------------------*/
.dp-card{ background: var(--dp-elev-1); border:1px solid var(--dp-border); border-radius:.75rem; overflow:hidden; }
.dp-card-header, .dp-card-footer{ padding:.7rem 1rem; background: var(--dp-elev-2); border-bottom:1px solid var(--dp-border); }
.dp-card-footer{ border-top: 1px solid var(--dp-border); border-bottom:0; }
.dp-card-body{ padding:1rem; }

/* -------------------------------
   Table
----------------------------------*/
.dp-table-wrap{ border:1px solid var(--dp-border); border-radius:.65rem; overflow:auto; }
.dp-table{ border-collapse: collapse; width:100%; min-width: 520px; }
.dp-table th, .dp-table td{ padding:.55rem .8rem; border-bottom:1px solid var(--dp-border); text-align:left; }
.dp-table thead th{ position: sticky; top:0; background: var(--dp-elev-2); z-index:1; }

/* -------------------------------
   Forms & Switch
----------------------------------*/
.dp-field{ display:flex; flex-direction:column; gap:.35rem; }
.dp-label{ font-weight:600; font-size:.95rem; }
.dp-input, .dp-select, .dp-textarea{ border:1px solid var(--dp-border); background:#fff; padding:.55rem .7rem; border-radius:.55rem; width:100%; color:inherit; }
.dp-select{ appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dp-text-soft) 50%), linear-gradient(135deg, var(--dp-text-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat:no-repeat; }
.dp-textarea{ min-height: 110px; }

.dp-switch{ display:inline-flex; align-items:center; gap:.5rem; }
.dp-switch input[type="checkbox"]{ appearance:none; width:2.2rem; height:1.2rem; background:var(--dp-elev-2); border:1px solid var(--dp-border); border-radius:999px;
  position:relative; outline:none; cursor:pointer; }
.dp-switch input[type="checkbox"]::after{ content:""; position:absolute; top:2px; left:2px; width:.9rem; height:.9rem; background:#fff; border-radius:999px; transition:left .2s ease; }
.dp-switch input[type="checkbox"]:checked{ background: color-mix(in oklab, var(--dp-primary), white 30%); border-color: var(--dp-primary); }
.dp-switch input[type="checkbox"]:checked::after{ left: calc(100% - .9rem - 2px); }

/* -------------------------------
   Alerts
----------------------------------*/
.dp-alert{ padding:.75rem 1rem; border-radius:.65rem; border:1px solid var(--dp-border); background:var(--dp-elev-1); }
.dp-alert.success{ border-color: color-mix(in oklab, green, var(--dp-border) 65%); background: color-mix(in oklab, green, white 92%); }
.dp-alert.warning{ border-color: color-mix(in oklab, orange, var(--dp-border) 50%); background: color-mix(in oklab, orange, white 92%); }
.dp-alert.danger{ border-color: color-mix(in oklab, crimson, var(--dp-border) 50%); background: color-mix(in oklab, crimson, white 92%); }

/* -------------------------------
   Modal (:target)
----------------------------------*/
.dp-modal{ position:fixed; inset:0; background: color-mix(in oklab, black, transparent 70%); display:none; align-items:center; justify-content:center; padding:1rem; }
.dp-modal:target{ display:flex; }
.dp-dialog{ max-width: 600px; width:100%; }

/* -------------------------------
   Drawer (checkbox)
----------------------------------*/
.dp-drawer{ position:relative; }
.dp-drawer > input[type="checkbox"]{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.dp-drawer .dp-pane{ position:fixed; inset:0 auto 0 0; width:min(90vw, 360px); transform: translateX(-100%); background: var(--dp-elev-1); border-right:1px solid var(--dp-border);
  box-shadow: 8px 0 24px rgba(0,0,0,.12); transition: transform .25s ease; z-index:40; }
.dp-drawer .dp-scrim{ position:fixed; inset:0; background: color-mix(in oklab, black, transparent 70%); opacity:0; pointer-events:none; transition: opacity .2s ease; z-index:30; }
.dp-drawer > input[type="checkbox"]:checked ~ .dp-pane{ transform: translateX(0); }
.dp-drawer > input[type="checkbox"]:checked ~ .dp-scrim{ opacity:1; pointer-events:auto; }

/* -------------------------------
   Tabs / Accordion / Dropdown / Tooltip
----------------------------------*/
.dp-tabs details > summary{ padding:.6rem .9rem; background:var(--dp-elev-2); border-bottom:1px solid var(--dp-border); cursor:pointer; }
.dp-tab-content{ padding:1rem; }

.dp-accordion details > summary{ padding:.6rem .9rem; background:var(--dp-elev-2); cursor:pointer; border:1px solid var(--dp-border); border-radius:.5rem; }
.dp-acc-body{ padding:1rem; border:1px solid var(--dp-border); border-top:0; border-radius:0 0 .5rem .5rem; }

.dp-dropdown details > summary{ list-style:none; cursor:pointer; }
.dp-dropdown .dp-menu{ display:flex; flex-direction:column; border:1px solid var(--dp-border); background: var(--dp-elev-1); border-radius:.6rem; padding:.35rem;
  position:absolute; margin-top:.25rem; min-width:160px; z-index:50; }
.dp-dropdown .dp-menu a, .dp-dropdown .dp-menu button{ text-align:left; padding:.45rem .6rem; background:transparent; border:0; border-radius:.4rem; text-decoration:none; color:inherit; }
.dp-dropdown .dp-menu a:hover, .dp-dropdown .dp-menu button:hover{ background:var(--dp-elev-2); }

/* Tooltip */
.dp-tooltip[aria-label]{ position:relative; }
.dp-tooltip[aria-label]::after{ content: attr(aria-label); position:absolute; left:50%; transform: translateX(-50%) translateY(-6px); bottom:100%;
  background: #111; color:#fff; font-size:.8rem; padding:.25rem .4rem; white-space:nowrap; border-radius:.3rem; opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; }
.dp-tooltip[aria-label]:hover::after{ opacity:1; transform: translateX(-50%) translateY(-2px); }

/* -------------------------------
   Toasts (CSS-only)
----------------------------------*/
.dp-toast{ position: fixed; right:1rem; bottom:1rem; display:grid; gap:.5rem; z-index:60; }
.dp-toast .item{ background:#111; color:#fff; padding:.6rem .8rem; border-radius:.5rem; opacity:0; transform: translateY(6px); pointer-events:none; }
@keyframes dp-fade-up{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }

/* -------------------------------
   Carousel (pure CSS)
----------------------------------*/
.dp-carousel{ position:relative; overflow:hidden; border:1px solid var(--dp-border); border-radius:.6rem; background: var(--dp-elev-1); }
.dp-carousel .slides{ display:flex; transition: transform .3s ease; }
.dp-carousel .slide{ min-width:100%; }
.dp-carousel input[type="radio"]{ display:none; }
.dp-carousel input[data-slide="1"]:checked ~ .slides{ transform: translateX(0%); }
.dp-carousel input[data-slide="2"]:checked ~ .slides{ transform: translateX(-100%); }
.dp-carousel input[data-slide="3"]:checked ~ .slides{ transform: translateX(-200%); }
.dp-carousel input[data-slide="4"]:checked ~ .slides{ transform: translateX(-300%); } /* forward compat */
.dp-carousel .controls{ position:absolute; inset:auto 0 0 0; display:flex; justify-content:space-between; padding:.4rem; }
.dp-carousel .dots{ position:absolute; inset:auto 0 .4rem 0; display:flex; gap:.35rem; justify-content:center; }
.dp-carousel .dot{ width:.55rem; height:.55rem; background: var(--dp-border); border-radius:999px; cursor:pointer; display:inline-block; }

/* -------------------------------
   Masonry
----------------------------------*/
.dp-masonry{ column-count: 3; column-gap: 1rem; }
.dp-masonry .dp-card{ break-inside: avoid; margin:0 0 1rem; }

/* -------------------------------
   Progress & Skeleton
----------------------------------*/
.dp-progress{ width:100%; height:10px; background: var(--dp-elev-2); border-radius:999px; overflow:hidden; }
.dp-progress .bar{ height:100%; background: var(--dp-primary); }

@keyframes dp-skeleton-ani{ 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
.dp-skeleton{ background: linear-gradient(90deg, var(--dp-elev-2) 25%, var(--dp-elev-3) 37%, var(--dp-elev-2) 63%);
  background-size: 400% 100%; animation: dp-skeleton-ani 1.4s ease infinite; border-radius:.6rem; }

/* -------------------------------
   Hero
----------------------------------*/
.dp-hero{ border:1px solid var(--dp-border); border-radius:1rem; padding:3rem 1.25rem;
  background: radial-gradient(1200px 400px at 10% -20%, color-mix(in oklab, var(--dp-primary), white 88%), transparent), var(--dp-elev-1); }
.dp-cta > *{ margin-right:.5rem; }

/* -------------------------------
   Animation helpers
----------------------------------*/
@keyframes dp-fade-in{ from{ opacity:0 } to{ opacity:1 } }
@keyframes dp-slide-in{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform: translateY(0); } }
@keyframes dp-zoom-in{ from{ opacity:0; transform: scale(.96); } to{ opacity:1; transform: scale(1); } }
.dp-anim-fade-in{ animation: dp-fade-in .35s ease both; }
.dp-anim-fade-up{ animation: dp-slide-in .35s ease both; }
.dp-anim-slide-in{ animation: dp-slide-in .35s ease both; }
.dp-anim-zoom-in{ animation: dp-zoom-in .35s ease both; }


/* -------------------------------
   Breadcrumbs
----------------------------------*/
.dp-breadcrumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; font-size:.95rem; }
.dp-breadcrumbs a{ color:inherit; text-decoration:none; padding:.15rem .3rem; border-radius:.35rem; }
.dp-breadcrumbs a:hover{ background:var(--dp-elev-2); }
.dp-breadcrumbs .sep::before{ content:"/"; opacity:.55; margin:0 .2rem; }


/* -------------------------------
   Pagination
----------------------------------*/
.dp-pagination{ display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
.dp-pagination .dp-page{ display:inline-block; min-width:2rem; text-align:center; padding:.4rem .55rem;
  border:1px solid var(--dp-border); border-radius:.5rem; text-decoration:none; color:inherit; background: var(--dp-elev-1); }
.dp-pagination .dp-page:hover{ background: var(--dp-elev-2); }
.dp-pagination .dp-page.active{ background:var(--dp-primary); border-color: var(--dp-primary); color:#fff; }


/* -------------------------------
   Color Utilities (v3.1)
----------------------------------*/
.dp-bg-primary{ background: var(--dp-primary); color:#fff; }
.dp-bg-success{ background: var(--dp-success); color:#fff; }
.dp-bg-warning{ background: var(--dp-warning); color:#111; }
.dp-bg-danger{  background: var(--dp-danger);  color:#fff; }
.dp-bg-info{    background: var(--dp-info);    color:#fff; }

.dp-text-primary{ color: var(--dp-primary); }
.dp-text-success{ color: var(--dp-success); }
.dp-text-warning{ color: var(--dp-warning); }
.dp-text-danger{  color: var(--dp-danger); }
.dp-text-info{    color: var(--dp-info); }

.dp-border-primary{ border-color: var(--dp-primary) !important; }
.dp-border-success{ border-color: var(--dp-success) !important; }
.dp-border-warning{ border-color: var(--dp-warning) !important; }
.dp-border-danger{  border-color: var(--dp-danger) !important; }
.dp-border-info{    border-color: var(--dp-info) !important; }

/* Button variants */
.dp-btn-success{ background: var(--dp-success); color:#fff; border-color: color-mix(in oklab, var(--dp-success), black 20%); }
.dp-btn-success:hover{ filter: brightness(1.05); }
.dp-btn-warning{ background: var(--dp-warning); color:#111; border-color: color-mix(in oklab, var(--dp-warning), black 12%); }
.dp-btn-warning:hover{ filter: brightness(1.03); }
.dp-btn-danger{  background: var(--dp-danger); color:#fff; border-color: color-mix(in oklab, var(--dp-danger), black 18%); }
.dp-btn-danger:hover{ filter: brightness(1.05); }
.dp-btn-info{    background: var(--dp-info); color:#fff; border-color: color-mix(in oklab, var(--dp-info), black 18%); }
.dp-btn-info:hover{ filter: brightness(1.05); }

/* Alert variants */
.dp-alert.success{ border-color: color-mix(in oklab, var(--dp-success), var(--dp-border) 60%);
  background: color-mix(in oklab, var(--dp-success), white 90%); }
.dp-alert.warning{ border-color: color-mix(in oklab, var(--dp-warning), var(--dp-border) 50%);
  background: color-mix(in oklab, var(--dp-warning), white 90%); }
.dp-alert.danger{  border-color: color-mix(in oklab, var(--dp-danger), var(--dp-border) 50%);
  background: color-mix(in oklab, var(--dp-danger), white 90%); }
.dp-alert.info{    border-color: color-mix(in oklab, var(--dp-info), var(--dp-border) 50%);
  background: color-mix(in oklab, var(--dp-info), white 90%); }