/* The UI kit: a no-build port of shadcn/ui (https://ui.shadcn.com) in plain CSS, the same one
/* runwellv2 uses (its app/assets/stylesheets/ui). docs/frontend.md has the vocabulary and the
/* styleguide is at /ui in development.
/*
/* These are shadcn's own tokens with shadcn's own values: the "neutral" base colour of
/* shadcn/ui v4, light and dark, word for word, so the app looks like a stock shadcn app. Two
/* things reach in from Settings › Branding: --brand-primary (the primary colour; buttons,
/* switches, focus) and the corners and font, when the workspace sets them. Unset, it is
/* shadcn's near-black primary.
/*
/* The older palette in _global.css (--gray-*, --surface) is pointed at the same neutral scale
/* (achromatic --neutral-tint), so the area stylesheets that still read it match.
/*
/* Components (ui/*.css) live in the `ui` layer, after `components`, and read only these. */

:root {
  --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: var(--brand-primary, oklch(0.205 0 0));
  --primary-foreground: var(--brand-primary-foreground, oklch(0.985 0 0));
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --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);
  --destructive-foreground: oklch(0.985 0 0);
  --success: oklch(0.627 0.194 149.214);
  --warning: oklch(0.769 0.188 70.08);
  --info: oklch(0.623 0.214 259.815);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);


  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: var(--primary);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);

  /* shadcn's --radius and its steps. Settings › Branding's corners override the steps. */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Tailwind's shadow-xs / sm / md / lg, which shadcn's components use. */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 5%);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);

  /* focus-visible:ring-[3px] ring-ring/50 border-ring */
  --ring-focus: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
  --ring-invalid: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);

  /* The type steps the kit is written in (shadcn's: the body is text-sm, 14px). */
  --text-x-small: var(--text-xs);
  --text-small: var(--text-sm);
  --text-normal: var(--text-sm);
  --text-medium: var(--text-base);
  --text-large: var(--text-xl);
  --text-x-large: var(--text-2xl);

  --custom-safe-inset-top: env(safe-area-inset-top, 0px);
}

/* shadcn's .dark */
html[data-theme="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);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: var(--brand-primary, oklch(0.922 0 0));
  --primary-foreground: var(--brand-primary-foreground, oklch(0.205 0 0));
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --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);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: var(--brand-primary, oklch(0.922 0 0));
    --primary-foreground: var(--brand-primary-foreground, oklch(0.205 0 0));
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
  }
}