/* ==========================================================================
   Velt Editorial Light Design System — Canonical Token Layer (tokens.css)
   Source of truth: components/home-new/styles.css & design-guides/DESIGN.md
   Strictly locked to Light Mode (color-scheme: light).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Colors: core ───────────────────────────────────────── */
  --sp-color-ink:           #26251e;
  --sp-color-ink-soft:      #3a3934;
  --sp-color-ink-hover:     #141414;
  --sp-color-dark-2:        #1e1d17;
  --sp-color-cream:         #f7f7f4;
  --sp-color-white:         #ffffff;
  --sp-color-accent:        #f54e00;
  --sp-color-accent-muted:  #b8400a;

  /* ── Colors: text ───────────────────────────────────────── */
  --sp-color-text:          var(--sp-color-ink);
  --sp-color-text-strong:   rgba(0, 0, 0, 0.65);
  --sp-color-text-muted:    #7a7974;
  --sp-color-text-subtle:   #a1a19f;
  --sp-color-text-faint:    #8f8e89;
  --sp-color-text-on-dark:  var(--sp-color-cream);
  --sp-color-text-on-dark-muted: #c4c3be;
  --sp-color-text-on-dark-muted-rgb: rgba(255, 255, 255, 0.8);
  --sp-color-text-on-accent: #ffffff;

  /* ── Colors: surfaces ───────────────────────────────────── */
  --sp-bg-page:             var(--sp-color-white);
  --sp-bg-section-alt:      var(--sp-color-cream);
  --sp-bg-wash:             #f1f0ec;
  --sp-bg-card:             var(--sp-color-white);
  --sp-bg-card-dark:        var(--sp-color-ink);
  --sp-bg-nav:              var(--sp-color-white);
  --sp-bg-soft-hover:       var(--sp-color-cream);
  --sp-bg-surface-muted:    rgba(0, 0, 0, 0.04);
  --sp-bg-accent-subtle:    rgba(245, 78, 0, 0.12);
  --sp-bg-accent-focus:     rgba(245, 78, 0, 0.08);
  --sp-bg-pillar:           #1e1d17;
  --sp-bg-webhook:          #0f1021;
  --sp-bg-green-highlight:  rgba(19, 130, 82, 0.16);
  --sp-bg-suggestion-del:   #fde8e0;
  --sp-bg-suggestion-ins:   #dff3e8;
  --sp-bg-skeleton:         #ededeb;
  --sp-bg-skeleton-dark:    #efefed;

  /* ── Colors: borders ────────────────────────────────────── */
  --sp-border-default:      #d9d5cf;
  --sp-border-subtle:       #e6e5e0;
  --sp-border-faint:        #ebe9e4;
  --sp-border-card:         rgba(0, 0, 0, 0.08);
  --sp-border-on-dark:      rgba(255, 255, 255, 0.12);
  --sp-border-demo:         #e4e4e2;
  --sp-border-demo-alt:     #e6e6e4;
  --sp-border-demo-faint:   #f0f0ee;
  --sp-border-width:        1px;

  /* ── Colors: semantic status & feature tokens ───────────── */
  --sp-color-accent-ink:          #8f3208;
  --sp-color-accent-soft:         #fdeee6;
  --sp-color-accent-wash:         #f7d2bc;
  --sp-color-accent-border-muted: #f0b89c;
  --sp-color-green-approval:      #128352;
  --sp-color-approve-soft:        #dff3e8;
  --sp-color-reject:              #c0392b;
  --sp-color-reject-soft:         #fde8e0;
  --sp-color-amber:               #c08532;
  --sp-color-amber-ink:           #7d521b;
  --sp-color-amber-soft:          #f6ecd6;
  --sp-color-teal:                #0e9cb5;
  --sp-color-info-soft:           #e3f2fd;
  --sp-color-dark-line:           #46443c;

  /* ── Colors: collaboration demo accents ([Demo-Preset-SDK] ONLY) ── */
  --sp-color-purple:          #625DF5;
  --sp-color-pink:            #E934BF;
  --sp-color-green:           #0D9A5D;
  --sp-color-green-ui:        #34785c;
  --sp-color-orange:          #FF7162;
  --sp-color-yellow:          #FFCD2E;
  --sp-color-blue:            #6fa3f7;
  --sp-color-success:         #4ade80;
  --sp-color-strike:          #9a9892;
  --sp-color-pink-muted:      #c0508f;
  --sp-color-presence-online: #2bb673;
  --sp-color-kebab:           #b2b1ac;
  --sp-color-timeline-dash:   #cfcbc4;
  --sp-color-connector-green: #6cae92;
  --sp-color-connector-ink:   #1c1c28;
  --sp-color-syntax-orange:   #e0913f;
  --sp-color-thread-line:     #a8c4ba;
  --sp-color-success-border:  #4ade80;
  --sp-color-trace-target:    #0d7c8a;
  --sp-color-trace-approver:  #a8702a;
  --sp-color-trace-target-bg: #36c5d6;
  --sp-color-trace-approver-bg: #e3a14e;

  /* ── Code syntax tokens ─────────────────────────────────── */
  --sp-code-bg:               #1e1d17;
  --sp-code-fg:               #d9d5cf;
  --sp-code-tag:              #e0913f;
  --sp-code-attr:             #6fa3f7;
  --sp-code-str:              #7fcf9f;
  --sp-code-cm:               #8a897f;
  --sp-code-kw:               #e58fd0;

  /* ── Component sizes ────────────────────────────────────── */
  --sp-size-eyebrow-dot:        6px;
  --sp-size-logomark:           22px;
  --sp-avatar-size:             30px;
  --sp-logo-gap:                72px;
  --sp-logo-height:             24px;
  --sp-integ-logo-size:         16px;
  --sp-integ-logo-wide-max:     52px;
  --sp-trust-header-gap-bottom: 28px;
  --sp-text-avatar-xs:          9px;
  --sp-nav-height:              52px;

  /* ── Typography (Native System Font Stack) ── */
  --sp-font-body:             -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", sans-serif;
  --sp-font-heading:          -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", sans-serif;
  --sp-font-league:           -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", sans-serif;
  --sp-font-match:            -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Tahoma, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Open Sans", sans-serif;
  --sp-font-mono:             ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --sp-text-hero:             clamp(34px, 8vw, 62px);
  --sp-text-section:          clamp(26px, 5vw, 36px);
  --sp-text-card:             clamp(20px, 2.6vw, 24px);
  --sp-text-quote:            clamp(24px, 4.5vw, 32px);
  --sp-text-cta:              clamp(30px, 7vw, 54px);
  --sp-text-body-lg:          18px;
  --sp-text-lead:             17px;
  --sp-text-body:             16px;
  --sp-text-body-md:          14.5px;
  --sp-text-label:            14px;
  --sp-text-body-sm-plus:     13.5px;
  --sp-text-body-sm:          13px;
  --sp-text-tag:              12px;
  --sp-text-mono-sm:          10.5px;
  --sp-text-micro:            10px;

  --sp-weight-regular:        400;
  --sp-weight-medium:         500;
  --sp-weight-semibold:       600;
  --sp-weight-bold:           700;

  --sp-leading-tight:         1;
  --sp-leading-display-tight: 1.02;
  --sp-leading-snug:          1.08;
  --sp-leading-display:       1.1;
  --sp-leading-title-sm:      1.25;
  --sp-leading-body:          1.5;
  --sp-leading-relaxed:       1.55;
  --sp-leading-loose:         1.6;

  --sp-tracking-tight:        -0.03em;
  --sp-tracking-snug:         -0.02em;
  --sp-tracking-eyebrow:      0.06em;
  --sp-tracking-mono:         0.04em;

  /* ── Spacing (8px base) ─────────────────────────────────── */
  --sp-space-1:               4px;
  --sp-space-1-5:             6px;
  --sp-space-2:               8px;
  --sp-space-2-5:             10px;
  --sp-space-3:               12px;
  --sp-space-3-5:             14px;
  --sp-space-4:               16px;
  --sp-space-4-5:             18px;
  --sp-space-5:               20px;
  --sp-space-6:               24px;
  --sp-space-8:               32px;
  --sp-space-10:              40px;
  --sp-space-11:              44px;
  --sp-space-12:              48px;
  --sp-space-14:              56px;
  --sp-space-16:              64px;
  --sp-space-18:              72px;
  --sp-space-20:              80px;
  --sp-space-24:              96px;
  --sp-space-30:              120px;

  --sp-gap-card:              16px;
  --sp-gap-section:           48px;
  --sp-gap-nav:               22px;
  --sp-gap-tight:             11px;

  /* ── Layout ─────────────────────────────────────────────── */
  --sp-content-max:           1200px;
  --sp-content-medium:        880px;
  --sp-content-narrow:        640px;
  --sp-content-intro:         620px;
  --sp-content-prose:         460px;
  --sp-gutter:                32px;

  /* ── Radius ─────────────────────────────────────────────── */
  --sp-radius-sm:             3px;
  --sp-radius-md:             4px;
  --sp-radius-lg:             7px;
  --sp-radius-card:           8px;
  --sp-radius-xl:             12px;
  --sp-radius-2xl:            16px;
  --sp-radius-lg-feature:     18px;
  --sp-radius-pill:           999px;

  /* ── Buttons: shared ────────────────────────────────────── */
  --sp-btn-font-family:       var(--sp-font-heading);
  --sp-btn-font-weight:       var(--sp-weight-semibold);
  --sp-btn-gap:               var(--sp-space-2);
  --sp-btn-transition:        background var(--sp-transition-fast), border-color var(--sp-transition-fast), color var(--sp-transition-fast), opacity var(--sp-transition-fast), transform var(--sp-transition-fast);

  --sp-btn-primary-radius:    var(--sp-radius-md);
  --sp-btn-primary-bg:        var(--sp-color-ink);
  --sp-btn-primary-bg-hover:  var(--sp-color-ink-hover);
  --sp-btn-primary-text:      var(--sp-color-cream);
  --sp-btn-primary-font-lg:   15px;
  --sp-btn-primary-font-md:   var(--sp-text-label);
  --sp-btn-primary-font-xs:   var(--sp-text-tag);
  --sp-btn-primary-font-micro: 11.5px;
  --sp-btn-primary-padding-lg: 12px 22px;
  --sp-btn-primary-padding-md: 11px 20px;
  --sp-btn-primary-padding-sm: 9px 18px;
  --sp-btn-primary-padding-xs: 6px 14px;
  --sp-btn-primary-padding-micro: 5px 12px;

  --sp-btn-secondary-radius:  var(--sp-btn-primary-radius);
  --sp-btn-secondary-bg:      transparent;
  --sp-btn-secondary-text:    var(--sp-color-ink);
  --sp-btn-secondary-border:  var(--sp-border-width) solid var(--sp-color-ink);
  --sp-btn-secondary-border-hover: var(--sp-color-text-faint);
  --sp-btn-secondary-font-lg: 15px;
  --sp-btn-secondary-padding-lg: 12px 22px;

  --sp-btn-outline-dark-radius: var(--sp-btn-primary-radius);
  --sp-btn-outline-dark-bg:   transparent;
  --sp-btn-outline-dark-text: var(--sp-color-cream);
  --sp-btn-outline-dark-border: var(--sp-border-width) solid var(--sp-color-ink-soft);
  --sp-btn-outline-dark-padding-lg: 12px 24px;
  --sp-btn-outline-dark-padding-md: 11px 20px;
  --sp-btn-outline-dark-font-lg: 15px;
  --sp-btn-outline-dark-font-md: var(--sp-text-label);

  --sp-btn-light-radius:      var(--sp-btn-primary-radius);
  --sp-btn-light-bg:          var(--sp-color-white);
  --sp-btn-light-text:        var(--sp-color-ink);
  --sp-btn-light-padding-lg:  12px 24px;
  --sp-btn-light-padding-md:  11px 20px;
  --sp-btn-light-font-lg:     15px;
  --sp-btn-light-font-md:     var(--sp-text-label);

  --sp-btn-compact-radius:    var(--sp-btn-primary-radius);
  --sp-btn-compact-padding:   7px 16px;
  --sp-btn-compact-font:      12.5px;
  --sp-btn-compact-outline-border: var(--sp-border-width) solid var(--sp-border-default);

  --sp-btn-muted-outline-border: var(--sp-border-width) solid var(--sp-border-default);
  --sp-btn-muted-outline-text: var(--sp-color-text-muted);
  --sp-btn-muted-outline-padding: 5px 12px;
  --sp-btn-muted-outline-font: 11.5px;

  /* ── Cards, chips, shadows & z-index ────────────────────── */
  --sp-card-radius:           var(--sp-radius-card);
  --sp-card-border:           var(--sp-border-width) solid var(--sp-border-default);
  --sp-card-padding:          22px;
  --sp-card-padding-lg:       32px;
  --sp-chip-radius:           var(--sp-radius-md);
  --sp-chip-padding:          2px 8px;
  --sp-chip-padding-sm:       3px 8px;
  --sp-chip-border-accent:    var(--sp-border-width) solid var(--sp-color-accent);

  --sp-shadow-sm:             0 1px 2px rgba(38, 37, 30, 0.06), 0 1px 1px rgba(38, 37, 30, 0.04);
  --sp-shadow-md:             0 1px 2px rgba(38, 37, 30, 0.05), 0 8px 24px -8px rgba(38, 37, 30, 0.12);
  --sp-shadow-lg:             0 2px 4px rgba(38, 37, 30, 0.05), 0 24px 56px -16px rgba(38, 37, 30, 0.2);
  --sp-nav-blur:              saturate(180%) blur(12px);
  --sp-transition-fast:       0.15s;

  --sp-z-nav:                 50;
  --sp-z-dropdown:            60;
  --sp-z-modal:               100;
  --sp-z-toast:               110;
}

@media (max-width: 768px) {
  :root {
    --sp-gutter: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --sp-gutter: 16px;
  }
}