/* ============================================================
   Digitizing Zone — shared design tokens
   ------------------------------------------------------------
   One palette for the whole product: marketing site, customer
   portal, team portal and admin. Every layout links this first
   and maps its own local variable names onto these tokens, so a
   colour only ever has to change here.

   Sampled from the brand logo -- deep indigo wordmark, violet mark,
   magenta accent -- so the interface and the mark share one ramp.
   The `--dz-` prefix keeps
   these clear of the per-layout variables that already exist.
   ============================================================ */

:root {
    color-scheme: light;

    /* Surfaces */
    --dz-canvas: #ffffff;
    --dz-canvas-2: #f7f5fb;
    --dz-canvas-3: #efebf7;
    --dz-paper: #ffffff;

    /* Ink */
    --dz-ink: #0c0030;
    --dz-ink-2: #240c54;
    --dz-muted: #6b6385;
    --dz-muted-2: #8a83a3;

    /* Lines */
    --dz-line: #e6e2f0;
    --dz-line-strong: #d5cfe6;

    /* Logo accents: violet mark, magenta highlight */
    --dz-thread: #a81878;
    --dz-thread-dark: #7d1a6d;
    --dz-thread-darker: #3c186c;
    --dz-thread-soft: #fbeaf4;
    --dz-thread-tint: #fdf6fb;
    --dz-spool: #301860;
    --dz-gold: #c9a227;

    /* Status */
    --dz-success: #1f7a52;
    --dz-success-soft: #e8f5ee;
    --dz-warning: #a2671b;
    --dz-warning-soft: #fdf3e3;
    --dz-danger: #a32c3f;
    --dz-danger-soft: #fbecee;

    /* Gradients */
    --dz-grad-primary: linear-gradient(135deg, #543090 0%, #b41878 100%);
    --dz-grad-bar: linear-gradient(90deg, #543090 0%, #b41878 100%);
    --dz-grad-dark:
        radial-gradient(120% 90% at 85% 0%, rgba(180, 24, 120, 0.38), transparent 55%),
        radial-gradient(90% 80% at 0% 100%, rgba(48, 24, 96, 0.75), transparent 60%),
        linear-gradient(135deg, #0c0030 0%, #240c54 48%, #3c186c 100%);
    --dz-grad-wash:
        radial-gradient(70% 55% at 82% 0%, rgba(168, 24, 120, 0.10), transparent 60%),
        radial-gradient(55% 45% at 0% 10%, rgba(48, 24, 96, 0.07), transparent 60%),
        #ffffff;

    /* Shadows */
    --dz-shadow-sm: 0 1px 2px rgba(12, 0, 48, 0.04);
    --dz-shadow: 0 1px 2px rgba(12, 0, 48, 0.04), 0 18px 40px -28px rgba(12, 0, 48, 0.28);
    --dz-shadow-lg: 0 24px 60px rgba(12, 0, 48, 0.14);
    --dz-shadow-primary: 0 12px 28px -12px rgba(84, 48, 144, 0.85);

    /* Type */
    --dz-font-display: "Plus Jakarta Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
    --dz-font-sans: "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

    /* Motion */
    --dz-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layout */
    --dz-radius: 18px;
    --dz-radius-sm: 12px;
    --dz-radius-pill: 999px;
    --dz-shell: 80rem;
}

/* ------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------ */
.dz-surface-dark {
    position: relative;
    background: var(--dz-grad-dark);
    color: #f7f1f8;
}

.dz-surface-dark h1,
.dz-surface-dark h2,
.dz-surface-dark h3 {
    color: #ffffff;
}

.dz-surface-brand {
    background-image: var(--dz-grad-bar);
    color: #ffffff;
}

.dz-surface-wash {
    background: var(--dz-grad-wash);
}

.dz-surface-tint {
    background: var(--dz-canvas-2);
}

/* ------------------------------------------------------------
   Primitives
   ------------------------------------------------------------ */
.dz-shell {
    width: 100%;
    max-width: var(--dz-shell);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .dz-shell { padding-inline: 2.5rem; }
}

.dz-rule {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, var(--dz-line) 8%, var(--dz-line) 92%, transparent);
}

.dz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dz-thread);
}

.dz-surface-dark .dz-eyebrow { color: #d9b0f0; }

.dz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--dz-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0.9rem 1.6rem;
    border: 0;
    border-radius: var(--dz-radius-pill);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.3s var(--dz-ease), box-shadow 0.3s var(--dz-ease), background-color 0.25s, color 0.25s;
}

.dz-btn-primary {
    background-image: var(--dz-grad-primary);
    color: #fff;
    box-shadow: var(--dz-shadow-primary);
}

.dz-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -14px rgba(84, 48, 144, 0.95);
}

.dz-btn-ghost {
    background: #fff;
    color: var(--dz-ink);
    box-shadow: inset 0 0 0 1px var(--dz-line);
}

.dz-btn-ghost:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(168, 24, 120, 0.45), 0 12px 26px -16px rgba(12, 0, 48, 0.4);
    color: var(--dz-thread);
}

.dz-btn-light {
    background: #fff;
    color: var(--dz-thread-darker);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.6);
}

.dz-btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.7);
}

.dz-card {
    background: var(--dz-paper);
    border: 1px solid var(--dz-line);
    border-radius: var(--dz-radius);
    box-shadow: var(--dz-shadow);
}

.dz-card-glass {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--dz-radius);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.dz-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: var(--dz-radius-pill);
    padding: 0.35rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--dz-thread-soft);
    color: var(--dz-thread-dark);
}

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
@keyframes dz-rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.dz-reveal { opacity: 0; }
.dz-reveal.in-view { animation: dz-rise-in 0.8s var(--dz-ease) forwards; }

@keyframes dz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.dz-marquee { animation: dz-marquee 45s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .dz-marquee { animation: none; }
    .dz-reveal { opacity: 1 !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

::selection { background: var(--dz-thread); color: #fff; }