/*
 * Amoeba's look for the CMS, from the Amoeba CMS Figma file
 * (figma.com/design/mzh4QqpLuwwaslNfdp4oPt). Every client's CMS looks the same,
 * so these values never come from a client's theme. The names match Figma's
 * variables: Primitives are the --amoeba-* values, Color the shadcn names
 * below, and Radius and Spacing the shared scale in packages/ui.
 */

:root {
  /* Primitives */
  --amoeba-cream-50: #fbf8f3;
  --amoeba-cream-100: #f5f0e8;
  --amoeba-cream-200: #e8e0d4;
  --amoeba-gold-50: #f6f0e1;
  --amoeba-gold-100: #ece0bd;
  --amoeba-gold-200: #dcc791;
  --amoeba-gold-300: #c4a865;
  --amoeba-gold-500: #9c7a2e;
  --amoeba-gold-700: #7a5f23;
  --amoeba-earth-400: #665641;
  --amoeba-earth-700: #3d2e1f;
  --amoeba-earth-900: #0f0e0c;
  --amoeba-green-50: #e6f3e3;
  --amoeba-green-500: #3faf3f;
  --amoeba-green-700: #2e7a3a;
  --amoeba-amber-50: #fbebd0;
  --amoeba-amber-500: #d18a1a;
  --amoeba-amber-700: #8a4b08;
  --amoeba-red-50: #f8e6e3;
  --amoeba-red-600: #b0392b;
  --amoeba-red-700: #8e2c21;
  --amoeba-blue-500: #2a78d6;
  --amoeba-aqua-500: #1baf7a;
  --amoeba-violet-600: #4a3aa7;
  --amoeba-white: #ffffff;

  /* Color */
  --radius: 0.625rem;

  --background: var(--amoeba-cream-100);
  --foreground: var(--amoeba-earth-900);
  --card: var(--amoeba-cream-50);
  --card-foreground: var(--amoeba-earth-900);
  --popover: var(--amoeba-cream-50);
  --popover-foreground: var(--amoeba-earth-900);
  --primary: var(--amoeba-gold-500);
  --primary-foreground: var(--amoeba-earth-900);
  --secondary: var(--amoeba-cream-200);
  --secondary-foreground: var(--amoeba-earth-900);
  --muted: var(--amoeba-cream-200);
  --muted-foreground: var(--amoeba-earth-400);
  --accent: var(--amoeba-gold-50);
  --accent-foreground: var(--amoeba-gold-700);
  --destructive: var(--amoeba-red-600);
  --destructive-foreground: var(--amoeba-white);
  --border: rgb(15 14 12 / 14%);
  --input: rgb(15 14 12 / 24%);
  --ring: var(--amoeba-gold-500);

  --sidebar: var(--amoeba-cream-200);
  --sidebar-foreground: var(--amoeba-earth-700);
  --sidebar-accent: var(--amoeba-cream-50);
  --sidebar-accent-foreground: var(--amoeba-earth-900);
  --sidebar-border: rgb(15 14 12 / 8%);

  --success: var(--amoeba-green-500);
  --success-soft: var(--amoeba-green-50);
  --success-foreground: var(--amoeba-green-700);
  --warning: var(--amoeba-amber-500);
  --warning-soft: var(--amoeba-amber-50);
  --warning-foreground: var(--amoeba-amber-700);
  --danger-soft: var(--amoeba-red-50);
  --danger-foreground: var(--amoeba-red-700);

  --chart-1: var(--amoeba-gold-500);
  --chart-2: var(--amoeba-blue-500);
  --chart-3: var(--amoeba-aqua-500);
  --chart-4: var(--amoeba-violet-600);
  --chart-heat-1: var(--amoeba-gold-50);
  --chart-heat-2: var(--amoeba-gold-100);
  --chart-heat-3: var(--amoeba-gold-200);
  --chart-heat-4: var(--amoeba-gold-300);
  --chart-heat-5: var(--amoeba-gold-500);
  --chart-heat-6: var(--amoeba-gold-700);
}

@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-success: var(--success);
  --color-success-soft: var(--success-soft);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-soft: var(--warning-soft);
  --color-warning-foreground: var(--warning-foreground);
  --color-danger-soft: var(--danger-soft);
  --color-danger-foreground: var(--danger-foreground);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-heat-1: var(--chart-heat-1);
  --color-chart-heat-2: var(--chart-heat-2);
  --color-chart-heat-3: var(--chart-heat-3);
  --color-chart-heat-4: var(--chart-heat-4);
  --color-chart-heat-5: var(--chart-heat-5);
  --color-chart-heat-6: var(--chart-heat-6);

  /* Instrument Sans for headlines, text and buttons; Familjen Grotesk for labels and figures. */
  --font-sans: var(--font-instrument-sans), ui-sans-serif, system-ui, sans-serif;
  --font-label: var(--font-familjen-grotesk), ui-sans-serif, system-ui, sans-serif;

  /* Shadow/Card and Shadow/Popover */
  --shadow-card: 0 2px 8px rgb(15 14 12 / 6%);
  --shadow-popover: 0 8px 24px rgb(15 14 12 / 12%);
}

/*
 * Figma's text styles, one utility each. They're type-*, not text-*, so
 * tailwind-merge never mistakes one for a text colour and drops it.
 */
@utility type-page-title {
  font-family: var(--font-sans);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.025em;
}
@utility type-section {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@utility type-card {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
@utility type-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}
@utility type-body-strong {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}
@utility type-small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
@utility type-small-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
@utility type-button {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
@utility type-caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
@utility type-label {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}
@utility type-label-small {
  font-family: var(--font-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
@utility type-data {
  font-family: var(--font-label);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
@utility type-data-large {
  font-family: var(--font-label);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
@utility type-data-hero {
  font-family: var(--font-label);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@layer base {
  body {
    font-family: var(--font-sans);
  }
}