/* ==========================================================================
typography.css — TheGuestDesk typography system
--------------------------------------------------------------------------
Purpose
-------
One place that decides every font family, font size, weight and line-height
in the app, so the sidebar, page headers, cards, tables, forms and buttons
all read at consistent sizes (the way YouTube Studio does it).
Why this file exists
--------------------
Today font sizes are set ad-hoc per view with inline `style="font-size: ..."`
attributes, a handful of `fs-*` theme utilities, and `!important` overrides
in generatebill.css / app.blade.php. That is what makes things look uneven.
Current status
--------------
SECTION 8 (sidebar) is LIVE: typography.css is linked in
layouts/app.blade.php, so the left rail already follows these tokens.
Everything else in this file is opt-in and still inactive — linking it
changes nothing except the sidebar.
How to apply more of it later
-----------------------------
1. It is already linked AFTER theme.min.css and custom.css, so it sits last
in the cascade and wins ties by load order. Keep it there.
2. Two ways to apply the rest:
a) Opt-in per element: add `tg-` role classes in markup, e.g.
Filters
Narrow down the invoice list below.
b) App-wide switch: add `tg-type` to in layouts/app.blade.php.
That maps the tokens onto the existing theme markup (sidebar, cards,
tables, forms, buttons, footer) in one shot — see SECTION 8.
3. Change sizes in ONE place: the role tokens in SECTION 4. Any element
using the matching class follows automatically.
Naming
------
Everything is namespaced `tg-` (TheGuestDesk) so it can never collide with
the theme's own `fs-*`, `font-*` utilities or Bootstrap classes.
Note on !important
------------------
Exactly one declaration in the live rules uses `!important`: the form label
size. The theme itself ships `.form-label { font-size: 1rem !important }`,
and a normal declaration cannot beat that. The old `!important` form sizes in
custom.css, generatebill.css and the inline