/* ============================================================
   Lucky by default — landing page
   Source of truth: Penpot file "Site", page "Landing"
   Breakpoint boards: Desktop 1440 / Tablet 834 / Mobile 390
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS — desktop (base, design width 1440)
   ------------------------------------------------------------ */
:root {
  /* palette — set "base" */
  --color-sun:    #FFD23F;
  --color-mint:   #7DE3C0;
  --color-sky:    #8FB8FF;

  /* palette — set "theme/light" (active) */
  --color-bg:      #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink:     #1B1340;
  --color-muted:   #5A5280;
  --color-accent:  #FF5D8F;

  /* borders & shadows */
  --border-w:        2.5px;   /* border.default */
  --border-w-tag:    2.5px;   /* tag badges on desktop */
  --border-w-icon:   2.5px;   /* coming-soon cover icon */
  --shadow-card:     6px 6px 0 var(--color-ink);
  --shadow-button:   4px 4px 0 var(--color-ink);
  --shadow-shape:    6px 6px 0 var(--color-ink);

  /* radii */
  --radius-card:      24px;
  --radius-button:    18.6px;
  --radius-cover-icon: 24px;
  --qmark-dash:       9 5;
  --radius-shape:     38px;
  --radius-shape-circle: 75px;

  /* type scale */
  --font-body: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-h1:        70px;
  --lh-h1:        1;
  --ls-h1:        -3px;
  --fs-hero-sub:  19.2px;
  --lh-hero-sub:  1.55;
  --fs-h2:        48px;
  --lh-h2:        1.05;
  --fs-name:      22.4px;
  --lh-name:      1.55;
  --fs-desc:      16px;
  --lh-desc:      1.55;
  --fs-tag:       13.6px;
  --lh-tag:       1.55;
  --fs-button:    18.6px;
  --lh-button:    1;
  --fs-footer:    16px;
  --fw-body:      400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* layout metrics */
  --nav-icon-size:   30px;
  --fs-wordmark:     19px;
  --nav-pad-block:   32px;
  --hero-pad-block:  64px;
  --hero-gap:        0px;
  --hero-copy-gap:   24px;
  --hero-sub-max:    637px;
  --apps-gap-heading: 40px;
  --apps-pad-bottom: 64px;
  --cards-gap:       32px;
  --card-h:          185px;
  --cover-w:         150px;
  --logo-size:       84px;
  --qmark-size:      38.4px;
  --tag-pad-block:   1px;
  --tag-pad-inline:  16px;
  --tags-gap:        8px;
  --card-body-pad-y: 24px;
  --card-body-pad-x: 35px;
  --card-body-gap:   128px;
  --card-group-gap:  0px;
  --button-pad-y:    16px;
  --button-pad-x:    26.6px;
  --footer-pad-block: 32px;
  --shapes-w:        340px;
  --shapes-h:        340px;
  --shape-size:      150px;
  --shape-r-sun:     38px;
  --shape-r-mint:    38px 12px 38px 12px;

  /* assets */
  --asset-logo-habit: url("./assets/logo-square.png");

  /* shape positions inside .hero__shapes (desktop board, px) */
  --pos-sun-x: 0.29px;   --pos-sun-y: -9.71px;   --rot-sun: 352deg;
  --pos-accent-x: 181.42px; --pos-accent-y: 61.42px; --rot-accent: 7deg;
  --pos-mint-x: 46.18px; --pos-mint-y: 186.18px; --rot-mint: 357deg;
}

/* ------------------------------------------------------------
   TOKENS — tablet (design width 834)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  :root {
    --border-w:     1.89px;
    --border-w-tag: 1.89px;
    --border-w-icon: 1.89px;
    --shadow-card:   4.53px 4.53px 0 var(--color-ink);
    --shadow-button: 3px 3px 0 var(--color-ink);
    --shadow-shape:  4.53px 4.53px 0 var(--color-ink);

    --radius-card:       18.14px;
    --radius-button:     14.1px;
    --radius-cover-icon: 16px;
    --qmark-dash:        8 6;
    --radius-shape:      30px;

    --fs-h1:       50px;
    --ls-h1:       -3.5px;
    --fs-hero-sub: 16px;
    --fs-h2:       37.5px;
    --fs-name:     19px;
    --lh-name:     1.25;
    --fs-desc:     13.5px;
    --lh-desc:     1.25;
    --fs-tag:      11.5px;
    --lh-tag:      1.17;
    --fs-button:   15.3px;
    --fs-footer:   16px;

    --nav-icon-size:   26px;
    --fs-wordmark:     17px;
    --nav-pad-block:   16px;
    --hero-pad-block:  32px;
    --hero-gap:        10px;
    --hero-copy-gap:   24px;
    --apps-gap-heading: 40px;
    --apps-pad-bottom: 32px;
    --card-h:          139.82px;
    --cover-w:         113.4px;
    --logo-size:       57px;
    --qmark-size:      29.02px;
    --tag-pad-block:   0.76px;
    --tag-pad-inline:  12.09px;
    --tags-gap:        6.05px;
    --card-body-pad-y: 18.14px;
    --card-body-pad-x: 26.45px;
    --card-body-gap:   64px;
    --card-group-gap:  4px;
    --button-pad-y:    12.1px;
    --button-pad-x:    20.1px;
    --footer-pad-block: 16px;
    --shapes-w:        276px;
    --shapes-h:        314px;
    --shape-size:      100px;
    --shape-r-sun:     30px;
    --shape-r-mint:    38px 12px 38px 12px;

    --pos-sun-x: 14.29px;  --pos-sun-y: 38.25px;
    --pos-accent-x: 133.09px; --pos-accent-y: 83px;
    --pos-mint-x: 46.18px; --pos-mint-y: 168.79px;
  }
}

/* ------------------------------------------------------------
   TOKENS — mid tier (481–756px effective):
   arithmetic means of the tablet and mobile values, per user spec.
   Binary layout behavior follows tablet (row body, button visible).
   ------------------------------------------------------------ */
@media (max-width: 756px) {
  :root {
    --border-w:      2.195px;
    --border-w-tag:  1.945px;
    --border-w-icon: 1.945px;
    --shadow-card:   3.765px 3.765px 0 var(--color-ink);
    --shadow-shape:  3.515px 3.515px 0 var(--color-ink);

    --radius-card:       17.07px;
    --radius-cover-icon: 13px;
    --radius-shape:      19.75px;

    --fs-h1:       40px;
    --ls-h1:       -2.75px;
    --fs-hero-sub: 15px;
    --lh-hero-sub: 1.425;
    --fs-h2:       30.75px;
    --fs-name:     17.5px;
    --lh-name:     1.125;
    --fs-desc:     13.75px;
    --lh-desc:     1.125;
    --fs-tag:      12.25px;
    --lh-tag:      1.185;
    --fs-button:   14.7px;
    --fs-footer:   15px;

    --nav-icon-size:   24px;
    --fs-wordmark:     16px;
    --hero-copy-gap:   20px;
    --apps-gap-heading: 24px;
    --card-h:          119.91px;
    --cover-w:         86.7px;
    --logo-size:       48.5px;
    --qmark-size:      28.21px;
    --tag-pad-block:   0.88px;
    --tag-pad-inline:  12.045px;
    --tags-gap:        7.025px;
    --card-body-pad-y: 12.07px;
    --card-body-pad-x: 17.225px;
    --card-body-gap:   32px;
    --card-group-gap:  3px;
    --shapes-w:        170.5px;
    --shapes-h:        198.5px;
    --shape-size:      65px;
    --shape-r-sun:     19.75px;
    --shape-r-mint:    23.75px 7.5px 23.75px 7.5px;
    --qmark-dash:      7 5;

    --pos-sun-x: 7.645px;  --pos-sun-y: 20.875px;
    --pos-accent-x: 87.915px; --pos-accent-y: 49.875px;
    --pos-mint-x: 29.71px; --pos-mint-y: 106.265px;
  }
}

/* ------------------------------------------------------------
   TOKENS — mobile (design width 390)
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  :root {
    --border-w:     2.5px;
    --border-w-tag: 2px;
    --border-w-icon: 2px;
    --shadow-card:  3px 3px 0 var(--color-ink);
    --shadow-shape: 2.5px 2.5px 0 var(--color-ink);

    --radius-card:       16px;
    --radius-cover-icon: 10px;
    --qmark-dash:        6 4;
    --radius-shape:      9.5px;

    --fs-h1:       30px;
    --ls-h1:       -2px;
    --fs-hero-sub: 14px;
    --lh-hero-sub: 1.3;
    --fs-h2:       24px;
    --fs-name:     16px;
    --lh-name:     1;
    --fs-desc:     14px;
    --lh-desc:     1;
    --fs-tag:      13px;
    --lh-tag:      1.2;
    --fs-footer:   14px;

    --nav-icon-size:   22px;
    --fs-wordmark:     15px;
    --nav-pad-block:   16px;
    --hero-pad-block:  32px;
    --hero-gap:        10px;
    --hero-copy-gap:   16px;
    --apps-gap-heading: 8px;
    --apps-pad-bottom: 32px;
    --card-h:          100px;
    --cover-w:         60px;
    --logo-size:       40px;
    --qmark-size:      27.4px;
    --tag-pad-block:   1px;
    --tag-pad-inline:  12px;
    --tags-gap:        8px;
    --card-body-pad-y: 6px;
    --card-body-pad-x: 8px;
    --card-body-gap:   0px;
    --card-group-gap:  2px;
    --footer-pad-block: 16px;
    --shapes-w:        65px;
    --shapes-h:        83px;
    --shape-size:      30px;
    --shape-r-sun:     9.5px;
    --shape-r-mint:    9.5px 3px 9.5px 3px;

    --pos-sun-x: 1px;    --pos-sun-y: 3.5px;
    --pos-accent-x: 42.74px; --pos-accent-y: 16.75px;
    --pos-mint-x: 13.24px; --pos-mint-y: 43.74px;
  }
}

/* ------------------------------------------------------------
   TOKENS — theme/dark (defined in Penpot, currently inactive.
   Activate by setting data-theme="dark" on <html>.)
   ------------------------------------------------------------ */
[data-theme="dark"] {
  --color-bg:      #161033;
  --color-surface: #241B52;
  --color-ink:     #F3EFFF;
  --color-muted:   #B5ACDB;
  --color-accent:  #FF7DA6;
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }

.wrap {
  /* Content width matches all three Penpot boards:
     1040px on desktop (1440 - 2×200), 786 on tablet (834 - 2×24),
     342 on mobile (390 - 2×24). Flex column, fills the viewport
     so the footer sits at screen bottom. */
  display: flex;
  flex-direction: column;
  width: min(1040px, 100% - 48px);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--nav-pad-block);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-ink);
}

.logo__icon {
  width: var(--nav-icon-size);
  height: var(--nav-icon-size);
  flex: none;
}

.logo__wordmark {
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-extrabold);
  line-height: 1;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hero-gap);
  padding-block: var(--hero-pad-block);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--hero-copy-gap);
  flex: 1;
  min-width: 0;
}

.hero__heading {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
}

.hero__sub {
  max-width: var(--hero-sub-max);
  font-size: var(--fs-hero-sub);
  font-weight: var(--fw-body);
  line-height: var(--lh-hero-sub);
  color: var(--color-muted);
}

/* Decorative shape stack — three overlapping rotated shapes.
   Absolute positioning is unavoidable here: the design overlaps
   and rotates them (documented in the extraction). */
.hero__shapes {
  position: relative;
  width: var(--shapes-w);
  height: var(--shapes-h);
  flex: none;
}

.shape {
  position: absolute;
  width: var(--shape-size);
  height: var(--shape-size);
  border: var(--border-w) solid var(--color-ink);
  box-shadow: var(--shadow-shape);
}

.shape--sun {
  left: var(--pos-sun-x);
  top: var(--pos-sun-y);
  background: var(--color-sun);
  border-radius: var(--shape-r-sun);
  transform: rotate(var(--rot-sun));
}

.shape--accent {
  left: var(--pos-accent-x);
  top: var(--pos-accent-y);
  background: var(--color-accent);
  border-radius: var(--radius-shape-circle);
  transform: rotate(var(--rot-accent));
}

.shape--mint {
  left: var(--pos-mint-x);
  top: var(--pos-mint-y);
  background: var(--color-mint);
  border-radius: var(--shape-r-mint);
  transform: rotate(var(--rot-mint));
}

/* ------------------------------------------------------------
   APPS SECTION
   ------------------------------------------------------------ */
.apps {
  display: flex;
  flex-direction: column;
  gap: var(--apps-gap-heading);
  padding-bottom: var(--apps-pad-bottom);
  flex: 1; /* absorbs leftover viewport height, keeps footer at bottom */
}

.apps__heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h2);
  color: var(--color-ink);
}

/* Penpot's "Apps grid" is a single 1fr column with rowGap 32 —
   semantically a vertical stack, so flexbox. */
.apps__list {
  display: flex;
  flex-direction: column;
  gap: var(--cards-gap);
  flex: 1; /* list takes all available height */
}

/* ------------------------------------------------------------
   CARD
   ------------------------------------------------------------ */
.card {
  display: flex;
  align-items: stretch; /* cover + divider span full card height */
  min-height: var(--card-h);
  overflow: hidden; /* clips cover to the card radius, as in Penpot */
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card__cover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cover-w);
  flex: none;
}

.card__cover--sun {
  background: var(--color-sun);
}

.card__cover--accent {
  background: var(--color-accent);
}

.card__app-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  background: var(--asset-logo-habit) center / contain no-repeat;
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius-cover-icon);
}

.card__qmark-box {
  position: relative; /* hosts the SVG dash-border overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--logo-size);
  height: var(--logo-size);
  background: #FFFFFF;
  border-radius: var(--radius-cover-icon);
}

/* Native CSS dotted/dashed borders have browser-controlled rhythm and
   can't match Penpot's dash values (9/5, 8/6, 6/4). The SVG rect draws
   the exact pattern; non-scaling-stroke keeps width/dashes crisp while
   the rect scales with the box. Absolute positioning is required —
   CSS borders cannot take a custom dash pattern. */
.card__qmark-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.card__qmark-border rect {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: var(--border-w-icon);
  stroke-dasharray: var(--qmark-dash);
}

.card__qmark {
  font-size: var(--qmark-size);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink);
}

.card__divider {
  width: var(--border-w);
  background: var(--color-ink);
  flex: none;
}

.card__body {
  display: flex;
  flex: 1;
  gap: var(--card-body-gap);
  padding: var(--card-body-pad-y) var(--card-body-pad-x);
}

.card__group {
  display: flex;
  flex-direction: column;
  gap: var(--card-group-gap);
  flex: 1;
  min-width: 0;
}

.card__name {
  font-size: var(--fs-name);
  font-weight: var(--fw-bold);
  line-height: var(--lh-name);
  color: var(--color-ink);
}

.card__desc {
  font-size: var(--fs-desc);
  font-weight: var(--fw-body);
  line-height: var(--lh-desc);
  color: var(--color-muted);
}

.card__tags {
  display: flex;
  gap: var(--tags-gap);
  margin-top: auto; /* pins badges to the card's bottom edge */
}

.tag {
  display: flex;
  align-items: center;
  padding: var(--tag-pad-block) var(--tag-pad-inline);
  border: var(--border-w-tag) solid var(--color-ink);
  border-radius: 999px;
  font-size: var(--fs-tag);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tag);
  color: var(--color-ink);
}

.button {
  align-self: center;
  display: flex;
  align-items: center;
  padding: var(--button-pad-y) var(--button-pad-x);
  background: var(--color-sun);
  border: var(--border-w) solid var(--color-ink);
  border-radius: var(--radius-button);
  box-shadow: var(--shadow-button);
  font-size: var(--fs-button);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-button);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile: body stacks vertically, no button (per Mobile–390 board) */
@media (max-width: 480px) {
  .card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .button {
    display: none;
  }
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer {
  display: flex;
  flex-direction: column;
}

.footer__divider {
  height: 2.5px;
  background: var(--color-ink);
}

.footer__content {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--footer-pad-block);
}

.footer__email {
  font-size: var(--fs-footer);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}