/* Hallmark · macrostructure: Marquee Hero · tone: playful-consumer
 * theme: studied-DNA (Clay Sky) · studied: yes · DNA-source: url
 * source-url: https://maily-template.framer.website
 * paper: #F9F9F9 · accent: #1D7FFF
 * display: Nunito · body: Satoshi
 */

:root {
  /* Paper */
  --color-paper: #f9f9f9;
  --color-paper-white: #ffffff;
  --color-paper-2: #f8f8f8;
  --color-paper-3: #ebebeb;
  --color-paper-chip: #f0f0f0;

  /* Ink */
  --color-ink: rgba(0, 0, 0, 0.94);
  --color-ink-2: rgba(0, 0, 0, 0.69);
  --color-ink-3: rgba(0, 0, 0, 0.5);
  --color-ink-4: rgba(0, 0, 0, 0.45);
  --color-ink-mute: rgba(0, 0, 0, 0.6);
  --color-ink-hover: rgba(0, 0, 0, 0.9);
  --color-on-sky: rgba(255, 255, 255, 0.94);
  --color-on-sky-2: rgba(255, 255, 255, 0.69);
  --color-on-sky-solid: #ffffff;
  --color-ring: rgba(255, 255, 255, 0.28);
  --color-spot: rgba(255, 255, 255, 0.5);
  --color-spot-fade: rgba(68, 68, 68, 0);
  --glass: rgba(255, 255, 255, 0.2);
  --glass-strong: rgba(255, 255, 255, 0.34);
  --glass-edge: rgba(255, 255, 255, 0.46);
  --ig-bg: #000000;
  --ig-line: #1c1c1e;
  --ig-in: #2f2f31;
  --ig-out: #c44bff;
  --ig-grad: linear-gradient(
    180deg,
    #ff62d4 0%,
    #ff48c4 22%,
    #f062ff 48%,
    #e14bff 72%,
    #c44bff 88%,
    #a855f7 100%
  );
  --ig-cam: linear-gradient(160deg, #7c6bff 0%, #c44bff 70%, #e14bff 100%);
  --ig-text: #f5f5f5;
  --ig-meta: #a8a8a8;
  --ig-btn: #2c2c2e;

  /* Sky accent */
  --color-sky-deep: #1d7fff;
  --color-sky-mid: #186afd;
  --color-sky-soft: #8ed0f2;
  --color-sky-wash: #b5d8ff;
  --color-sky-ice: #c4e4fb;
  --color-sky-pale: #e8f0ff;
  --color-accent: var(--color-sky-deep);
  --color-accent-ink: #ffffff;
  --color-focus: var(--color-sky-mid);

  /* Button metal */
  --color-btn-top: #3c3c3c;
  --color-btn-bot: #232323;
  --color-lip: #000000;
  --color-lip-gray: #b7b7b7;

  /* Candy  -  tags only */
  --color-candy-green: #53fd18;
  --color-candy-yellow: #fdbc18;
  --color-candy-orange: #fd6a18;
  --color-candy-blue: #186afd;

  /* Gradients */
  --grad-hero: radial-gradient(
    62.4157% 80.1101% at 52.5481% 31.5073%,
    #1d7fff 5.54%,
    #8ed0f2 78.51%
  );
  --grad-sky: linear-gradient(
    180deg,
    rgb(25, 0, 150) 0%,
    rgb(0, 128, 255) 32%,
    rgb(120, 210, 255) 68%,
    rgb(180, 230, 255) 100%
  );
  --grad-sky-linear: linear-gradient(#1e80ff 0%, #8fd1f3 100%);
  --grad-btn-black: linear-gradient(182.443deg, #3c3c3c 0%, #232323 100%);
  --grad-card-wash: linear-gradient(180deg, #ffffff 0%, #b5d8ff 100%);
  --grad-toast: linear-gradient(178.991deg, #ffffff 0%, #c4e4fb 100%);
  --grad-canvas: radial-gradient(87.6786% 87.6786% at 50% 50%, #f8f8f8 0%, #ebebeb 100%);
  --grad-spotlight: radial-gradient(17% 99.2416%, rgba(255, 255, 255, 0.5) 0%, rgba(68, 68, 68, 0) 100%);
  --grad-orb: linear-gradient(#ffffff 0%, #c7c7c7 129%);
  --grad-memoji: linear-gradient(178.545deg, #e8f0ff 0%, #a6c7ff 100%);
  --grad-star: linear-gradient(#b0e0fe 0%, #1985fd 100%);

  /* Type */
  --font-display: "Nunito", sans-serif;
  --font-body: "Satoshi", sans-serif;
  --font-mono: "Satoshi", sans-serif;

  --text-hero: 90px;
  --text-h2: 56px;
  --text-cta: 22px;
  --text-lead: 18px;
  --text-nav: 16px;
  --text-body: 15px;
  --text-mono: 17px;

  --leading-hero: 90px;
  --leading-h2: 56px;
  --leading-cta: 33.22px;
  --leading-lead: 27.18px;
  --leading-nav: 24.16px;
  --leading-body: 22.65px;
  --tracking-cta: -0.88px;
  --tracking-mono: -0.51px;

  /* Space (4-pt) */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --space-hero-y: 192px;
  --chat-h: 800px;
  --gutter: 48px;
  --content: 1344px;
  --nav-width: 722px;
  --nav-height: 60px;

  /* Radius */
  --radius-hero: 0 0 100px 100px;
  --radius-nav: 18px;
  --radius-cta-sm: 15px;
  --radius-cta: 20px;
  --radius-input: 22px;
  --radius-faq: 26px;
  --radius-card: 40px;
  --radius-card-lg: 48px;
  --radius-feature-art: 44px 44px 0 0;
  --radius-toast: 72px;
  --radius-pill: 100px;
  --radius-avatar: 999px;

  /* Shadow */
  --shadow-nav: 0 5.3px 9px rgba(0, 0, 0, 0.08);
  --shadow-chip: 0 5.377px 9.141px rgba(0, 0, 0, 0.07);
  --shadow-white-btn: 0 7px 11px rgba(0, 0, 0, 0.05);
  --shadow-btn-black:
    inset 0 4.68px 14.51px 0 rgba(255, 255, 255, 0.5),
    0 2.618px 0 0 #000;
  --shadow-btn-black-hover:
    inset 0 4.68px 14.51px 3px rgba(255, 255, 255, 0.5),
    0 5px 0 0 #000;
  --shadow-btn-nav:
    0 2px 0 0 #b7b7b7,
    inset 0 5px 14px 0 rgba(255, 255, 255, 0.5);
  --shadow-orb:
    0 5px 10px rgba(0, 0, 0, 0.1),
    0 20px 15px rgba(0, 0, 0, 0.17);
  --shadow-card:
    0 0.828px 1.656px rgba(0, 0, 0, 0.1),
    0 3.312px 3.312px rgba(0, 0, 0, 0.09),
    0 6.625px 4.141px rgba(0, 0, 0, 0.05),
    0 12.422px 4.969px rgba(0, 0, 0, 0.02);
  --shadow-candy-blue:
    inset 0 -1px 0 #0066ff,
    inset 0 0.5px 1.5px rgba(255, 255, 255, 0.78),
    0 4px 8px rgba(158, 174, 255, 0.27),
    0 14px 14px rgba(158, 174, 255, 0.24);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-ui: cubic-bezier(0.44, 0, 0.56, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 180ms;
  --dur-hover: 220ms;
  --dur-base: 240ms;
  --dur-ui: 400ms;
  --dur-appear: 700ms;
  --dur-theater: 780ms;
  --dur-burst: 920ms;
  --dur-slow: 320ms;
  --stagger: 90ms;
  --appear-y: 24px;

  /* Breakpoints (reference) */
  --bp-mobile: 833px;
  --bp-tablet: 834px;
  --bp-desktop: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms;
    --dur-ui: 150ms;
    --dur-appear: 150ms;
    --appear-y: 0px;
  }
}