/* [c12] */

/* [c13] */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
    src: url(../fonts/archivo.woff2) format("woff2-variations"), url(../fonts/archivo.woff2) format("woff2");
}
/* [c14] */
@font-face {
    font-family: "Archivo Fallback";
    src: local("Segoe UI"), local("Arial"), local("Helvetica Neue"), local("Roboto");
    size-adjust: 103%;
    ascent-override: 85%;
    descent-override: 20%;
    line-gap-override: 0%;
}

:root {
    color-scheme: light;

    /* [c15] */
    --ss-stone-1: #f1ece4;
    --ss-stone-2: #e4ddd2;
    --ss-stone-3: #cbc3b7;
    --ss-stone-4: #9a9289;
    --ss-stone-5: #5a554f;

    /* [c16] */
    --ss-ink:          #231f20;
    --ss-paper:        #fbf8f3;
    --ss-bg:           var(--ss-paper);
    --ss-surface:      #ffffff;
    --ss-surface-2:    var(--ss-stone-1);
    --ss-surface-3:    var(--ss-stone-2);
    --ss-border:       #ebe4d9;
    --ss-border-strong: var(--ss-stone-3);
    --ss-seg-thumb:    #ffffff;
    --ss-text:         var(--ss-ink);
    --ss-text-soft:    rgba(35, 31, 32, 0.70);
    --ss-text-faint:   rgba(35, 31, 32, 0.52);
    --ss-text-inverse: #f5f2ec;

    /* [c17] */
    --ss-accent:         #ee7a22;
    --ss-accent-hover:   #f38a37;
    --ss-accent-press:   #d9691a;
    --ss-accent-ink:     #231f20;
    --ss-accent-soft:    rgba(238, 122, 34, 0.10);
    --ss-accent-line:    rgba(238, 122, 34, 0.45);
    --ss-accent-glow:    rgba(238, 122, 34, 0.18);
    --ss-accent-glow-strong: rgba(238, 122, 34, 0.32);
    --ss-accent-text:    #b4570f;
    /* [c35] */
    --ss-pro-edge:         color-mix(in srgb, var(--ss-accent) 55%, transparent);
    --ss-pro-bg:           linear-gradient(155deg, color-mix(in srgb, var(--ss-accent) 26%, var(--ss-surface)) 0%, color-mix(in srgb, var(--ss-accent) 8%, var(--ss-surface)) 55%, var(--ss-surface) 100%);
    --ss-pro-shadow:       0 10px 32px var(--ss-accent-glow);
    --ss-pro-shadow-hover: 0 16px 40px var(--ss-accent-glow-strong);
    --ss-pro-star:         var(--ss-accent);
    --ss-pro-badge-bg:     var(--ss-accent-soft);
    --ss-pro-badge-ink:    var(--ss-accent-text);

    /* [c18] */
    --ss-success:        #2e7d4f;
    --ss-success-soft:   rgba(46, 125, 79, 0.10);
    --ss-success-ink:    #ffffff;
    --ss-danger:         #c0392b;
    --ss-danger-soft:    rgba(192, 57, 43, 0.08);
    --ss-danger-line:    rgba(192, 57, 43, 0.55);
    --ss-danger-strong:  #a93226;
    --ss-danger-ink:     #ffffff;
    --ss-warn:           #9a6a00;
    --ss-warn-soft:      rgba(242, 201, 76, 0.18);

    /* [c19] */
    --ss-brush-purple: #8e24aa;
    --ss-brush-orange: #fb8c00;
    --ss-brush-blue:   #1e88e5;
    --ss-brush-yellow: #fdd835;
    --ss-brush-green:  #43a047;
    --ss-brush-red:    #e53935;

    /* [c20] */
    --ss-glass-bg:        color-mix(in srgb, var(--ss-bg) 62%, transparent);
    --ss-glass-bg-strong: color-mix(in srgb, var(--ss-bg) 80%, transparent);
    --ss-glass-bg-solid:  color-mix(in srgb, var(--ss-bg) 94%, transparent);
    --ss-glass-border:    color-mix(in srgb, var(--ss-text) 10%, transparent);
    --ss-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --ss-glass-shadow:    0 10px 30px rgba(0, 0, 0, 0.12);
    --ss-glass-blur:      blur(18px) saturate(160%);
    /* [c21] */
    --ss-scrim:        rgba(14, 13, 12, 0.52);
    --ss-scrim-strong: rgba(14, 13, 12, 0.80);
    --ss-on-scrim:     #ffffff;
    --ss-knob:         #ffffff;
    --ss-knob-ink:     #231f20;
    --ss-caption-fade: linear-gradient(transparent, rgba(14, 13, 12, 0.72));

    /* [c22] */
    --ss-backdrop:        rgba(20, 18, 15, 0.46);
    --ss-backdrop-soft:   rgba(20, 18, 15, 0.36);
    --ss-backdrop-strong: rgba(0, 0, 0, 0.66);
    --ss-lightbox:        rgba(10, 9, 8, 0.92);
    --ss-veil:            rgba(0, 0, 0, 0.50);
    --ss-sheen:           rgba(255, 255, 255, 0.55);
    --ss-shine-peak:      rgba(255, 255, 255, 0.46);

    /* [c23] */
    --ss-wash-0: #ffffff;
    --ss-wash-1: #fdf7ef;
    --ss-wash-2: #f9efe2;
    --ss-wash: radial-gradient(120% 70% at 50% -10%, rgba(238, 122, 34, 0.07), transparent 60%), var(--ss-paper);

    /* [c24] */
    --ss-gauge-green:  #3fbf7f;
    --ss-gauge-yellow: #f2c94c;
    --ss-gauge-orange: #f2994a;
    --ss-gauge-red:    #e0453a;
    --ss-scroll-thumb:       color-mix(in srgb, var(--ss-accent) 34%, transparent);
    --ss-scroll-thumb-hover: color-mix(in srgb, var(--ss-accent) 60%, transparent);

    /* [c25] */
    --ss-font: "Archivo", "Archivo Fallback", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ss-stretch-display: 125%;
    --ss-stretch-ui: 100%;
    --ss-weight-display: 700;
    --ss-fs-2xs: 0.6875rem;
    --ss-fs-xs: 0.75rem;
    --ss-fs-sm: 0.875rem;
    --ss-fs-md: 1rem;
    --ss-fs-lg: 1.125rem;
    --ss-fs-xl: 1.375rem;
    --ss-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --ss-fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    --ss-fs-display: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem);
    --ss-lh-tight: 1.08;
    --ss-lh-snug: 1.25;
    --ss-lh: 1.5;

    /* [c26] */
    --ss-space-1: 4px;
    --ss-space-2: 8px;
    --ss-space-3: 12px;
    --ss-space-4: 16px;
    --ss-space-5: 20px;
    --ss-space-6: 24px;
    --ss-space-7: 32px;
    --ss-space-8: 40px;
    --ss-space-9: 56px;
    --ss-space-10: 72px;

    /* [c27] */
    --ss-r-xs: 6px;
    --ss-r-control: 10px;
    --ss-r-card: 16px;
    --ss-r-glass: 20px;
    --ss-r-sheet: 22px;
    --ss-r-phone-sheet: 24px;
    --ss-r-pill: 999px;

    /* [c28] */
    --ss-shadow-sm: 0 1px 2px rgba(35, 28, 20, 0.05), 0 2px 8px rgba(35, 28, 20, 0.05);
    --ss-shadow-hover: 0 2px 4px rgba(35, 28, 20, 0.06), 0 10px 24px rgba(35, 28, 20, 0.10);
    --ss-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
    --ss-shadow-lg: 0 24px 64px rgba(20, 16, 12, 0.22);
    --ss-shadow-accent: 0 6px 20px rgba(238, 122, 34, 0.30);
    --ss-ring: 0 0 0 2px var(--ss-bg), 0 0 0 4px var(--ss-accent);
    --ss-btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    --ss-shadow-knob: 0 4px 16px rgba(0, 0, 0, 0.35);
    --ss-shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.25);

    /* [c29] */
    --ss-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ss-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ss-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --ss-dur-press: 90ms;
    --ss-dur-micro: 160ms;
    --ss-dur-comp: 240ms;
    --ss-dur-surface: 420ms;
    --ss-dur-reveal: 900ms;
    --ss-stagger: 30ms;
    --ss-rise: 8px;
    --ss-step-shift: 24px;

    /* [c30] */
    --ss-maxw: 1180px;
    --ss-gutter: clamp(16px, 4vw, 24px);
    --ss-topbar-h: 64px;
    --ss-tap: 44px;
    --ss-tap-lg: 52px;
    --ss-actionbar-h: 0px;

    /* [c31] */
    --ss-z-topbar: 40;
    --ss-z-actionbar: 50;
    --ss-z-menu: 80;
    --ss-z-sheet: 100;
    --ss-z-coach: 110;
    --ss-z-toast: 120;

    /* [c32] */
    --st-bg:              var(--ss-bg);
    --st-bg-elevated:     var(--ss-surface);
    --st-surface:         var(--ss-surface);
    --st-surface-2:       var(--ss-surface-2);
    --st-border:          var(--ss-border);
    --st-text:            var(--ss-text);
    --st-text-soft:       var(--ss-text-soft);
    --st-text-faint:      var(--ss-text-faint);
    --st-accent:          var(--ss-accent);
    --st-accent-contrast: var(--ss-accent-ink);
    --st-accent-soft:     var(--ss-accent-soft);
    --st-danger:          var(--ss-danger);
    --st-danger-soft:     var(--ss-danger-soft);
    --st-danger-border:   var(--ss-danger-line);
    --st-danger-strong:   var(--ss-danger-strong);
    --st-success:         var(--ss-success);
    --st-on-accent-ok:    var(--ss-success);
    --st-on-ok-text:      var(--ss-success-ink);
    --st-glow:            var(--ss-accent-glow);
    --st-glow-strong:     var(--ss-accent-glow-strong);
    --st-panel-edge:      0 1px 18px rgba(238, 122, 34, 0.05);
    --st-wash-0:          var(--ss-wash-0);
    --st-wash-1:          var(--ss-wash-1);
    --st-wash-2:          var(--ss-wash-2);
    --st-veil:            var(--ss-veil);
    --st-backdrop:        var(--ss-backdrop);
    --st-backdrop-soft:   var(--ss-backdrop-soft);
    --st-backdrop-strong: var(--ss-backdrop-strong);
    --st-lightbox:        var(--ss-lightbox);
    --st-glass:           var(--ss-scrim);
    --st-glass-strong:    var(--ss-scrim-strong);
    --st-on-glass:        var(--ss-on-scrim);
    --st-knob:            var(--ss-knob);
    --st-knob-ink:        var(--ss-knob-ink);
    --st-caption-fade:    var(--ss-caption-fade);
    --st-sheen:           var(--ss-sheen);
    --st-shine-peak:      var(--ss-shine-peak);
    --st-gauge-green:     var(--ss-gauge-green);
    --st-gauge-yellow:    var(--ss-gauge-yellow);
    --st-gauge-orange:    var(--ss-gauge-orange);
    --st-gauge-red:       var(--ss-gauge-red);
    --st-scroll-thumb:       var(--ss-scroll-thumb);
    --st-scroll-thumb-hover: var(--ss-scroll-thumb-hover);
    --st-font-heading:   var(--ss-font);
    --st-font-ui:        var(--ss-font);
    --st-weight-heading: 600;
    --st-radius-sm: 8px;
    --st-radius-md: 14px;
    --st-radius-lg: var(--ss-r-sheet);
    --st-radius-xl: 32px;
    --st-shadow-sm: var(--ss-shadow-sm);
    --st-shadow-md: var(--ss-shadow-md);
    --st-shadow-lg: var(--ss-shadow-lg);
    --st-ease:     var(--ss-ease);
    --st-dur-fast: 200ms;
    --st-dur:      300ms;
    --st-dur-slow: 450ms;
    --st-maxw:      var(--ss-maxw);
    --st-touch-min: var(--ss-tap);
}

@media (max-width: 640px) {
    :root { --ss-topbar-h: 56px; }
}

/* [c33] */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ss-stone-1: #1a1917;
        --ss-stone-2: #24221f;
        --ss-stone-3: #34312d;
        --ss-stone-4: #5c5751;
        --ss-stone-5: #8d8780;
        --ss-ink:          #f5f2ec;
        --ss-paper:        #0e0d0c;
        --ss-surface:      #171614;
        --ss-surface-2:    #1f1d1b;
        --ss-surface-3:    #2a2825;
        --ss-border:       #2b2926;
        --ss-border-strong: #45413c;
        --ss-seg-thumb:    #3a3632;
        --ss-text-soft:    rgba(245, 242, 236, 0.70);
        --ss-text-faint:   rgba(245, 242, 236, 0.50);
        --ss-text-inverse: #231f20;
        --ss-accent-soft:  rgba(238, 122, 34, 0.14);
        --ss-accent-glow:  rgba(238, 122, 34, 0.28);
        --ss-accent-glow-strong: rgba(238, 122, 34, 0.42);
        --ss-accent-text:  #f39a52;
        --ss-pro-edge:         color-mix(in srgb, var(--ss-accent) 60%, transparent);
        --ss-pro-bg:           linear-gradient(155deg, color-mix(in srgb, var(--ss-accent) 24%, var(--ss-surface)) 0%, color-mix(in srgb, var(--ss-accent) 7%, var(--ss-surface)) 55%, var(--ss-surface) 100%);
        --ss-pro-shadow:       0 10px 32px var(--ss-accent-glow);
        --ss-pro-shadow-hover: 0 16px 40px var(--ss-accent-glow-strong);
        --ss-pro-star:         var(--ss-accent);
        --ss-pro-badge-bg:     var(--ss-accent-soft);
        --ss-pro-badge-ink:    var(--ss-accent-text);
        --ss-success:      #4caf7d;
        --ss-success-soft: rgba(76, 175, 125, 0.14);
        --ss-success-ink:  #0e0d0c;
        --ss-danger:       #e05b4b;
        --ss-danger-soft:  rgba(224, 91, 75, 0.12);
        --ss-danger-line:  rgba(224, 91, 75, 0.55);
        --ss-danger-strong: #c94a3b;
        --ss-warn:         #f2c94c;
        --ss-warn-soft:    rgba(242, 201, 76, 0.12);
        --ss-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
        --ss-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        --ss-backdrop:      rgba(0, 0, 0, 0.62);
        --ss-backdrop-soft: rgba(0, 0, 0, 0.50);
        --ss-backdrop-strong: rgba(0, 0, 0, 0.76);
        --ss-lightbox:      rgba(0, 0, 0, 0.94);
        --ss-veil:          rgba(0, 0, 0, 0.55);
        --ss-caption-fade:  linear-gradient(transparent, rgba(0, 0, 0, 0.78));
        --ss-wash-0: #0e0d0c;
        --ss-wash-1: #141311;
        --ss-wash-2: #1a1816;
        --ss-wash: radial-gradient(120% 70% at 50% -10%, rgba(238, 122, 34, 0.09), transparent 60%), var(--ss-paper);
        --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
        --ss-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45);
        --ss-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
        --ss-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.62);
        --ss-shadow-accent: 0 6px 22px rgba(238, 122, 34, 0.34);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ss-stone-1: #1a1917;
    --ss-stone-2: #24221f;
    --ss-stone-3: #34312d;
    --ss-stone-4: #5c5751;
    --ss-stone-5: #8d8780;
    --ss-ink:          #f5f2ec;
    --ss-paper:        #0e0d0c;
    --ss-surface:      #171614;
    --ss-surface-2:    #1f1d1b;
    --ss-surface-3:    #2a2825;
    --ss-border:       #2b2926;
    --ss-border-strong: #45413c;
    --ss-seg-thumb:    #3a3632;
    --ss-text-soft:    rgba(245, 242, 236, 0.70);
    --ss-text-faint:   rgba(245, 242, 236, 0.50);
    --ss-text-inverse: #231f20;
    --ss-accent-soft:  rgba(238, 122, 34, 0.14);
    --ss-accent-glow:  rgba(238, 122, 34, 0.28);
    --ss-accent-glow-strong: rgba(238, 122, 34, 0.42);
    --ss-accent-text:  #f39a52;
    --ss-pro-edge:         color-mix(in srgb, var(--ss-accent) 60%, transparent);
    --ss-pro-bg:           linear-gradient(155deg, color-mix(in srgb, var(--ss-accent) 24%, var(--ss-surface)) 0%, color-mix(in srgb, var(--ss-accent) 7%, var(--ss-surface)) 55%, var(--ss-surface) 100%);
    --ss-pro-shadow:       0 10px 32px var(--ss-accent-glow);
    --ss-pro-shadow-hover: 0 16px 40px var(--ss-accent-glow-strong);
    --ss-pro-star:         var(--ss-accent);
    --ss-pro-badge-bg:     var(--ss-accent-soft);
    --ss-pro-badge-ink:    var(--ss-accent-text);
    --ss-success:      #4caf7d;
    --ss-success-soft: rgba(76, 175, 125, 0.14);
    --ss-success-ink:  #0e0d0c;
    --ss-danger:       #e05b4b;
    --ss-danger-soft:  rgba(224, 91, 75, 0.12);
    --ss-danger-line:  rgba(224, 91, 75, 0.55);
    --ss-danger-strong: #c94a3b;
    --ss-warn:         #f2c94c;
    --ss-warn-soft:    rgba(242, 201, 76, 0.12);
    --ss-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --ss-glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --ss-backdrop:      rgba(0, 0, 0, 0.62);
    --ss-backdrop-soft: rgba(0, 0, 0, 0.50);
    --ss-backdrop-strong: rgba(0, 0, 0, 0.76);
    --ss-lightbox:      rgba(0, 0, 0, 0.94);
    --ss-veil:          rgba(0, 0, 0, 0.55);
    --ss-caption-fade:  linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    --ss-wash-0: #0e0d0c;
    --ss-wash-1: #141311;
    --ss-wash-2: #1a1816;
    --ss-wash: radial-gradient(120% 70% at 50% -10%, rgba(238, 122, 34, 0.09), transparent 60%), var(--ss-paper);
    --ss-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
    --ss-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.45);
    --ss-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --ss-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.62);
    --ss-shadow-accent: 0 6px 22px rgba(238, 122, 34, 0.34);
}

/* [c34] */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ss-dur-press: 0ms;
        --ss-dur-micro: 0ms;
        --ss-dur-comp: 0ms;
        --ss-dur-surface: 0ms;
        --ss-dur-reveal: 120ms;
        --ss-stagger: 0ms;
        --ss-rise: 0px;
        --ss-step-shift: 0px;
    }
}
