@import "tailwindcss";

@theme {
  /* palette */
  --color-neutral-50: #ffffff;
  --color-neutral-200-1: #c6c6c6;
  --color-neutral-950: #000000;
  --color-neutral-900: #0f0f0f;
  --color-violet-600: #7a00df;
  --color-blue-600: #005a87;
  --color-violet-500: #9b51e0;
  --color-red-300: #f78da7;
  --color-neutral-300: #abb8c3;
  --color-green-300: #00d084;
  --color-neutral-200-2: #dddddd;
  --color-blue-500-1: #007cba;
  --color-orange-400: #ff6900;
  --color-blue-400: #0693e3;
  --color-blue-200: #8ed1fc;
  --color-neutral-100: #e5e5e5;
  --color-yellow-200: #fcb900;
  --color-orange-500: #cf2e2e;
  --color-teal-200: #7bdcb5;
  --color-blue-500-2: #006ba1;

  /* surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #e5e5e5;
  --color-surface-2: #c6c6c6;
  --color-surface-3: #abb8c3;
  --color-surface-4: #0f0f0f;

  /* fonts */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-times-new-roman: "Times New Roman", ui-sans-serif, system-ui, sans-serif;

  /* type scale (utilities: text-{role}, leading-{role}, tracking-{role}) */
  --text-display: 32px;
  --text-display--line-height: 1.4;
  --text-display--letter-spacing: nullpx;
  --text-body: 17px;
  --text-body--line-height: 1.4;
  --text-body--letter-spacing: nullpx;
  --text-h3: 17px;
  --text-h3--line-height: 1.4;
  --text-h3--letter-spacing: nullpx;
  --text-link: 17px;
  --text-link--line-height: 1.4;
  --text-link--letter-spacing: nullpx;
  --text-ui-action: 17px;
  --text-ui-action--line-height: 1;
  --text-ui-action--letter-spacing: nullpx;
  --text-ui-input: 17px;
  --text-ui-input--line-height: 1;
  --text-ui-input--letter-spacing: nullpx;

  /* radii (utilities: rounded-{name}) */
  --radius-none: 0;
  --radius-md: 6px;

  /* spacing (utilities: p-{key}, m-{key}, gap-{key}, …) */
  --spacing-base: 1px;
}

:root {
  /* palette */
  --color-neutral-50: #ffffff;
  --color-neutral-200-1: #c6c6c6;
  --color-neutral-950: #000000;
  --color-neutral-900: #0f0f0f;
  --color-violet-600: #7a00df;
  --color-blue-600: #005a87;
  --color-violet-500: #9b51e0;
  --color-red-300: #f78da7;
  --color-neutral-300: #abb8c3;
  --color-green-300: #00d084;
  --color-neutral-200-2: #dddddd;
  --color-blue-500-1: #007cba;
  --color-orange-400: #ff6900;
  --color-blue-400: #0693e3;
  --color-blue-200: #8ed1fc;
  --color-neutral-100: #e5e5e5;
  --color-yellow-200: #fcb900;
  --color-orange-500: #cf2e2e;
  --color-teal-200: #7bdcb5;
  --color-blue-500-2: #006ba1;

  /* surfaces */
  --surface-0: #ffffff;
  --surface-1: #e5e5e5;
  --surface-2: #c6c6c6;
  --surface-3: #abb8c3;
  --surface-4: #0f0f0f;

  /* type scale */
  --text-display: 32px;
  --leading-display: 1.4;
  --tracking-display: nullpx;
  --text-body: 17px;
  --leading-body: 1.4;
  --tracking-body: nullpx;
  --text-h3: 17px;
  --leading-h3: 1.4;
  --tracking-h3: nullpx;
  --text-link: 17px;
  --leading-link: 1.4;
  --tracking-link: nullpx;
  --text-ui-action: 17px;
  --leading-ui-action: 1;
  --tracking-ui-action: nullpx;
  --text-ui-input: 17px;
  --leading-ui-input: 1;
  --tracking-ui-input: nullpx;

  /* font families */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-times-new-roman: "Times New Roman", ui-sans-serif, system-ui, sans-serif;

  /* radii */
  --radius-none: 0;
  --radius-md: 6px;

  /* spacing */
  --spacing-base: 1px;
}

{
  "theme": "dark",
  "category": null,
  "tags": [
    "dark",
    "vibrant",
    "cool",
    "sans-only",
    "minimal",
    "achromatic",
    "grid-driven",
    "spacious",
    "editorial"
  ],
  "northStar": "A gallery of beautiful & functional websites — a dark canvas that gets out of the way of every featured screenshot.",
  "description": "Minimal Gallery is a dark-canvas archive of curated website screenshots organized in a uniform 3-column grid. The dark background lets each screenshot's own colors pop; thumbnails are nearly edge-to-edge with small captions below. A thin top tag bar (AI · Portfolio · Personal · Startup · One page · Agency · E-commerce · Branding · Tools · Finance · SAAS · Type foundry…) is the entire navigation. Italics for the site title in the hero, otherwise a quiet sans throughout.",
  "colors": [
    {
      "name": "neutral-50",
      "hex": "#ffffff",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "zinc-50",
        "hex": "#fafafa",
        "deltaE": 0.015
      }
    },
    {
      "name": "neutral-200-1",
      "hex": "#c6c6c6",
      "group": "neutral",
      "role": "neutral step 200",
      "tailwind": null
    },
    {
      "name": "neutral-950",
      "hex": "#000000",
      "group": "neutral",
      "role": "neutral step 950",
      "tailwind": null
    },
    {
      "name": "neutral-900",
      "hex": "#0f0f0f",
      "group": "neutral",
      "role": "neutral step 900",
      "tailwind": {
        "name": "stone-950",
        "hex": "#0c0a09",
        "deltaE": 0.022
      }
    },
    {
      "name": "violet-600",
      "hex": "#7a00df",
      "group": "violet",
      "role": "violet step 600",
      "tailwind": {
        "name": "purple-700",
        "hex": "#8200db",
        "deltaE": 0.012
      }
    },
    {
      "name": "blue-600",
      "hex": "#005a87",
      "group": "blue",
      "role": "blue step 600",
      "tailwind": {
        "name": "sky-800",
        "hex": "#00598a",
        "deltaE": 0.005
      }
    },
    {
      "name": "violet-500",
      "hex": "#9b51e0",
      "group": "violet",
      "role": "violet step 500",
      "tailwind": null
    },
    {
      "name": "red-300",
      "hex": "#f78da7",
      "group": "red",
      "role": "red step 300",
      "tailwind": null
    },
    {
      "name": "neutral-300",
      "hex": "#abb8c3",
      "group": "neutral",
      "role": "neutral step 300",
      "tailwind": null
    },
    {
      "name": "green-300",
      "hex": "#00d084",
      "group": "green",
      "role": "green step 300",
      "tailwind": {
        "name": "emerald-400",
        "hex": "#00d492",
        "deltaE": 0.016
      }
    },
    {
      "name": "neutral-200-2",
      "hex": "#dddddd",
      "group": "neutral",
      "role": "neutral step 200",
      "tailwind": {
        "name": "zinc-200",
        "hex": "#e4e4e7",
        "deltaE": 0.023
      }
    },
    {
      "name": "blue-500-1",
      "hex": "#007cba",
      "group": "blue",
      "role": "blue step 500",
      "tailwind": null
    },
    {
      "name": "orange-400",
      "hex": "#ff6900",
      "group": "orange",
      "role": "orange step 400",
      "tailwind": {
        "name": "orange-500",
        "hex": "#ff6900",
        "deltaE": 0
      }
    },
    {
      "name": "blue-400",
      "hex": "#0693e3",
      "group": "blue",
      "role": "blue step 400",
      "tailwind": null
    },
    {
      "name": "blue-200",
      "hex": "#8ed1fc",
      "group": "blue",
      "role": "blue step 200",
      "tailwind": {
        "name": "sky-300",
        "hex": "#74d4ff",
        "deltaE": 0.02
      }
    },
    {
      "name": "neutral-100",
      "hex": "#e5e5e5",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "neutral-200",
        "hex": "#e5e5e5",
        "deltaE": 0
      }
    },
    {
      "name": "yellow-200",
      "hex": "#fcb900",
      "group": "yellow",
      "role": "yellow step 200",
      "tailwind": {
        "name": "amber-400",
        "hex": "#ffb900",
        "deltaE": 0.004
      }
    },
    {
      "name": "orange-500",
      "hex": "#cf2e2e",
      "group": "orange",
      "role": "orange step 500",
      "tailwind": {
        "name": "orange-700",
        "hex": "#ca3500",
        "deltaE": 0.019
      }
    },
    {
      "name": "teal-200",
      "hex": "#7bdcb5",
      "group": "teal",
      "role": "teal step 200",
      "tailwind": null
    },
    {
      "name": "blue-500-2",
      "hex": "#006ba1",
      "group": "blue",
      "role": "blue step 500",
      "tailwind": {
        "name": "sky-700",
        "hex": "#0069a8",
        "deltaE": 0.011
      }
    }
  ],
  "surfaces": [
    {
      "level": 0,
      "name": "background",
      "hex": "#ffffff",
      "purpose": "Page background"
    },
    {
      "level": 1,
      "name": "surface-1",
      "hex": "#e5e5e5",
      "purpose": "Cards / elevated panels"
    },
    {
      "level": 2,
      "name": "surface-2",
      "hex": "#c6c6c6",
      "purpose": "Elevation tier 2"
    },
    {
      "level": 3,
      "name": "surface-3",
      "hex": "#abb8c3",
      "purpose": "Elevation tier 3"
    },
    {
      "level": 4,
      "name": "surface-floor",
      "hex": "#0f0f0f",
      "purpose": "Elevation tier 4"
    }
  ],
  "elevationPhilosophy": "Completely flat. The dark canvas is the only stage. Screenshots sit edge-to-edge with their natural shadows or chrome (if any) doing all the visual lifting.",
  "typography": [
    {
      "family": "Inter",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "Times New Roman",
      "weight": "400",
      "role": "serif",
      "fontFeatureSettings": null,
      "substitute": null
    }
  ],
  "typeScale": [
    {
      "role": "display",
      "size": 32,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "body",
      "size": 17,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "h3",
      "size": 17,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "link",
      "size": 17,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "ui-action",
      "size": 17,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "ui-input",
      "size": 17,
      "lineHeight": 1,
      "letterSpacing": null
    }
  ],
  "spacing": {
    "radius": {
      "none": "0",
      "md": "6px"
    },
    "base": "1px"
  },
  "layout": "Centered hero (logo, italic tagline, email opt-in) → horizontal tag filter row → uniform 3-column grid of screenshots → pagination strip → minimal footer.",
  "imagery": "Pure curation: hundreds of website screenshots, each at the same aspect ratio, each carrying its own design's color story. The gallery's job is to be a frame.",
  "dos": [
    "Stay dark by default — every featured screenshot has more vibrancy that way",
    "Lock the layout to a uniform 3-column grid; the rhythm is the personality",
    "Keep the tag-bar navigation horizontal and scannable, not hidden behind a hamburger",
    "Use thin sans-serif caption type that yields to the screenshots above"
  ],
  "donts": [
    "Don't break the grid — varying cell sizes would compete with the screenshots themselves",
    "Don't add accent colors or backgrounds beyond the dark canvas",
    "Don't shadow or border the screenshots; the dark gutters do the separation",
    "Don't introduce display-scale headlines mid-page — only the hero gets a moment"
  ],
  "brandColor": {
    "hex": "#7a00df",
    "source": "heuristic",
    "chroma": 0.266
  }
}