@import "tailwindcss";

@theme {
  /* palette */
  --color-neutral-900: #121212;
  --color-neutral-50-1: #ffffff;
  --color-neutral-950: #000000;
  --color-neutral-600: #5a5a5a;
  --color-neutral-700: #333333;
  --color-blue-700: #2d3748;
  --color-neutral-500: #727272;
  --color-neutral-100-1: #e1e7ee;
  --color-neutral-200: #c7c7c7;
  --color-neutral-50-2: #f8f8f8;
  --color-neutral-100-2: #edf2f7;
  --color-neutral-400: #8b8b8b;
  --color-neutral-100-3: #dfdfdf;
  --color-neutral-100-4: #ebebeb;

  /* surfaces */
  --color-surface-0: #ffffff;
  --color-surface-1: #edf2f7;
  --color-surface-2: #dfdfdf;

  /* fonts */
  --font-times-new-roman: "Times New Roman", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-franklin: "nyt-franklin", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-cheltenham: "nyt-cheltenham", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-imperial: "nyt-imperial", ui-sans-serif, system-ui, sans-serif;

  /* type scale (utilities: text-{role}, leading-{role}, tracking-{role}) */
  --text-body: 16px;
  --text-body--line-height: 1;
  --text-body--letter-spacing: nullpx;
  --text-display: 16px;
  --text-display--line-height: 1;
  --text-display--letter-spacing: nullpx;
  --text-h2: 16px;
  --text-h2--line-height: 1;
  --text-h2--letter-spacing: nullpx;
  --text-link: 14px;
  --text-link--line-height: 1.4;
  --text-link--letter-spacing: nullpx;
  --text-ui-action: 14px;
  --text-ui-action--line-height: 1.4;
  --text-ui-action--letter-spacing: nullpx;
  --text-h3: 13px;
  --text-h3--line-height: 1.15;
  --text-h3--letter-spacing: nullpx;

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

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

:root {
  /* palette */
  --color-neutral-900: #121212;
  --color-neutral-50-1: #ffffff;
  --color-neutral-950: #000000;
  --color-neutral-600: #5a5a5a;
  --color-neutral-700: #333333;
  --color-blue-700: #2d3748;
  --color-neutral-500: #727272;
  --color-neutral-100-1: #e1e7ee;
  --color-neutral-200: #c7c7c7;
  --color-neutral-50-2: #f8f8f8;
  --color-neutral-100-2: #edf2f7;
  --color-neutral-400: #8b8b8b;
  --color-neutral-100-3: #dfdfdf;
  --color-neutral-100-4: #ebebeb;

  /* surfaces */
  --surface-0: #ffffff;
  --surface-1: #edf2f7;
  --surface-2: #dfdfdf;

  /* type scale */
  --text-body: 16px;
  --leading-body: 1;
  --tracking-body: nullpx;
  --text-display: 16px;
  --leading-display: 1;
  --tracking-display: nullpx;
  --text-h2: 16px;
  --leading-h2: 1;
  --tracking-h2: nullpx;
  --text-link: 14px;
  --leading-link: 1.4;
  --tracking-link: nullpx;
  --text-ui-action: 14px;
  --leading-ui-action: 1.4;
  --tracking-ui-action: nullpx;
  --text-h3: 13px;
  --leading-h3: 1.15;
  --tracking-h3: nullpx;

  /* font families */
  --font-times-new-roman: "Times New Roman", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-franklin: "nyt-franklin", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-cheltenham: "nyt-cheltenham", ui-sans-serif, system-ui, sans-serif;
  --font-nyt-imperial: "nyt-imperial", ui-sans-serif, system-ui, sans-serif;

  /* radii */
  --radius-none: 0;
  --radius-sm: 3px;

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

{
  "theme": "light",
  "category": "media",
  "tags": [
    "achromatic",
    "serif-heavy",
    "editorial",
    "dense",
    "minimal",
    "media",
    "grid-driven"
  ],
  "northStar": "America's newspaper of record on the web — Cheltenham masthead, dense print-grid layout, photojournalism front and center.",
  "description": "The New York Times website carries decades of editorial design DNA into the browser. A blackletter masthead anchors the top, headlines are set in NYT's house display serif (Cheltenham/Imperial), and body copy is a clean serif. Layout is unapologetically dense: multi-column grids, small image thumbnails, generous use of dotted dividers, italics for credits. White canvas, near-black text, and a single muted blue for links. The personality is journalistic restraint, built for reading.",
  "colors": [
    {
      "name": "neutral-900",
      "hex": "#121212",
      "group": "neutral",
      "role": "neutral step 900",
      "tailwind": {
        "name": "neutral-900",
        "hex": "#171717",
        "deltaE": 0.022
      }
    },
    {
      "name": "neutral-50-1",
      "hex": "#ffffff",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "zinc-50",
        "hex": "#fafafa",
        "deltaE": 0.015
      }
    },
    {
      "name": "neutral-950",
      "hex": "#000000",
      "group": "neutral",
      "role": "neutral step 950",
      "tailwind": null
    },
    {
      "name": "neutral-600",
      "hex": "#5a5a5a",
      "group": "neutral",
      "role": "neutral step 600",
      "tailwind": null
    },
    {
      "name": "neutral-700",
      "hex": "#333333",
      "group": "neutral",
      "role": "neutral step 700",
      "tailwind": null
    },
    {
      "name": "blue-700",
      "hex": "#2d3748",
      "group": "blue",
      "role": "blue step 700",
      "tailwind": null
    },
    {
      "name": "neutral-500",
      "hex": "#727272",
      "group": "neutral",
      "role": "neutral step 500",
      "tailwind": {
        "name": "neutral-500",
        "hex": "#737373",
        "deltaE": 0.003
      }
    },
    {
      "name": "neutral-100-1",
      "hex": "#e1e7ee",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "slate-200",
        "hex": "#e2e8f0",
        "deltaE": 0.004
      }
    },
    {
      "name": "neutral-200",
      "hex": "#c7c7c7",
      "group": "neutral",
      "role": "neutral step 200",
      "tailwind": null
    },
    {
      "name": "neutral-50-2",
      "hex": "#f8f8f8",
      "group": "neutral",
      "role": "neutral step 50",
      "tailwind": {
        "name": "gray-50",
        "hex": "#f9fafb",
        "deltaE": 0.006
      }
    },
    {
      "name": "neutral-100-2",
      "hex": "#edf2f7",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "slate-100",
        "hex": "#f1f5f9",
        "deltaE": 0.01
      }
    },
    {
      "name": "neutral-400",
      "hex": "#8b8b8b",
      "group": "neutral",
      "role": "neutral step 400",
      "tailwind": null
    },
    {
      "name": "neutral-100-3",
      "hex": "#dfdfdf",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "zinc-200",
        "hex": "#e4e4e7",
        "deltaE": 0.017
      }
    },
    {
      "name": "neutral-100-4",
      "hex": "#ebebeb",
      "group": "neutral",
      "role": "neutral step 100",
      "tailwind": {
        "name": "gray-200",
        "hex": "#e5e7eb",
        "deltaE": 0.014
      }
    }
  ],
  "surfaces": [
    {
      "level": 0,
      "name": "background",
      "hex": "#ffffff",
      "purpose": "Page background"
    },
    {
      "level": 1,
      "name": "surface-1",
      "hex": "#edf2f7",
      "purpose": "Cards / elevated panels"
    },
    {
      "level": 2,
      "name": "surface-floor",
      "hex": "#dfdfdf",
      "purpose": "Elevation tier 2"
    }
  ],
  "elevationPhilosophy": "Completely flat. Hierarchy comes from typographic weight and grid columns, not from shadow. Section bands occasionally use a near-white tint to separate Opinion / Wirecutter / Cooking, but never lift.",
  "typography": [
    {
      "family": "Times New Roman",
      "weight": "400",
      "role": "serif",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "nyt-franklin",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "nyt-cheltenham",
      "weight": "700",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    },
    {
      "family": "nyt-imperial",
      "weight": "400",
      "role": "body",
      "fontFeatureSettings": null,
      "substitute": null
    }
  ],
  "typeScale": [
    {
      "role": "body",
      "size": 16,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "display",
      "size": 16,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "h2",
      "size": 16,
      "lineHeight": 1,
      "letterSpacing": null
    },
    {
      "role": "link",
      "size": 14,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "ui-action",
      "size": 14,
      "lineHeight": 1.4,
      "letterSpacing": null
    },
    {
      "role": "h3",
      "size": 13,
      "lineHeight": 1.15,
      "letterSpacing": null
    }
  ],
  "spacing": {
    "radius": {
      "none": "0",
      "sm": "3px"
    },
    "base": "1px"
  },
  "layout": "Three to four narrow columns of headline-deck-thumbnail triplets, separated by dotted gray rules. Above-the-fold runs a wide hero spanning two columns. The reading rhythm is unmistakably print-newspaper.",
  "imagery": "Photojournalism on every story — large hero photos for top stories, small thumbnails for everything else. Black-and-white archival imagery for retrospectives, color for breaking news. Photo captions in italic gray.",
  "dos": [
    "Set headlines in a serif display face (Cheltenham/Imperial); body in a sans or readable serif",
    "Use a multi-column print grid with thin gray dividers between articles",
    "Reserve color for links and section badges; keep the canvas near-white",
    "Pair small thumbnail photos with dense headline-deck-byline triplets"
  ],
  "donts": [
    "Don't use rounded buttons or pill UI — the voice is journalistic, not consumer",
    "Don't introduce additional accent colors beyond NYT's editorial blue",
    "Don't break the grid for marketing-style hero blocks — the homepage is a newsroom",
    "Don't reduce information density; readers come to scan many stories quickly"
  ],
  "brandColor": null
}