import { defineConfig, presetUno } from "unocss";

const colors = {
  bg: "#080d16",
  "bg-deep": "#050910",
  panel: "#101722",
  "panel-raised": "#151e2b",
  border: "#263242",
  "border-soft": "#1d2836",
  text: "#f4f7f5",
  muted: "#8f9bab",
  "muted-bright": "#b9c2cc",
  accent: "#46e69e",
  "accent-strong": "#28d985",
  "accent-ink": "#062317",
  danger: "#ff7f7f",
};

export default defineConfig({
  presets: [presetUno({ preflight: false })],
  safelist: [
    "site-shell",
    "site-header",
    "brand",
    "brand-mark",
    "brand-i",
    "status-dot",
    "page",
    "hero",
    "eyebrow",
    "hero-copy",
    "rail-layout",
    "panel",
    "panel-main",
    "panel-side",
    "drop-panel",
    "drop-zone",
    "drop-icon",
    "button",
    "button-large",
    "button-secondary",
    "button-small",
    "side-heading",
    "feature-list",
    "feature",
    "feature-icon",
    "selected-file",
    "selected-card",
    "selected-icon",
    "selected-meta",
    "selected-name",
    "selected-detail",
    "icon-button",
    "selected-actions",
    "privacy-note",
    "error-message",
    "success-title",
    "success-copy",
    "share-label",
    "share-box",
    "share-value",
    "success-actions",
    "qr-panel",
    "qr-frame",
    "qr-title",
    "qr-copy",
    "progress-wrap",
    "progress-track",
    "progress-bar",
    "progress-label",
    "download-page",
    "download-heading",
    "download-intro",
    "download-card",
    "ready-badge",
    "download-file",
    "download-button",
    "preview",
    "preview-caption",
    "state-box",
    "spinner",
    "site-footer",
    "footer-security",
  ],
  theme: {
    colors,
    fontFamily: {
      display: "'Instrument Sans', ui-sans-serif, system-ui, sans-serif",
      body: "'Instrument Sans', ui-sans-serif, system-ui, sans-serif",
      mono: "ui-monospace, SFMono-Regular, Menlo, monospace",
    },
    breakpoints: {
      // Uno's lt-* variants subtract .1px; offset these to preserve the original inclusive max-width queries.
      sm: "560.1px",
      md: "800.1px",
    },
    transitionProperty: {
      drop: "border-color, background, transform",
      button: "transform, background, box-shadow",
    },
    animation: {
      keyframes: {
        progress:
          "{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}",
        spin: "{to{transform:rotate(360deg)}}",
      },
    },
  },
  shortcuts: {
    "site-shell":
      "w-[min(1180px,calc(100%_-_40px))] min-h-screen mx-auto flex flex-col lt-sm:w-[min(100%_-_26px,1180px)]",
    "site-header": "h-16 flex items-center justify-between lt-sm:h-[72px]",
    brand:
      "inline-flex items-center gap-[11px] text-[var(--text)] font-display text-[21px] font-800 tracking-[-.04em] no-underline",
    "brand-mark":
      "w-[33px] h-[33px] grid place-items-center border border-[rgba(70,230,158,.3)] rounded-[10px] text-accent bg-[rgba(70,230,158,.08)] [&>svg]:w-[19px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.8] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
    "brand-i":
      "relative after:absolute after:left-[22%] after:top-[4.5px] after:h-[3.5px] after:w-[3.5px] after:-translate-x-[22%] after:bg-accent after:content-empty",
    "status-dot":
      "w-[7px] h-[7px] rounded-full bg-accent shadow-[0_0_12px_rgba(70,230,158,.75)]",
    page: "pt-4 pb-[64px] lt-md:pt-[50px] lt-sm:pt-[40px] lt-sm:pb-[50px]",
    hero: "max-w-[720px] mb-[44px] lt-sm:mb-[30px]",
    eyebrow:
      "m-0 mb-[15px] text-accent text-[12px] font-700 tracking-[.14em] uppercase",
    "hero-copy":
      "max-w-[600px] m-0 text-[var(--muted)] text-[18px] leading-[1.65] lt-sm:text-[16px]",
    "rail-layout":
      "grid grid-cols-[minmax(0,1.18fr)_minmax(320px,.82fr)] gap-[22px] items-stretch lt-md:grid-cols-[minmax(0,1fr)]",
    panel:
      "min-w-0 border border-[var(--border)] rounded-[20px] bg-[rgba(16,23,34,.9)] shadow-[0_22px_70px_rgba(0,0,0,.18)]",
    "panel-main": "min-h-[418px] p-[clamp(25px,4vw,42px)] lt-sm:p-[22px]",
    "panel-side": "p-[clamp(25px,3vw,36px)] lt-md:min-h-auto lt-sm:p-[22px]",
    "drop-panel": "flex flex-col",
    "drop-zone":
      "my-auto min-h-[282px] flex flex-col items-center justify-center p-[35px] border border-dashed border-[#35475a] rounded-[15px] text-center cursor-pointer bg-[rgba(8,13,22,.48)] transition-drop duration-200 hover:border-accent hover:bg-[rgba(70,230,158,.04)] hover:translate-y-[-2px] [&.is-dragging]:border-accent [&.is-dragging]:bg-[rgba(70,230,158,.04)] [&.is-dragging]:translate-y-[-2px] [&:has(.file-input:focus-visible)]:border-accent [&:has(.file-input:focus-visible)]:bg-[rgba(70,230,158,.04)] [&:has(.file-input:focus-visible)]:translate-y-[-2px] [&:has(.file-input:focus-visible)]:outline-[3px] [&:has(.file-input:focus-visible)]:outline-[rgba(70,230,158,.35)] [&:has(.file-input:focus-visible)]:outline-offset-[3px] [&>h2]:mb-[8px] [&>h2]:text-[21px] [&>h2]:tracking-[-.025em] [&>p]:mb-[21px] [&>p]:text-[var(--muted)] [&>p]:text-[14px] lt-sm:min-h-[250px] lt-sm:py-[25px] lt-sm:px-[15px]",
    "drop-icon":
      "w-[54px] h-[54px] grid place-items-center mb-[20px] rounded-[15px] text-accent bg-[rgba(70,230,158,.1)] [&>svg]:w-[27px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
    button:
      "min-h-[48px] inline-flex items-center justify-center gap-[10px] px-[20px] rounded-[10px] text-[var(--accent-ink)] bg-accent font-700 no-underline cursor-pointer transition-button duration-180 hover:not-disabled:bg-[#5ef0ae] hover:not-disabled:translate-y-[-2px] hover:not-disabled:shadow-[0_10px_28px_rgba(70,230,158,.16)] disabled:cursor-not-allowed disabled:opacity-55 [&>svg]:w-[20px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-2 [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
    "button-large": "min-h-[58px] w-full text-[16px]",
    "button-secondary":
      "text-[var(--text)] border border-[var(--border)] bg-[var(--panel-raised)] hover:not-disabled:bg-[#1a2533] hover:not-disabled:shadow-none",
    "button-small": "min-h-[39px] px-[14px] text-[13px]",
    "side-heading": "mb-[24px] text-[17px] tracking-[-.02em]",
    "feature-list": "grid gap-[23px] m-0 p-0 list-none",
    feature:
      "grid grid-cols-[38px_1fr] gap-[14px] [&_h3]:m-[1px_0_4px] [&_h3]:text-[14px] [&_p]:m-0 [&_p]:text-[var(--muted)] [&_p]:text-[13px] [&_p]:leading-[1.5]",
    "feature-icon":
      "w-[38px] h-[38px] grid place-items-center border border-[rgba(70,230,158,.16)] rounded-[10px] text-accent bg-[rgba(70,230,158,.06)] [&>svg]:w-[18px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
    "selected-file": "h-full flex flex-col justify-center",
    "selected-card":
      "flex items-center gap-[16px] p-[17px] border border-[var(--border)] rounded-[13px] bg-[var(--bg)]",
    "selected-icon":
      "w-[49px] h-[49px] flex-none grid place-items-center rounded-[12px] text-accent bg-[rgba(70,230,158,.09)] [&>svg]:w-[24px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
    "selected-meta": "min-w-0 flex-1",
    "selected-name":
      "m-0 mb-[3px] overflow-hidden text-[var(--text)] font-600 text-ellipsis whitespace-nowrap",
    "selected-detail": "m-0 text-[var(--muted)] text-[13px]",
    "icon-button":
      "w-[38px] h-[38px] flex-none grid place-items-center rounded-[9px] text-[var(--muted)] bg-transparent cursor-pointer hover:text-[var(--text)] hover:bg-[var(--panel-raised)] [&>svg]:w-[18px] [&>svg]:fill-none [&>svg]:stroke-current [&>svg]:stroke-width-[1.8] [&>svg]:[stroke-linecap:round]",
    "selected-actions":
      "grid grid-cols-[1fr_auto] gap-[10px] mt-[18px] lt-sm:grid-cols-[1fr]",
    "privacy-note":
      "flex items-start gap-[9px] m-[21px_0_0] text-[var(--muted)] text-[12px] leading-[1.5] [&>svg]:w-[15px] [&>svg]:min-w-[15px] [&>svg]:mt-[1px] [&>svg]:fill-none [&>svg]:stroke-accent [&>svg]:stroke-width-[1.8]",
    "error-message": "m-[16px_0_0] text-danger text-[13px]",
    "success-title": "mb-[8px] text-[27px] tracking-[-.04em]",
    "success-copy": "mb-[27px] text-[var(--muted)] leading-[1.6]",
    "share-label":
      "block mb-[9px] text-[var(--muted-bright)] text-[12px] font-600",
    "share-box":
      "flex gap-[9px] p-[8px] border border-[var(--border)] rounded-[12px] bg-[var(--bg)] lt-sm:flex-col",
    "share-value":
      "min-w-0 flex-1 p-[10px_7px] overflow-hidden border-0 text-accent bg-transparent font-mono text-[13px] text-ellipsis whitespace-nowrap lt-sm:w-full",
    "success-actions": "mt-[28px]",
    "qr-panel":
      "flex flex-col items-center justify-center text-center lt-md:py-[36px]",
    "qr-frame":
      "w-[min(100%,300px)] aspect-square p-[16px] rounded-[15px] bg-white shadow-[0_16px_45px_rgba(0,0,0,.24)] lt-md:w-[min(260px,80vw)] [&>svg]:block [&>svg]:w-full [&>svg]:h-full",
    "qr-title": "mt-[22px] mb-[7px] text-[16px]",
    "qr-copy":
      "max-w-[260px] m-0 text-[var(--muted)] text-[13px] leading-[1.55]",
    "progress-wrap": "mt-[24px]",
    "progress-track": "h-[5px] overflow-hidden rounded-full bg-[#263242]",
    "progress-bar":
      "w-[38%] h-full rounded-inherit bg-accent animate-[progress_1.3s_ease-in-out_infinite]",
    "progress-label": "mt-[11px] text-[var(--muted)] text-[13px]",
    "download-page":
      "max-w-[920px] mx-auto py-[82px] pb-[72px] lt-sm:pt-[50px]",
    "download-heading":
      "mb-[13px] text-[clamp(34px,5vw,53px)] text-center tracking-[-.05em]",
    "download-intro":
      "max-w-[580px] mx-auto mb-[35px] text-[var(--muted)] text-[16px] leading-[1.6] text-center",
    "download-card": "max-w-[680px] mx-auto p-[clamp(25px,5vw,42px)]",
    "ready-badge":
      "w-fit flex items-center gap-[8px] mx-auto mb-[25px] py-[7px] px-[11px] rounded-full text-accent bg-[rgba(70,230,158,.08)] text-[12px] font-700",
    "download-file": "mb-[22px]",
    preview:
      "mt-[26px] overflow-hidden border border-[var(--border)] rounded-[14px] bg-[var(--bg-deep)] [&_img]:w-full [&_img]:max-h-[460px] [&_img]:block [&_img]:object-contain [&_video]:w-full [&_video]:max-h-[460px] [&_video]:block [&_video]:object-contain",
    "preview-caption":
      "p-[10px_14px] border-t border-[var(--border-soft)] text-[var(--muted)] text-[12px] text-center",
    "state-box":
      "min-h-[330px] flex flex-col items-center justify-center text-center [&>h2]:mb-[8px] [&>h2]:text-[21px] [&>p]:max-w-[420px] [&>p]:mb-[22px] [&>p]:text-[var(--muted)] [&>p]:leading-[1.55]",
    spinner:
      "w-[32px] h-[32px] mb-[19px] border-[3px] border-[#263242] border-t-accent rounded-full animate-[spin_.8s_linear_infinite]",
    "site-footer":
      "min-h-[86px] flex items-center justify-between gap-[20px] border-t border-[var(--border-soft)] text-[var(--muted)] text-[12px] lt-sm:py-[23px] lt-sm:flex-col lt-sm:items-start [&>p]:m-0",
    "footer-security":
      "flex items-center gap-[7px] [&>svg]:w-[15px] [&>svg]:fill-none [&>svg]:stroke-accent [&>svg]:stroke-width-[1.7] [&>svg]:[stroke-linecap:round] [&>svg]:[stroke-linejoin:round]",
  },
  preflights: [
    {
      layer: "base",
      getCSS: () => `
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-VariableFont_wdth,wght.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400 800;
}
:root {
  --bg: #080d16;
  --bg-deep: #050910;
  --panel: #101722;
  --panel-raised: #151e2b;
  --border: #263242;
  --border-soft: #1d2836;
  --text: #f4f7f5;
  --muted: #8f9bab;
  --muted-bright: #b9c2cc;
  --accent: #46e69e;
  --accent-strong: #28d985;
  --accent-ink: #062317;
  --danger: #ff7f7f;
  --font-display: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html { min-height: 100%; color-scheme: dark; background: var(--bg); font-family: var(--font-body); }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 78% 8%, rgba(70, 230, 158, .07), transparent 27rem), radial-gradient(circle at 10% 50%, rgba(58, 126, 250, .05), transparent 30rem), var(--bg);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: '';
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { border: 0; }
:focus-visible { outline: 3px solid rgba(70,230,158,.5); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-display); }
h1 { margin-bottom: 17px; font-size: clamp(40px, 6vw, 68px); line-height: 1.04; letter-spacing: -.055em; }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
`,
    },
  ],
});