/* ---------------------------------------------------------------------------
   Mapily brand tokens — the single source of truth for BOTH the landing page
   and the /@handle map pages. Change a value here and it moves everywhere.

   Accent rationale: the product is a map, and pin.png is red. One accent taken
   from the pin ties the marketing page to the thing it is selling, instead of
   the three that used to compete (landing blue, app purple, pin red).

   Neutral rationale: the neutrals are sampled from the basemap itself. The
   CARTO Voyager land tile is oklch(98% 0.0074 81) and its shaded land is
   oklch(96.6% 0.0131 82) — butter, not pink. The old neutrals sat at hue 28-30,
   so the page paper and the map paper were visibly different materials with the
   map floating on top. Moving the whole neutral ramp to hue ~80 makes the page a
   continuation of the map instead of a frame around it.

   Contrast (measured, sRGB). The brand red cannot carry text, so the scale
   splits by job:
     #d45d58 on white  3.81  -> pins and large fills only (AA graphics needs 3:1)
     #c44944 on white  4.79  -> text and small controls on white
     #b83f3a on tint   4.89  -> text on --color-accent-soft, where #c44944 is 4.25
--------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

:root {
    color-scheme: light;

    /* neutrals — sampled from the basemap paper, so page and map are one sheet */
    --color-canvas:         oklch(98.0% 0.008 81);
    --color-surface:        oklch(99.3% 0.004 81);
    --color-surface-muted:  oklch(96.4% 0.013 82);
    --color-ink:            oklch(24% 0.014 60);
    --color-ink-muted:      oklch(50% 0.012 62);
    /* 64% measured 3.18:1 on the paper, and this token carries real small print
       (the hero note, "Optional" field hints, the privacy line under the beta
       form), not decoration. 55% is the lightest step that clears AA at 4.5:1
       while still reading as a tier below --color-ink-muted's 5.67:1. */
    --color-ink-faint:      oklch(55% 0.011 64);
    --color-border:         oklch(90% 0.012 78);
    --color-border-strong:  oklch(81% 0.016 78);

    /* accent */
    --color-accent:         #c44944;   /* text, labels, small controls  (4.79) */
    --color-accent-hover:   #b83f3a;
    --color-accent-soft:    #fdeeed;
    --color-accent-on-soft: #b83f3a;   /* on the tint, where accent is 4.25 (4.89) */
    --color-accent-bright:  #d45d58;   /* the pin red, large fills only (3.81) */
    --color-on-accent:      #ffffff;

    /* Primary action. Deliberately not the accent: red belongs to pins, so the
       button stays ink. It used to be #1f2937, which is hue 257 — a navy on a
       butter page, the last survivor of the old blue brand. Warm ink instead. */
    --color-action:         oklch(26% 0.020 62);
    --color-action-hover:   oklch(20% 0.018 62);

    --color-success: oklch(50% 0.13 155);
    --color-danger:  oklch(52% 0.18 28);

    /* type */
    --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 16px; --fs-lg: 18px;
    --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 40px;

    /* spacing + shape */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 24px; --space-6: 32px; --space-8: 48px;
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
    --radius-xl: 24px; --radius-round: 999px;

    --shadow-float: 0 12px 30px oklch(24% 0.018 55 / 0.12);
    --shadow-sheet: 0 -14px 40px oklch(24% 0.018 55 / 0.14);
    --shadow-button: 0 2px 8px oklch(24% 0.018 55 / 0.14);

    /* Motion. --ease-out is the product's existing curve and stays as it is so
       the map chrome is unchanged; the quint/expo pair is for the landing page's
       entrances, where a longer tail reads as weight rather than snap. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-out-quint: cubic-bezier(.22, 1, .36, 1);
    --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
    /* A pin falling under gravity: fast at the end, then a small settle. */
    --ease-drop: cubic-bezier(.34, .01, .3, 1);

    /* --- aliases so the ported mapily-static stylesheet consumes these too --- */
    --primary-color: var(--color-accent);
    --primary-dark: var(--color-accent-hover);
    --text-color: var(--color-ink);
    --text-muted: var(--color-ink-muted);
    --background-color: var(--color-surface);
    --secondary-background: var(--color-surface-muted);
    --surface-tint: var(--color-canvas);
    --border-color: var(--color-border);
    --shadow-soft: var(--shadow-float);
}

:focus-visible {
    outline: 3px solid oklch(58% 0.16 25 / 0.42);
    outline-offset: 2px;
}

/* Map marker for MapilyMap. Lives here, not in gtm.css, because BOTH the landing
   and the creator pages load brand.css — the marker was invisible on creator
   pages when this rule sat in a stylesheet only the landing pulled in.
   44px hit box, pin drawn 28px tall at its bottom centre so the tip lands on
   the coordinate and the selected pin grows without the tip moving. */
.mapily-pin {
    background-image: url("/pins/pin.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 28px 28px;
    transition: background-size 140ms var(--ease-out);
}
.mapily-pin.is-selected { background-size: 38px 38px; }