@tailwind base;
@tailwind components;
@tailwind utilities;

/* IBM Plex, self-hosted from public/fonts so nothing is fetched from a third party. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-latin-ce11665edaf50fd48f247f568a12171f9cbdad5b8b3991095ac714f31e569d9f.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-latin-ext-ddba1d99caf1a2a27a4b308fa87f35a2191ea2f383180a207e21af4d493a463a.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-400-latin-e32060f62b41f9db66fd4b4a4cee74d09ed173f5e3ff10eb46f2455c285fd46b.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-400-latin-ext-f28ebb84b9683e6d52418869eea0188790f86c1cf39448f5624a61a5f229e4ce.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-500-latin-7309f03a9e75224368d520077f161089b24332d871f37c5b6d030e863f581b0a.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-500-latin-ext-3800fd1c82f7e2297de17670fe98200308efc7b5d528aad0933ca34bd9893e0b.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*
  The palette. Every colour in the app resolves through these, so this block is
  the one place to change it. Stored as raw RGB channels so Tailwind's
  `/opacity` modifier keeps working (`border-rule/50`).
*/

@layer base {
  :root {
    --surface: 255 255 255;
    --surface-raised: 255 255 255;
    --surface-sunken: 247 248 250;

    --ink: 15 17 21;
    --ink-muted: 86 93 107;
    --ink-subtle: 133 140 153;

    --rule: 226 229 234;
    --rule-strong: 15 17 21;

    --accent: 193 18 31;
    --accent-strong: 151 16 26;
    --accent-soft: 253 238 239;
    --accent-contrast: 255 255 255;
  }

  body {
    @apply bg-surface text-ink antialiased;
  }
}

@layer components {
  .display-title {
    @apply font-semibold leading-tight tracking-[-0.025em];
  }

  .eyebrow {
    @apply font-mono text-[0.6875rem] uppercase tracking-[0.14em] text-ink-subtle;
  }

  .panel {
    @apply rounded-panel border border-rule bg-surface-raised;
  }

  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-control bg-accent px-5 py-2.5
           text-sm font-medium text-accent-contrast transition-colors
           hover:bg-accent-strong focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-control border border-rule
           bg-surface-raised px-5 py-2.5 text-sm font-medium text-ink transition-colors
           hover:border-ink hover:bg-surface-sunken focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .chip {
    @apply inline-flex items-center rounded-control border border-rule bg-surface-raised
           px-3 py-1.5 text-sm text-ink-muted transition-colors
           hover:border-accent hover:text-accent focus-visible:outline focus-visible:outline-2
           focus-visible:outline-offset-2 focus-visible:outline-accent;
  }

  .meta-tag {
    @apply inline-flex items-center gap-1.5 rounded-control border border-rule px-2 py-1
           font-mono text-[0.6875rem] uppercase tracking-[0.08em] text-ink-muted;
  }
}

.html_description a {
  @apply text-accent underline;
}

mark {
  @apply bg-accent-soft font-medium text-accent;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */