/* Canonical Cashmere design tokens.
 *
 * Values are copied from cashmere-marketing packages/ui/src/globals.css so the
 * app and the marketing site resolve the same brand palette. Keep them in sync
 * with that file -- it is the source of truth. HSL triplets (not hex) so the
 * `hsl(var(--token) / alpha)` opacity form works.
 */

:root {
    /* ===== Brand ===== */
    --color-primary-1: 105 13% 27%; /* #3f4d3c forest green */
    --color-primary-2: 103 23% 66%; /* #a1ba97 light green */
    --color-primary-3: 20 29% 78%; /* #dabfb3 muted taupe */

    --color-accent-1: 105 13% 27%; /* #3f4d3c */
    --color-accent-3: 108 12% 47%; /* #70846a medium green (hover) */
    --color-accent-5: 32 52% 59%; /* #ce985d terracotta */
    --color-accent-5-dark: 33 53% 35%; /* #8a5e2a */
    --color-accent-6: 0 0% 81%; /* #cecece borders */
    --color-accent-7: 0 0% 94%; /* #f0f0f0 */

    --color-primary-1-light: 105 13% 47%;
    --color-primary-1-muted: 105 7% 27%;
    --color-primary-2-light: 103 23% 86%;
    --color-accent-3-light: 108 12% 67%;
    --color-accent-5-light: 32 52% 79%;

    /* ===== Semantic ===== */
    --color-success: 122 47% 33%; /* #2e7d32 */
    --color-warning: 42 100% 50%; /* #ffb400 */
    --color-error: 0 65% 51%; /* #d32f2f */

    /* ===== Gray scale ===== */
    --color-gray-1: 180 4% 14%; /* #222525 headings */
    --color-gray-2: 230 5% 40%; /* #62636b */
    --color-gray-3: 30 6% 93%; /* #ecebea */
    --color-gray-4: 30 14% 97%; /* #f8f6f4 cream background */
    /* Upstream freezes olive as a hex in tailwind-preset.ts rather than a CSS
     * var, so this triplet is converted here. */
    --color-olive: 99 19% 80%; /* #c8d5c1 soft green */

    /* ===== Text ===== */
    --color-text: 0 0% 44%; /* #6f6f6f body */
    --color-text-secondary: 224 11% 27%; /* #414651 */

    /* ===== Surfaces (shadcn-compatible names) ===== */
    --background: 30 14% 97%;
    --foreground: 180 4% 14%;
    --card: 0 0% 100%;
    --muted: 30 6% 93%;
    --muted-foreground: 0 0% 44%;
    --primary: 105 13% 27%;
    --accent: 32 52% 59%;
    --border: 0 0% 81%;
    --radius: 0.5rem;

    /* ===== Type families =====
     * Space Grotesk / DM Sans / DM Mono / Zilla Slab / Caveat come from Google
     * Fonts; DxGrafik is self-hosted via cashmere.css.
     */
    --font-space-grotesk: "Space Grotesk", "DxGrafik", sans-serif;
    --font-dm-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-dm-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-zilla-slab: "Zilla Slab", Georgia, serif;
    --font-caveat: "Caveat", cursive;
    --font-dx-grafik: "DxGrafik", "Montserrat", sans-serif;

    /* ===== Legacy aliases =====
     * The ~780 lines of inline CSS in base_docs.html and the 22 class names
     * MCPDocs.tsx depends on all reference these names. Re-pointing them at the
     * canonical tokens updates every consumer without touching a selector.
     */
    --cashmere-background: hsl(var(--color-gray-4));
    --cashmere-surface: hsl(var(--color-gray-3));
    --cashmere-paper: hsl(var(--card));
    --cashmere-primary: hsl(var(--color-primary-1));
    --cashmere-primary-muted: hsl(var(--color-accent-3));
    --cashmere-primary-light: hsl(var(--color-primary-2));
    --cashmere-accent: hsl(var(--color-accent-5-dark));
    --cashmere-accent-strong: hsl(var(--color-accent-5));
    --cashmere-rose: hsl(var(--color-primary-3));
    --cashmere-border: hsl(var(--color-olive));
    --cashmere-text: hsl(var(--color-gray-1));
    --cashmere-text-secondary: hsl(var(--color-text-secondary));
}