/**
 * Design tokens — valeurs centralisées du thème custom .arkt-*
 * Typographie : variables portfolio (portfolios-modules.css, style.php, headings.css).
 */

:root {
  /* ----- Palette maquettes Arktefakt (fonds noirs, violet accent, texte blanc) ----- */
  --arkt-mockup-bg: #000000;
  --arkt-mockup-surface: #121212;
  --arkt-mockup-text: #ffffff;
  --arkt-mockup-text-subtle: rgba(255, 255, 255, 0.88);
  --arkt-mockup-text-muted: #a0a0a0;
  --arkt-mockup-accent: #bc13fe;
  --arkt-mockup-accent-alt: #a229c8;
  --arkt-mockup-accent-strong: #9c27b0;
  --arkt-mockup-card-light: #f5f5f5;
  --arkt-mockup-pricing-purple-deep: #1a0528;
  --arkt-mockup-pricing-purple-end: #2d0a3d;

  /* ----- Typographie (base portfolio, titres / sous-titres légèrement resserrés vs gabarit) ----- */
  --arkt-type-h1-size: calc(var(--portfolios-heading-primary-size, 1.85rem) * 0.88);
  --arkt-type-h1-line: calc(var(--arkt-type-h1-size) + 2px);
  --arkt-type-h1-weight: var(--portfolios-font-weight-bold, 700);
  /* Couleurs de titres sur fonds sombres = maquettes (texte blanc), indépendant du thème portfolio */
  --arkt-type-h1-color: var(--arkt-mockup-text);

  /* Sous-titres : proche du « secondary » portfolio (+8 % seulement, avant +20 %) */
  --arkt-type-h2-size: calc(var(--portfolios-heading-secondary-size, 1.3rem) * 1.08);
  --arkt-type-h2-line: calc(var(--arkt-type-h2-size) + 10px);
  --arkt-type-h2-weight: var(--portfolios-font-weight-bold, 700);
  --arkt-type-h2-color: var(--arkt-mockup-text);

  --arkt-type-h3-size: var(--portfolios-font-size-md);
  --arkt-type-h3-line: 1.35;
  --arkt-type-h3-weight: var(--portfolios-font-weight-bold, 700);
  --arkt-type-h3-color: var(--arkt-mockup-text);

  --arkt-type-subtle-weight: 300;
  --arkt-type-caption-size: var(--portfolios-font-size-sm);
  --arkt-type-nav-size: 0.95rem;
  --arkt-type-brand-size: 1.15rem;
  --arkt-type-footer-brand-size: 0.92rem;
  --arkt-type-form-heading-size: 1.2rem;
  --arkt-type-price-base-size: 1.25rem;
  --arkt-type-price-note-size: 0.9rem;
  --arkt-type-price-unit-factor: 0.55em;
  --arkt-type-feature-arrow-size: 1.1rem;
  --arkt-type-project-body-size: 0.95rem;
  --arkt-type-project-headline-weight: 800;
  --arkt-type-footer-bottom-size: 0.78rem;

  --arkt-font-family-sans: var(--portfolios-font-family-base, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

  /* ----- Couleurs interface .arkt-* (maquettes ; surfaces figées) ----- */
  --arkt-bg: var(--arkt-mockup-bg);
  --arkt-bg-elevated: var(--arkt-mockup-surface);
  --arkt-card-bg: var(--arkt-mockup-surface);
  /* Fond page hub (hub-color.css — dégradé radial discret) */
  --arkt-hub-bg-main: radial-gradient(circle at 15% 50%, #1d1d20, #131314 50%, #080809 100%);
  --arkt-hub-bg-main-fallback: #080809;
  --arkt-text: var(--arkt-mockup-text);
  --arkt-text-muted: var(--arkt-mockup-text-muted);
  --arkt-text-on-light: #0a0a0a;
  --arkt-text-on-light-muted: #333333;
  --arkt-text-on-featured-muted: #555555;

  --arkt-accent: var(--arkt-mockup-accent);
  --arkt-accent-strong: var(--arkt-mockup-accent-strong);
  /* Violet adouci pour intertitres / kickers (hors boutons et liens d’action) */
  --arkt-accent-title: color-mix(in srgb, var(--arkt-mockup-accent) 38%, var(--arkt-mockup-text-subtle) 62%);
  /* Titres d’offre sur fond clair (carte vedette) */
  --arkt-accent-heading-light: color-mix(
    in srgb,
    var(--arkt-mockup-accent-strong) 36%,
    var(--arkt-text-on-light-muted) 64%
  );

  --arkt-color-white: #ffffff;
  --arkt-color-black: #000000;
  --arkt-color-ok: #5eead4;
  --arkt-color-ok-soft: #a7f3d0;
  --arkt-color-err: #f87171;
  --arkt-color-err-soft: #fecaca;
  --arkt-color-success-bg: rgba(16, 185, 129, 0.12);
  --arkt-color-success-border: rgba(16, 185, 129, 0.35);
  --arkt-color-error-bg: rgba(248, 113, 113, 0.1);
  --arkt-color-error-border: rgba(248, 113, 113, 0.35);
  --arkt-color-featured-card-bg: var(--arkt-mockup-card-light);
  --arkt-color-btn-light-text: var(--arkt-text-on-light);
  --arkt-color-project-light-bg: #ffffff;
  --arkt-color-glow-teal: #0d3d32;
  --arkt-color-glow-blue: #0a1f4a;
  --arkt-color-header-bg: rgba(0, 0, 0, 0.72);
  /* Surface header / dropdown — alignée hub-color (--arktefakt-bg-surface-secondary) */
  --arkt-header-surface-bg: rgba(20, 20, 22, 0.9);
  --arkt-color-dropdown-bg: #1a1a1a;
  --arkt-color-pricing-grad-mid: var(--arkt-mockup-pricing-purple-deep);
  --arkt-color-pricing-grad-end: var(--arkt-mockup-pricing-purple-end);

  --arkt-rgba-border-on-dark: rgba(255, 255, 255, 0.06);
  --arkt-rgba-border-on-dark-soft: rgba(255, 255, 255, 0.08);
  --arkt-rgba-border-on-dark-medium: rgba(255, 255, 255, 0.1);
  --arkt-rgba-border-on-dark-nav: rgba(255, 255, 255, 0.12);
  --arkt-rgba-border-on-dark-strong: rgba(255, 255, 255, 0.14);
  --arkt-rgba-border-white-22: rgba(255, 255, 255, 0.22);
  --arkt-rgba-border-white-25: rgba(255, 255, 255, 0.25);
  --arkt-rgba-border-white-45: rgba(255, 255, 255, 0.45);
  --arkt-rgba-border-white-55: rgba(255, 255, 255, 0.55);
  --arkt-rgba-border-white-65: rgba(255, 255, 255, 0.65);
  --arkt-rgba-white-06: rgba(255, 255, 255, 0.06);
  --arkt-rgba-white-08: rgba(255, 255, 255, 0.08);
  --arkt-rgba-white-10: rgba(255, 255, 255, 0.1);
  --arkt-rgba-white-12: rgba(255, 255, 255, 0.12);
  --arkt-rgba-white-25: rgba(255, 255, 255, 0.25);
  --arkt-rgba-white-35: rgba(255, 255, 255, 0.35);
  --arkt-rgba-white-45: rgba(255, 255, 255, 0.45);
  --arkt-rgba-white-50: rgba(255, 255, 255, 0.5);
  --arkt-rgba-white-60: rgba(255, 255, 255, 0.6);
  --arkt-rgba-white-65: rgba(255, 255, 255, 0.65);
  --arkt-rgba-white-75: rgba(255, 255, 255, 0.75);
  --arkt-rgba-white-85: rgba(255, 255, 255, 0.85);
  --arkt-rgba-white-88: rgba(255, 255, 255, 0.88);
  --arkt-rgba-white-90: rgba(255, 255, 255, 0.9);
  --arkt-rgba-white-92: rgba(255, 255, 255, 0.92);
  --arkt-rgba-black-025: rgba(0, 0, 0, 0.25);
  --arkt-rgba-black-035: rgba(0, 0, 0, 0.35);
  --arkt-rgba-black-045: rgba(0, 0, 0, 0.45);
  --arkt-rgba-black-06-on-white: rgba(0, 0, 0, 0.06);
  --arkt-rgba-black-12-on-white: rgba(0, 0, 0, 0.12);
  --arkt-rgba-black-35-shadow: rgba(0, 0, 0, 0.35);
  --arkt-rgba-black-45-shadow: rgba(0, 0, 0, 0.45);
  --arkt-rgba-black-65-caption: rgba(0, 0, 0, 0.65);
  --arkt-rgba-valid-border: rgba(94, 234, 212, 0.45);
  --arkt-rgba-input-bg: rgba(0, 0, 0, 0.35);

  /* ----- Bordures — vocabulaire hub (thème sombre, hub-color.css) ----- */
  --arkt-border-width: 3px;
  --arkt-border-main: rgba(255, 255, 255, 0.14);
  --arkt-border-soft-color: color-mix(in srgb, var(--arkt-border-main) 45%, transparent);
  --arkt-border-soft-hover-color: color-mix(in srgb, var(--arkt-border-main) 72%, transparent);
  --arkt-border-separator-color: color-mix(in srgb, var(--arkt-border-main) 38%, transparent);
  --arkt-glass-border-color: rgba(255, 255, 255, 0.04);
  --arkt-glass-border-color-luminous: rgba(255, 255, 255, 0.20);
  --arkt-glass-border: var(--arkt-border-width) solid var(--arkt-glass-border-color);
  --arkt-glass-border-luminous: var(--arkt-border-width) solid var(--arkt-glass-border-color-luminous);
  --arkt-glass-border-soft: var(--arkt-border-width) solid var(--arkt-border-soft-color);
  --arkt-glass-border-soft-hover: var(--arkt-border-width) solid var(--arkt-border-soft-hover-color);
  --arkt-border-separator: var(--arkt-border-width) solid var(--arkt-border-separator-color);
  --arkt-glass-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.16);
  --arkt-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.22);
  --arkt-glass-shadow-cta: 0 3px 12px rgba(0, 0, 0, 0.28);

  /* ----- Bordure d’interface page (alias glass — cartes, séparateurs, modales) ----- */
  --arkt-page-border-width: var(--arkt-border-width);
  --arkt-page-border-color: var(--arkt-glass-border-color);
  --arkt-page-border: var(--arkt-glass-border);

  /* ----- Rayons & ombres ----- */
  --arkt-radius-pill: var(--portfolios-border-radius-xl, 999px);
  --arkt-radius-card: 15px;
  --arkt-radius-input: var(--portfolios-border-radius-m, 10px);
  --arkt-radius-scroll-hint: 50%;
  --arkt-radius-social: 50%;
  --arkt-shadow-dropdown: 0 12px 32px var(--arkt-rgba-black-45-shadow);
  --arkt-shadow-featured-card: 0 12px 40px var(--arkt-rgba-black-35-shadow);
  --arkt-card-shadow: var(--arkt-glass-shadow-sm);
  --arkt-card-hover-transform: translateY(-3px);
  /* Survol vignettes / cartes : neutre (surface + ombre), sans teinte accent */
  --arkt-card-hover-bg: color-mix(in srgb, var(--arkt-card-bg) 82%, var(--arkt-rgba-white-10) 18%);
  --arkt-card-hover-border-color: var(--arkt-glass-border-color-luminous);
  --arkt-card-hover-shadow: var(--arkt-glass-shadow-cta);
  --arkt-thumb-hover-filter: brightness(1.04);
  --arkt-vignette-category-hover-bg: var(--arkt-header-pill-bg-hover);
  --arkt-vignette-category-hover-border: var(--arkt-glass-border-color-luminous);

  /* ----- Header flottant (barre fixe, marges viewport) ----- */
  --arkt-header-float-inset: 0.75rem;
  /* Gouttières latérales header + main (plus larges que l’écart haut de la barre) */
  --arkt-page-side-gutter: clamp(1.125rem, 3vw, 2rem);
  --arkt-page-gutter: var(--arkt-page-side-gutter);
  --arkt-page-gutter-mobile: var(--arkt-page-side-gutter);
  --arkt-page-content-max-width: min(
    var(--arkt-showcase-max-width, 1500px),
    calc(100% - (var(--arkt-page-side-gutter) * 2))
  );
  /* Padding interne du header (.padding-left = 20px) — même cadre pour le contenu */
  --arkt-header-inner-padding: 1.25rem;
  --arkt-header-float-radius: var(--arkt-radius-card);
  --arkt-header-bar-min-height: 3.5rem;
  /* Barre repliée mobile : padding interne (.arkt-header__inner) + hamburger 2.75rem */
  --arkt-header-bar-mobile-height: 4.05rem;
  --arkt-header-float-shadow: var(--arkt-glass-shadow-sm);
  /* Marge contenu sous le header (tronc commun big-padding-top = 45px) */
  --arkt-hero-content-gap: 45px;
  --arkt-hero-content-gap-mobile: clamp(1.75rem, 4.5vw, 2.75rem);
  /* Espace sous le header flottant — desktop : inset haut + inset bas + barre ; mobile : recalcul ≤1100px dans main.css */
  --arkt-header-overlap-offset: calc(
    env(safe-area-inset-top, 0px) + (var(--arkt-header-float-inset) * 2) + var(--arkt-header-bar-min-height)
  );

  /* ----- Mise en page & effets ----- */
  --arkt-blur-header: 12px;
  --arkt-blur-hero-bg: 3px;
  --arkt-blur-glow: 80px;
  --arkt-hero-overlay-angle: 180deg;
  --arkt-hero-overlay-1: rgba(0, 0, 0, 0.14);
  --arkt-hero-overlay-2: rgba(0, 0, 0, 0.26);
  --arkt-hero-overlay-3: rgba(0, 0, 0, 0.52);
  --arkt-hero-overlay-center-1: rgba(0, 0, 0, 0.24);
  --arkt-hero-overlay-center-2: rgba(0, 0, 0, 0.36);
  --arkt-hero-overlay-center-3: rgba(0, 0, 0, 0.48);
  --arkt-caption-grad-angle: 0deg;
  --arkt-faq-arcs-border-inset-inner: 8%;
  --arkt-faq-arcs-border-inset-outer: 16%;
  --arkt-opacity-glow-teal: 0.35;
  --arkt-opacity-glow-blue: 0.4;

  --arkt-hero-min-height: 72vh;
  --arkt-hero-secondary-min-height: 52vh;
  --arkt-showcase-max-width: 1500px;
  /* Colonne de lecture (.limited-width grid.css = 1000px) */
  --arkt-content-limited-width: 1000px;
  --arkt-project-card-min-height: 280px;
  --arkt-project-card-image-min-height: 320px;
  --arkt-project-card-mobile-min-height: 220px;
  --arkt-contact-aside-min-height: 280px;
  --arkt-contact-aside-max-height: 640px;

  --arkt-z-header: 100;
  --arkt-z-hero-content: 2;
  --arkt-z-hero-overlay: 1;
  --arkt-z-hero-bg: 0;
  --arkt-z-scroll-hint: 3;

  --arkt-motion-chev-duration: 1.8s;
  --arkt-btn-transition: 0.2s ease;
  --arkt-btn-transform-duration: 0.15s ease;
  --arkt-accordion-chev-duration: 0.2s ease;

  --arkt-filter-btn-hover: brightness(1.08);
  --arkt-filter-btn-light-hover: brightness(0.95);
  --arkt-filter-btn-disabled: grayscale(0.2);

  /*
   * CTA / hub sombre — mêmes valeurs que vitrine/manage/assets/hub/css/themes/hub-color.css
   * (.arkt-btn--primary / secondary dans main.css du hub).
   */
  --arkt-hub-color-primary: #bfa3ee;
  --arkt-hub-glass-blur: blur(12px);
  /* Texte des boutons marketing (.arkt-btn*, promo visiteur) : pas de gras */
  --arkt-btn-font-weight: var(--portfolios-font-weight-normal, 400);

  --arkt-btn-cta-bg: rgba(109, 66, 195, 0.95);
  --arkt-btn-cta-bg-hover: rgba(130, 91, 207, 1);
  --arkt-btn-cta-text: #ffffff;
  --arkt-btn-cta-border-color: rgba(255, 255, 255, 0.18);
  --arkt-btn-cta-border: 2px solid var(--arkt-btn-cta-border-color);
  --arkt-btn-cta-shadow: var(--arkt-glass-shadow-xs);
  --arkt-btn-cta-shadow-hover: var(--arkt-glass-shadow-sm);
  /* Bouton secondaire / ghost : fond type --arktefakt-bg-element + bordure soft */
  --arkt-btn-ghost-bg: rgba(255, 255, 255, 0.05);
  --arkt-btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
  --arkt-btn-ghost-border: var(--arkt-glass-border-soft);

  /*
   * Formulaires hub (editor.css + hub-color.css, thème sombre).
   */
  --arkt-hub-color-danger: #EF9A9A;
  --arkt-hub-color-success: #D5FFEA;
  --arkt-hub-bg-success: rgba(213, 255, 234, 0.15);
  --arkt-form-surface-bg: rgba(34, 34, 36, 0.72);
  --arkt-form-field-bg: rgba(255, 255, 255, 0.05);
  --arkt-form-field-bg-focus: rgba(255, 255, 255, 0.12);
  --arkt-form-field-border-width: 2px;
  --arkt-form-field-border-color: var(--arkt-border-main);
  --arkt-form-field-radius: 10px;
  --arkt-form-field-padding: 12px 15px;
  --arkt-form-field-font-size: 14px;
  --arkt-form-field-blur: blur(6px);
  --arkt-form-label-color: #e2e2e2;
  --arkt-form-placeholder-opacity: 0.38;

  --arkt-scale-hero-bg: 1.04;
  --arkt-space-heading-split-gap: 0.35rem;
  --arkt-space-cta-gap: 1rem;
  --arkt-space-faq-actions-gap: 0.75rem;
  /* Réponses FAQ : interligne et blancs un peu plus généreux que le corps de page */
  --arkt-faq-answer-line-height: 1.72;
  --arkt-faq-answer-paragraph-gap: 0.65rem;
  --arkt-space-header-inner-gap: 1rem;
  --arkt-space-nav-gap-y: 0.25rem;
  --arkt-space-nav-gap-x: 0.5rem;
  --arkt-space-header-actions-gap: 0.65rem;

  /* Liens / boutons header — pastilles type maquette (fond discret + survol plus clair) */
  --arkt-header-pill-bg: rgba(255, 255, 255, 0.07);
  --arkt-header-pill-bg-hover: rgba(255, 255, 255, 0.16);
  --arkt-header-pill-border: var(--arkt-border-soft-color);
  --arkt-header-pill-signup-bg: rgba(255, 255, 255, 0.06);
  --arkt-header-pill-signup-bg-hover: rgba(255, 255, 255, 0.14);
  --arkt-space-footer-brand-gap: 1.25rem;
  --arkt-space-footer-links-mb: 0.5rem;
  --arkt-space-footer-social-gap: 0.75rem;
  --arkt-space-form-grid-gap: 2rem;
  --arkt-size-scroll-hint: 2.5rem;
  --arkt-size-chev: 0.5rem;
  --arkt-size-chev-border: 2px;
  --arkt-size-dropdown-chev: 0.35rem;
  --arkt-size-social-btn: 2.25rem;
  --arkt-size-social-icon: 1rem;
  --arkt-opacity-sidecard: 0.9;
  --arkt-opacity-pricing-decor: 0.55;
  --arkt-opacity-footer-arcs: 0.7;
  --arkt-opacity-faq-arcs-outer: 0.9;
  --arkt-opacity-dropdown-summary: 0.85;
  --arkt-opacity-btn-disabled: 0.45;

  --arkt-footer-arcs-inset-h: 10%;
  --arkt-footer-arcs-inset-v: -40%;
}