/* =============================================================================
  Starboard CSS — Project Cheatsheet
  Import order: tokens → base → layout → utilities → components → pages → (this file)
===============================================================================

FOLDERS
-------
static/
  css/
    main.css              ← entry point (imports everything below)
    tokens.css            ← design tokens (variables only; no selectors)
    base.css              ← element defaults/resets (h1, p, a, ul/ol, table, inputs…)
    layout.css            ← page flow & positioning (header/main/footer, containers)
    utilities.css         ← atomic helpers (one job per class)
    components/           ← reusable UI blocks (structure + states)
      button.css
      card.css
      navbar.css
      modal.css
      form.css
      table.css
    pages/                ← view-specific overrides (only if truly page-unique)
      search.css
      dashboard.css

LAYER DEFINITIONS
-----------------
1) tokens.css  (no CSS rules; variables only)
   • Colors: brand, neutrals, semantic roles (bg/surface/border/text/ring)
   • Typography: families, sizes, line-heights, weights, letter-spacing
   • Spacing/radii/borders/shadows/z-index/breakpoints/motion
   • Grid/container values (sizes only; layout rules live in layout.css)
   • Theme remaps (e.g., [data-theme="light"]) may override token values

2) base.css  (element-level defaults; no classes)
   • Normalize + set readable defaults for body, headings, text, links,
     lists, media (img/svg/video/iframe), tables, forms, hr/blockquote/code
   • Keep selectors unclassed (e.g., `table`, `input`, `a`)
   • No layout positioning, no component visuals here

3) layout.css  (page structure & flow; no component skinning)
   • Header/footer/main positioning: static/sticky/fixed
   • Global containers/gutters/max-width; responsive columns/grids
   • Z-layer policy (sticky, dropdown, modal, toast)
   • Anchor safety: `:root { scroll-padding-top: var(--navbar-height); }`
   • Do not style button colors/typography here

4) utilities.css  (atomic helpers; compose anywhere)
   • One responsibility each; low specificity (single class; may use !important)
   • Examples: display/flex/grid, alignment, spacing, text align/transform,
     overflow, visibility (u-hidden, u-visually-hidden), number spinner toggles
   • Great for one-off tweaks; if you repeat a cluster → graduate to a component

5) components/*.css  (encapsulated UI blocks)
   • Named patterns with structure + states + variants
   • BEM-ish naming: .card, .card__header, .card--interactive
   • Use tokens; keep specificity shallow (avoid deep descendant chains)
   • Handle internal responsive behavior of the component itself
   • Example files: button.css, card.css, navbar.css, modal.css, form.css, table.css

6) pages/*.css  (page-only rules)
   • Only when a single page needs unique styling (e.g., search results layout)
   • Keep isolated to that route/template; avoid leaking global rules

IMPORT ORDER (in main.css)
--------------------------
tokens.css
base.css
layout.css
utilities.css
components/buttons.css
components/card.css;
components/navbar.css
…other components… 
pages/search.css
…other page-specific css… 

SPECIFICITY & OVERRIDES
-----------------------
• tokens: n/a (variables only)
• base: element selectors (very low)
• layout: class selectors on structural wrappers (e.g., .site-header, .container)
• utilities: single-class, low specificity; may use !important for spacing
• components: shallow class chains (e.g., .card .card__title)
• pages: last resort; loaded last; keep selectors scoped to page root

RESPONSIVE CONVENTION [TODO - Set actual break values]
---------------------
• Mobile/tablet/desktop breakpoints in tokens:
  --bp-sm: 40rem;  --bp-md: 48rem;  --bp-lg: 64rem;  --bp-xl: 80rem;
• Use media queries close to the rule they adjust (co-located edits):
  @media (min-width: var(--bp-md)) { … }

WHEN IN DOUBT
-------------
• One-off tweak → utility
• Reusable pattern → component
• Global page flow/position → layout
• Element defaults → base
• Brand/system values → tokens
• Page-only oddities → pages

=============================================================================== */


@import url("tokens.40d974a8de74.css");
@import url("base.e3e4c35db22b.css");
@import url("layout.04524af44248.css");
@import url("utilities.a36db2d813ca.css");
@import url("components/buttons.2ef8261309de.css");
@import url("components/header.f7ee6344f2d2.css");
@import url("components/navbar.86bc731ec1ed.css");
@import url("components/footer.38a23c7206b8.css");
@import url("components/tables.cd0c74306d4e.css");
@import url("components/zoho-chat.06609931f6b4.css");