/* ======================================================================
   elkiya design: the elkiya layer on top of the shared PnP Design patches.
   Look taken from the elkiyagroup.com admin theme (elkiya-group repo,
   public/admin-theme.css): blue #0158cb on white, soft grey page #f5f6f8,
   ink #0b0c10, muted #61646f, border #e2e3e9, pill controls, 20px cards,
   blue-tinted soft shadows, Plus Jakarta Sans (+ Google Sans Flex digits).
   Always dark (since 14 Nov 2026); the light rules stay for the sign-in and help pages.
   ====================================================================== */

/* theme-aware helpers the shared CSS is rewritten to use */
:root,.light{--ek-ink-rgb:11,12,16;--ek-accent:#0158cb;--ek-accent-rgb:1,88,203;--ek-on-accent:#fff;
  --ek-shadow:0 24px 64px -20px rgba(1,40,100,.22),0 2px 8px rgba(11,12,16,.06);
  --ek-thumb:#eef1f6}
.default,.dark{--ek-ink-rgb:255,255,255;--ek-accent:#4f94ef;--ek-accent-rgb:79,148,239;--ek-on-accent:#fff;
  --ek-shadow:0 24px 64px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  --ek-thumb:#1c1c1c}

/* Penpot's light theme on elkiya's neutrals */
.light{
  --color-accent-primary:#0158cb;--color-accent-primary-muted:#eaf2ff;--color-accent-secondary:#0149a8;
  --color-accent-tertiary:#0149a8;--color-accent-overlay:rgba(1,88,203,.6);--color-accent-select:rgba(1,88,203,.1);
  --color-accent-background-select:rgba(1,88,203,.7);--color-accent-action:#4f94ef;--color-accent-action-hover:#0158cb;
  --color-background-default:#fff;--color-background-primary:#fff;--color-background-secondary:#edeef2;
  --color-background-tertiary:#f5f6f8;--color-background-quaternary:#e2e3e9;--color-background-disabled:#edeef2;
  --color-accent-default:#edeef2;--color-foreground-primary:#0b0c10;--color-foreground-secondary:#61646f;
  --color-icon-default:#61646f;--color-shadow-dark:rgba(1,40,100,.08);--color-canvas:#f5f6f8}

/* ---------- sign-in: elkiya blue panel ---------- */
.main_ui_auth__login-illustration{
  background:url(../images/pnp-login.svg) right -18% top -12%/78% no-repeat,
             radial-gradient(110% 80% at 15% 0%,rgba(255,255,255,.22),transparent 55%),
             linear-gradient(160deg,#1a73e8 0%,#0158cb 50%,#01449d 100%)!important;
  border:0!important;box-shadow:0 30px 70px -30px rgba(1,88,203,.6)}
.main_ui_auth__login-illustration::before{content:"Design it.\AShip it."!important;
  background:linear-gradient(to bottom,#fff 50%,#b9d5ff 50%)!important;-webkit-background-clip:text!important;background-clip:text!important}
.main_ui_auth__login-illustration::after{content:"elkiya design workspace"!important;color:rgba(255,255,255,.74)!important}

/* ---------- elkiya shapes: pill buttons, softer cards and dialogs ---------- */
.main_ui_viewer_share_link__share-link-dialog,.main_ui_dashboard_team__modal-team-container{
  border-radius:20px!important;box-shadow:var(--ek-shadow)!important}
.light .main_ui_viewer_share_link__share-link-dialog,.light .main_ui_dashboard_team__modal-team-container{border-color:#e2e3e9!important}
.main_ui_dashboard_team__settings-container{border-radius:20px!important}
.main_ui_dashboard_grid__grid-item-thumbnail{border-radius:14px!important}
.light .main_ui_dashboard_grid__grid-item:hover .main_ui_dashboard_grid__grid-item-thumbnail{
  box-shadow:0 14px 30px -16px rgba(1,88,203,.38)!important}
.light .main_ui_dashboard_grid__grid-item-thumbnail{outline-color:#e2e3e9!important}
/* empty / pre-canvas thumbnails: soft grey with a faint dot grid in light, dark in dark */
.main_ui_dashboard_grid__grid-item-thumbnail.pnp-empty-thumb{
  background:var(--ek-thumb) radial-gradient(rgba(var(--ek-ink-rgb),.08) 1px,transparent 1.2px) 0 0/16px 16px!important}
.pnp-connect .pnp-tabs button[aria-selected=true]{color:var(--ek-on-accent)!important}
.light .main_ui_dashboard_team__empty-invitations{background:#fff!important}

/* ---------- loader + small marks: the elkiya diamond ---------- */
:root{--pnp-mark:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cstyle%3E.o,.i%7Btransform-box:fill-box;transform-origin:center;animation:a 1.6s cubic-bezier(.16,1,.3,1) infinite%7D.i%7Banimation-delay:.18s%7D@keyframes a%7B0%25,100%25%7Bopacity:.45;transform:scale(.9)%7D40%25%7Bopacity:1;transform:scale(1)%7D%7D@media (prefers-reduced-motion:reduce)%7B.o,.i%7Banimation:none%7D%7D%3C/style%3E%3Crect width='32' height='32' rx='8' fill='%230158CB'/%3E%3Cpath class='o' d='M16 6.2 25.8 16 16 25.8 6.2 16Z' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath class='i' d='M16 12.6 19.4 16 16 19.4 12.6 16Z' fill='%23fff'/%3E%3C/svg%3E")}

/* ---------- always dark (14 Nov): the shared dark standard is step 14 (brand/polish5.css);
   elkiya's blue is dark enough for white text, so primary buttons and hovered empty cards get white ---------- */
.default{--button-primary-foreground-color-rest:#fff;--button-primary-foreground-color-hover:#fff}
.default .main_ui_dashboard_placeholder__empty-project-card:hover,
.default .main_ui_dashboard_search__empty-project-card:hover{--color-card-title:#fff;--color-card-subtitle:rgba(255,255,255,.8)}