/* Submagic Design Tokens
 * Source of truth: Webflow (component catalog + class composition on Home, Magic Clips, Link-to-Videos, tool pages)
 * Grounding: submagic.shared.c5cd83b24.min.css (live compiled CSS, see references/)
 * Namespace: --sm-* to avoid collisions with Webflow runtime classes when embedded.
 */

:root {
  /* ===== Brand ===== */
  --sm-brand:          #ff4f01;   /* --submagic-orange */
  --sm-brand-tint:     #fff7ed;   /* --light-orange */
  --sm-accent:         #c2ff66;   /* --green--base (Webflow .button-primary uses this) */
  --sm-success:        #1ab76a;
  --sm-danger:         #cc3d00;   /* --red */

  /* ===== Neutrals (Submagic gray scale) ===== */
  --sm-white:          #ffffff;
  --sm-black:          #000000;
  --sm-gray-100:       #f7f7f8;
  --sm-gray-200:       #ececee;
  --sm-gray-300:       #e4e4e7;
  --sm-gray-500:       #9e9ea9;
  --sm-gray-600:       #696977;
  --sm-gray-700:       #4d4d56;
  --sm-gray-800:       #3a3a41;
  --sm-gray-900:       #18181b;
  --sm-dark-gray:      #5f5f6d;   /* Submagic body default color */

  /* Semantic aliases */
  --sm-bg:             var(--sm-white);
  --sm-bg-dark:        var(--sm-gray-900);
  --sm-fg:             var(--sm-dark-gray);
  --sm-fg-strong:      var(--sm-black);
  --sm-fg-muted:       var(--sm-gray-500);
  --sm-border:         var(--sm-gray-300);

  /* ===== Typography ===== */
  --sm-font-display:   "Archivo", sans-serif;  /* used for headings in Submagic CSS */
  --sm-font-body:      "Inter", sans-serif;    /* body default */
  --sm-font-size-root: 16px;

  --sm-fw-regular:     400;
  --sm-fw-medium:      500;
  --sm-fw-semibold:    600;
  --sm-fw-bold:        700;
  --sm-fw-heavy:       800;

  --sm-lh-tight:       1.2;
  --sm-lh-text:        1.4;
  --sm-lh-base:        1.5;

  --sm-tracking-tight: -0.02em;
  --sm-tracking-wide:   0.1em;

  /* Type scale (rem @ html:16px) sized to match Submagic's rendered px.
     Submagic's body is 12px so their em primitives render smaller than default.
     These rems reproduce their exact rendered sizes so our widgets blend visually
     with adjacent Submagic components on the same page. */
  --sm-fs-hero:        3.25rem;   /* 52px — kit-specific hero h1 (Submagic heroes vary by context) */
  --sm-fs-title:       2.4rem;    /* 38.4px — matches .title.new (3.2em × 12px body) */
  --sm-fs-subtitle:    1.125rem;  /* 18px — matches .small-title (1.5em × 12px) */
  --sm-fs-body-lg:     1.05rem;   /* 16.8px — matches .text.medium (1.4em × 12px) */
  --sm-fs-body:        0.9rem;    /* 14.4px — matches .text (1.2em × 12px) */
  --sm-fs-small:       0.875rem;  /* 14px — labels, chips (our accessibility floor; Submagic .text.small is 10.8px) */
  --sm-fs-tagline:     0.9rem;    /* 14.4px — matches .tagline (1.2em × 12px) */
  --sm-fs-micro:       0.75rem;   /* 12px — help text */

  /* Button scale (absolute rems, do not compound with body) */
  --sm-fs-btn:         1.125rem;  /* 18px — matches .primary-button.new / .secondary-button (1.5em × 12px) */
  --sm-fs-btn-light:   0.8625rem; /* 13.8px — matches .light-button (1.15em × 12px) */
  --sm-fs-btn-big:     1.25rem;   /* 20px — step up from primary */
  --sm-fs-btn-small:   0.875rem;  /* 14px — matches .primary-button.nav (1.15em × 12px) */

  /* ===== Radius ===== */
  --sm-radius-sm:      6px;
  --sm-radius-md:      8px;   /* .text-field */
  --sm-radius-lg:     12px;   /* .primary-button, .accordion-item */
  --sm-radius-xl:     24px;
  --sm-radius-pill:  9999px;

  /* ===== Spacing scale ===== */
  --sm-space-1:        4px;
  --sm-space-2:        8px;
  --sm-space-3:       12px;
  --sm-space-4:       16px;
  --sm-space-5:       24px;
  --sm-space-6:       32px;
  --sm-space-7:       48px;
  --sm-space-8:       64px;
  --sm-space-9:       96px;

  /* ===== Shadows ===== */
  --sm-shadow-sm:      0 1px 2px rgba(0,0,0,0.05);
  --sm-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --sm-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -2px rgba(0,0,0,0.05);
  --sm-shadow-accordion: 0 7px 5px rgba(0,0,0,0.04);
  --sm-shadow-cta-text:  0 2px 4px rgba(0,0,0,0.25);

  /* ===== Focus ===== */
  --sm-focus-ring:     0 0 0 3px rgba(255,79,1,0.25);

  /* ===== Motion ===== */
  --sm-duration-fast:  150ms;
  --sm-duration-base:  250ms;
  --sm-duration-slow:  350ms;
  --sm-ease:           ease;

  /* ===== Layout ===== */
  --sm-container-max: 1080px;
}