/* tokens/colors.css */
:root{
  /* ---- Base palette ---- */
  --canvas:#FFFBFD;
  --pink:#FFE3F6;
  --sand:#EFCDAF;
  --raspberry:#D53F79;
  --violet:#6212FA;
  --ink:#1F0A2E;
  --muted:#6B5570;
  --deep:#14062B;
  --hairline:#EADFE8;
  --white:#FFFFFF;

  /* ---- Derived states ---- */
  --violet-press:#5210D6;      /* darkened for hover/press, never lightened */
  --violet-tint:#6212FA1F;     /* ~12% — badge + focus-ring fills */
  --raspberry-tint:#D53F791F;  /* ~12% — badges, highlighted table column */
  --sand-tint:#EFCDAF52;
  --hairline-deep:#FFFFFF1F;   /* hairline on deep/ink surfaces */

  /* ---- Semantic surfaces ---- */
  --surface-page:var(--canvas);
  --surface-hero:var(--pink);
  --surface-warm:var(--sand);
  --surface-card:var(--white);
  --surface-card-alt:var(--canvas);
  --surface-closing:var(--deep);
  --surface-inset:#FFF5FB;

  /* ---- Semantic text ---- */
  --text-strong:var(--ink);
  --text-body:var(--ink);
  --text-secondary:var(--muted);
  --text-label:var(--muted);
  --text-accent:var(--raspberry);
  --text-on-deep:#F7EEF6;
  --text-on-deep-secondary:#B9A9C4;
  --text-link:var(--violet);

  /* ---- Semantic lines ---- */
  --border-hairline:var(--hairline);
  --border-strong:var(--ink);
  --border-on-deep:var(--hairline-deep);
  --focus-ring:var(--violet);

  /* ---- Actions ---- */
  --action-primary-bg:var(--violet);
  --action-primary-fg:var(--white);
  --action-primary-bg-hover:var(--violet-press);
  --action-secondary-fg:var(--ink);
  --action-secondary-border:var(--ink);

  /* ---- AI colleague accents ----
     Each colleague owns one hand of the logo mark in this colour.
     The final three are deliberately desaturated: "hamarosan" / coming soon. */
  --agent-mia:#6212FA;
  --agent-szilvia:#FF9EC4;
  --agent-olivia:#A855D8;
  --agent-adel:#7C5CF0;
  --agent-zoltan:#EFB07A;
  --agent-ede:#D53F79;
  --agent-krisztian:#4FA3A5;
  --agent-bendeguz:#8B87A8;
  --agent-gabor:#4C1D95;

  /* ---- Soft background shapes ---- */
  --blob-1:#FFE3F6;
  --blob-2:#EFCDAF;
  --blob-3:#D9C6FF;
}

/* tokens/typography.css */
:root{
  --font-sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:var(--font-sans);
  --font-body:var(--font-sans);

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-display:600;
  --weight-bold:700;

  /* Display XL — one per page, the main expressive device */
  --text-display-xl-size:clamp(48px,8vw,112px);
  --text-display-xl-weight:600;
  --text-display-xl-tracking:-0.035em;
  --text-display-xl-leading:0.95;

  /* Display L — section headlines */
  --text-display-l-size:clamp(36px,5vw,72px);
  --text-display-l-weight:600;
  --text-display-l-tracking:-0.03em;
  --text-display-l-leading:1;

  /* Heading — card titles, sub-sections */
  --text-heading-size:clamp(24px,3vw,40px);
  --text-heading-weight:600;
  --text-heading-tracking:-0.02em;
  --text-heading-leading:1.15;

  /* Body L — lead paragraphs under headlines */
  --text-body-l-size:19px;
  --text-body-l-weight:400;
  --text-body-l-tracking:-0.005em;
  --text-body-l-leading:1.55;

  /* Body — 17px floor. The audience is 35–60. Never go smaller. */
  --text-body-size:17px;
  --text-body-weight:400;
  --text-body-tracking:0;
  --text-body-leading:1.6;

  /* Label — small caps eyebrow above headlines */
  --text-label-size:11px;
  --text-label-weight:500;
  --text-label-tracking:0.14em;
  --text-label-leading:1.4;
  --text-label-transform:uppercase;

  --measure:65ch;
}

/* tokens/spacing.css */
:root{
  /* 8px base rhythm */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-6:48px;
  --space-8:64px;
  --space-12:96px;
  --space-18:140px;

  --container-max:1140px;
  --container-pad:32px;
  --container-pad-mobile:22px;

  --grid-columns:12; /* @kind other */
  --grid-gutter:24px;

  --section-pad-y:140px;
  --section-pad-y-mobile:88px;

  --card-pad:32px;
  --card-pad-compact:28px;
}

/* tokens/effects.css */
:root{
  --radius-card:20px;
  --radius-input:12px;
  --radius-pill:999px;
  --radius-sm:8px;
  --radius-lg:28px;

  --border-width:1px;

  /* No heavy shadows, ever. Only a soft wide lift on card hover. */
  --shadow-none:none;
  --shadow-lift:0 18px 44px -20px #1F0A2E1F;
  --shadow-lift-strong:0 26px 60px -24px #1F0A2E29;
  --shadow-ring:0 0 0 3px var(--violet-tint);

  --blur-shape:60px;
  --blur-shape-lg:90px;
}

/* tokens/motion.css */
:root{
  --ease-brand:cubic-bezier(0.2,0.8,0.2,1); /* @kind other */
  --duration-hover:240ms; /* @kind other */
  --duration-hover-slow:300ms; /* @kind other */
  --duration-entrance:700ms; /* @kind other */
  --duration-entrance-slow:800ms; /* @kind other */
  --stagger-step:80ms; /* @kind other */
  --entrance-rise:16px;
  --drift-loop:9s; /* @kind other */

  --transition-hover:all var(--duration-hover) var(--ease-brand);
}
@keyframes sziaRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes sziaDrift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(3%,-4%,0) scale(1.06)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}

/* base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body-size);font-weight:var(--text-body-weight);line-height:var(--text-body-leading);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-strong);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--violet-press);text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
button{font-family:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--pink);color:var(--ink)}

/* --- Primitive layout helpers consumers may use directly --- */
.szia-container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.szia-section{padding:var(--section-pad-y) 0}
.szia-section--pink{background:var(--surface-hero)}
.szia-section--sand{background:var(--surface-warm)}
.szia-section--canvas{background:var(--surface-page)}
.szia-section--deep{background:var(--surface-closing);color:var(--text-on-deep)}
.szia-section--deep h1,.szia-section--deep h2,.szia-section--deep h3{color:var(--text-on-deep)}
.szia-label{font-size:var(--text-label-size);font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);text-transform:uppercase;color:var(--text-label)}
.szia-measure{max-width:var(--measure)}
@media(max-width:720px){
  .szia-container{padding:0 var(--container-pad-mobile)}
  .szia-section{padding:var(--section-pad-y-mobile) 0}
}

/* Static-export layer on top of the SziaAI design-system tokens (prepended by the build). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary > svg:last-child { transition: transform var(--duration-hover) var(--ease-brand); }
details[open] > summary > svg:last-child { transform: rotate(180deg); }
details[data-menu][open] > summary { background: var(--surface-inset) !important; }

.skip { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 17px; font-weight: 500; }
.skip:focus { top: 16px; color: var(--white); }
.label { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-label); }

/* Button – mirrors SziaAIDesignSystem Button */
.btn { font-family: var(--font-sans); font-size: 17px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: var(--transition-hover); text-decoration: none; white-space: nowrap; padding: 14px 28px; }
.btn-sm { padding: 10px 20px; }
.btn-lg { padding: 18px 34px; font-size: 19px; }
.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); transform: translateY(-1px); text-decoration: none; }
.btn-primary:active { transform: none; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: #1F0A2E0A; color: var(--ink); transform: translateY(-1px); text-decoration: none; }
@media (max-width: 480px) { .btn-lg { width: 100%; justify-content: center; white-space: normal; } }

/* Responsive switches replacing the Design Component's width-driven state */
@media (max-width: 959px) { .r-desk { display: none !important; } .r-mob { display: block !important; } }
@media (max-width: 1179px) { .r-links { display: none !important; } }
@media (max-width: 560px) { .r-tlmark { display: none !important; } }
@media (max-width: 767px) { [data-wf-steps], [data-wf-controls] { display: none !important; } }

/* Entrances (opacity + independent translate so inline rotations survive) */
@keyframes sziaFadeUp { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.js [data-reveal] { opacity: 0; }
.js [data-reveal].in { animation: sziaFadeUp var(--duration-entrance) var(--ease-brand) both; }
.js [data-reveal="2"].in { animation-delay: 80ms; }
.js [data-reveal="3"].in { animation-delay: 160ms; }
.js [data-reveal="4"].in { animation-delay: 240ms; }

@media print {
  header[data-site-header] { position: static !important; }
  [data-wf-controls], [data-wf-steps], details[data-menu], .skip { display: none !important; }
  [data-wf-stage] { display: block !important; }
  .js [data-reveal] { opacity: 1 !important; }
  section { break-inside: auto; }
}

/* hover states compiled from style-hover */
.hv1:hover{color: var(--white) !important;text-decoration: none !important}
.hv2:hover{background: var(--surface-inset) !important;color: var(--violet-press) !important;text-decoration: none !important}
.hv3:hover{color: var(--violet-press) !important;text-decoration: underline !important;text-underline-offset: 3px !important}
.hv4:hover{background: var(--surface-inset) !important;text-decoration: none !important}
.hv5:hover{background: var(--violet-press) !important;color: var(--white) !important;text-decoration: none !important}
.hv6:hover{background: #1F0A2E0A !important}
.hv7:hover{background: var(--hairline-deep) !important;text-decoration: none !important}
.hv8:hover{color: var(--pink) !important;text-decoration: underline !important;text-underline-offset: 4px !important}
.hv9:hover{background: var(--hairline-deep) !important}
.hv10:hover{color: var(--pink) !important;text-decoration: underline !important;text-underline-offset: 3px !important}
.hv11:hover{color: var(--violet-press) !important;text-decoration: none !important}