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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * Metric-matched fallback for "Inter var" to eliminate the font-swap layout
 * shift GSC flagged as a CLS issue on 143 URLs (every page uses the shared
 * `application.html.erb` layout, which loads Inter var with font-display:
 * swap — text renders first in the browser's default sans-serif, then
 * reflows when Inter loads, because the two fonts have different glyph
 * widths and vertical metrics).
 *
 * This gives the fallback the same advance widths and ascent/descent as
 * Inter, so the swap causes no reflow. Values computed from Inter's and
 * Arial's actual font metrics (both 2048 unitsPerEm) via the standard
 * Fontaine/capsize technique: size-adjust scales by average character
 * width ratio, ascent/descent-override scale Inter's own metrics by the
 * inverse of that same ratio.
 */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90.4365%;
  descent-override: 22.518%;
  line-gap-override: 0%;
  size-adjust: 107.1194%;
}
/*
 * 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.
 *


 */