/* ============================================================
   Example css/main.css for a Grain app on the Obney DS.
   Pattern mirrors obney-ops-workshop: runtime CSS vars (tokens.css)
   bridged to Tailwind v4 utilities via @theme, with @source scanning
   the Hiccup (.clj) views so class names are picked up.
   ============================================================ */
@import "tailwindcss";
@import "./tokens.css";

/* Fonts: self-host Cal Sans (copy ../../fonts/ into the app), Google for the rest */
@font-face {
  font-family: "Cal Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cal-sans-latin-400-normal.woff2") format("woff2");
}
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@300;400;500&display=swap");

/* Scan Clojure source (Hiccup views) for Tailwind class names */
@source "../components/*/src/**/*.clj";
@source "../bases/*/src/**/*.clj";

/* Bridge runtime vars -> Tailwind utilities.
   Aliased to the vars (no second copy) so there's nothing to drift.
   Gives: bg-surface, text-fg, text-accent, border-hairline, fill-fg-3, font-mono, rounded-pill, tracking-eyebrow, ... */
@theme {
  --font-sans:    "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Cal Sans", "Figtree", ui-sans-serif, sans-serif;

  --color-bg:             var(--bg);
  --color-surface:        var(--surface);
  --color-surface-muted:  var(--surface-muted);
  --color-surface-inverse:var(--surface-inverse);

  --color-fg:        var(--fg);
  --color-fg-2:      var(--fg-2);
  --color-fg-3:      var(--fg-3);
  --color-fg-on-dark:var(--fg-on-dark);
  --color-link:      var(--link);

  --color-midnight:      var(--midnight);
  --color-ocean:         var(--ocean);
  --color-accent:        var(--accent);
  --color-accent-strong: var(--accent-strong);
  --color-green:  var(--green);
  --color-orange: var(--orange);
  --color-pink:   var(--pink);
  --color-yellow: var(--yellow);

  --color-hairline:        var(--hairline);
  --color-hairline-strong: var(--hairline-strong);
  --color-focus:           var(--focus);
  --color-success:         var(--success);
  --color-warning:         var(--warning);
  --color-danger:          var(--danger);

  --radius-pill: 999px;

  --tracking-eyebrow: 0.08em;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.1, 1);
}

/* Base */
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); }

/* Hiccup usage examples:
   [:button.rounded-full.bg-accent.text-midnight.font-semibold.px-5.py-2.5 "Get started"]
   [:span.font-mono.uppercase.tracking-eyebrow.text-fg-3.text-xs "— Section label"]
   [:div.bg-surface.border.border-hairline.rounded-xl.p-6 ...]   ; card
   [:div.bg-surface-inverse.text-fg-on-dark.rounded-xl.p-6 ...]  ; signature dark card
*/