/* ============================================================================
   ZALIO — Prototype-template tokens (the app scaffold)
   Source: momentum-au/nextjs-template  →  app/globals.css + layout.tsx + ui/button.tsx
   This is the shadcn/ui + Tailwind v4 token layer the Zalio *app* is built on.
   It is intentionally neutral (greys) with an ORANGE --primary that already
   matches the Zalio brand hue — so the scaffold and the marketing brand align.
   Use these tokens for app / product / auth surfaces; use colors_and_type.css
   (the warm marketing palette) for landing pages and decks.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* shadcn neutral light theme + orange primary */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.665 0.205 38.4);              /* Zalio Orange #FF5A1F */
  --primary-foreground: oklch(0.985 0.01 75);      /* paper-warm white */
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --t-border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Radius scale — base 0.45rem (7.2px). Note this is TIGHTER than the
     marketing brand (which uses 16px cards). The app scaffold is compact. */
  --radius: 0.45rem;
  --radius-sm: calc(var(--radius) * 0.6);   /* ~4.3px */
  --radius-md: calc(var(--radius) * 0.8);   /* ~5.8px */
  --radius-lg: var(--radius);               /* 7.2px  */
  --radius-xl: calc(var(--radius) * 1.4);   /* ~10px  */
  --radius-2xl: calc(var(--radius) * 1.8);  /* ~13px  — used as rounded-2xl on inputs */
  --radius-3xl: calc(var(--radius) * 2.2);  /* ~16px  — auth card */

  /* Fonts: Space Grotesk for headings, Manrope for body, IBM Plex Mono for code */
  --t-font-heading: 'Space Grotesk', -apple-system, sans-serif;
  --t-font-sans: 'Manrope', -apple-system, sans-serif;
  --t-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --primary: oklch(0.62 0.20 38.4);                /* Zalio Orange, deepened for dark */
  --primary-foreground: oklch(0.985 0.01 75);
  --secondary: oklch(0.274 0.006 286.033);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --t-border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
}

/* ─── shadcn Button — compact base-ui variant system ──────────────────────────
   The template's buttons are deliberately SMALL (h-7, text-xs). Variants:
   default / outline / secondary / ghost / destructive / link.                  */
.btn-sc {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 28px; padding: 0 8px; border-radius: var(--radius-md);
  font-family: var(--t-font-sans); font-size: 12px; line-height: 1.6; font-weight: 500;
  white-space: nowrap; border: 1px solid transparent; cursor: pointer;
  transition: all .15s ease; outline: none;
}
.btn-sc--lg { height: 32px; padding: 0 10px; }
.btn-sc--default { background: var(--primary); color: var(--primary-foreground); }
.btn-sc--default:hover { background: color-mix(in oklch, var(--primary) 80%, transparent); }
.btn-sc--outline { border-color: var(--t-border); color: var(--foreground); background: transparent; }
.btn-sc--outline:hover { background: color-mix(in oklch, var(--input) 50%, transparent); }
.btn-sc--secondary { background: var(--secondary); color: var(--secondary-foreground); }
.btn-sc--secondary:hover { background: color-mix(in oklch, var(--secondary) 80%, transparent); }
.btn-sc--ghost { background: transparent; color: var(--foreground); }
.btn-sc--ghost:hover { background: var(--muted); }
.btn-sc--destructive { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); }
.btn-sc:active { transform: translateY(1px); }

/* ─── shadcn input (auth forms) — rounded-2xl, h-11, focus:border-primary ───── */
.input-sc {
  height: 44px; width: 100%; box-sizing: border-box;
  border-radius: var(--radius-2xl); border: 1px solid var(--t-border);
  background: var(--background); padding: 0 12px;
  font-family: var(--t-font-sans); font-size: 14px; outline: none; transition: border-color .15s;
}
.input-sc:focus { border-color: var(--primary); }

/* ─── shadcn card / auth shell ────────────────────────────────────────────── */
.card-sc {
  border: 1px solid color-mix(in oklch, var(--t-border) 70%, transparent);
  background: color-mix(in oklch, var(--card) 90%, transparent);
  border-radius: var(--radius-3xl); box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  backdrop-filter: blur(8px);
}
.eyebrow-sc {
  font-family: var(--t-font-sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary);
}
.heading-sc { font-family: var(--t-font-heading); font-weight: 600; letter-spacing: -0.01em; }