/*
 * CleanBook Design System — Colors & Type
 * Source: https://github.com/mr4nd3rs3n/cleanbook-sweden
 * Font substitute: Geist (Google Fonts) — original is system-ui
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

/* ─── Base Radius ─── */
:root {
  --radius: 0.625rem; /* 10px */
  --radius-sm: calc(var(--radius) - 4px); /* 6px */
  --radius-md: calc(var(--radius) - 2px); /* 8px */
  --radius-lg: var(--radius);             /* 10px */
  --radius-xl: calc(var(--radius) + 4px); /* 14px */
  --radius-2xl: calc(var(--radius) + 8px);/* 18px */
}

/* ─── Color Tokens — Light Mode ─── */
:root {
  /* Surfaces */
  --background:            oklch(1 0 0);                  /* #ffffff */
  --foreground:            oklch(0.129 0.042 264.695);    /* #0f1428 */
  --card:                  oklch(1 0 0);                  /* #ffffff */
  --card-foreground:       oklch(0.129 0.042 264.695);
  --popover:               oklch(1 0 0);
  --popover-foreground:    oklch(0.129 0.042 264.695);

  /* Primary — CleanBook Navy */
  --primary:               oklch(0.45 0.12 250);          /* #1e4fa0 */
  --primary-foreground:    oklch(0.99 0.005 250);         /* #f8faff */

  /* Secondary / Muted */
  --secondary:             oklch(0.968 0.007 247.896);    /* #f2f4f8 */
  --secondary-foreground:  oklch(0.208 0.042 265.755);    /* #1e2540 */
  --muted:                 oklch(0.968 0.007 247.896);    /* #f2f4f8 */
  --muted-foreground:      oklch(0.554 0.046 257.417);    /* #6b7a9e */
  --accent:                oklch(0.968 0.007 247.896);
  --accent-foreground:     oklch(0.208 0.042 265.755);

  /* Destructive */
  --destructive:           oklch(0.577 0.245 27.325);     /* #e0431e */
  --destructive-foreground: oklch(0.984 0.003 247.858);   /* #f8f9fc */

  /* Borders & Inputs */
  --border:                oklch(0.929 0.013 255.508);    /* #e2e5f0 */
  --input:                 oklch(0.929 0.013 255.508);
  --ring:                  oklch(0.704 0.04 256.788);     /* #8fa2c8 */

  /* Sidebar */
  --sidebar:               oklch(0.984 0.003 247.858);    /* #f8f9fc */
  --sidebar-foreground:    oklch(0.129 0.042 264.695);
  --sidebar-primary:       oklch(0.208 0.042 265.755);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent:        oklch(0.968 0.007 247.896);
  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
  --sidebar-border:        oklch(0.929 0.013 255.508);
  --sidebar-ring:          oklch(0.704 0.04 256.788);

  /* Semantic — Status (not in original CSS; from calendar component) */
  --status-confirmed-bg:   oklch(0.87 0.07 245);         /* blue-500/15 */
  --status-confirmed-text: oklch(0.45 0.14 248);         /* blue-700 */
  --status-confirmed-border: oklch(0.72 0.10 245);       /* blue-500/30 */
  --status-completed-bg:   oklch(0.93 0.07 155);         /* emerald-500/15 */
  --status-completed-text: oklch(0.47 0.13 155);         /* emerald-700 */
  --status-completed-border: oklch(0.70 0.10 155);       /* emerald-500/30 */
  --status-cancelled-bg:   oklch(0.93 0.07 27);          /* red-500/15 */
  --status-cancelled-text: oklch(0.52 0.20 27);          /* red-700 */
  --status-cancelled-border: oklch(0.72 0.12 27);        /* red-500/30 */
  --status-success:        oklch(0.55 0.15 152);         /* #2d9e5e — Genomförd green */

  /* Charts */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6   0.118 184.704);
  --chart-3: oklch(0.398 0.07  227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
}

/* ─── Color Tokens — Dark Mode ─── */
.dark {
  --background:            oklch(0.129 0.042 264.695);
  --foreground:            oklch(0.984 0.003 247.858);
  --card:                  oklch(0.208 0.042 265.755);
  --card-foreground:       oklch(0.984 0.003 247.858);
  --popover:               oklch(0.208 0.042 265.755);
  --popover-foreground:    oklch(0.984 0.003 247.858);
  --primary:               oklch(0.929 0.013 255.508);
  --primary-foreground:    oklch(0.208 0.042 265.755);
  --secondary:             oklch(0.279 0.041 260.031);
  --secondary-foreground:  oklch(0.984 0.003 247.858);
  --muted:                 oklch(0.279 0.041 260.031);
  --muted-foreground:      oklch(0.704 0.04  256.788);
  --accent:                oklch(0.279 0.041 260.031);
  --accent-foreground:     oklch(0.984 0.003 247.858);
  --destructive:           oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border:                oklch(1 0 0 / 10%);
  --input:                 oklch(1 0 0 / 15%);
  --ring:                  oklch(0.551 0.027 264.364);
  --sidebar:               oklch(0.208 0.042 265.755);
  --sidebar-foreground:    oklch(0.984 0.003 247.858);
  --sidebar-primary:       oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
  --sidebar-accent:        oklch(0.279 0.041 260.031);
  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
  --sidebar-border:        oklch(1 0 0 / 10%);
  --sidebar-ring:          oklch(0.551 0.027 264.364);
}

/* ─── Semantic Typography CSS Variables ─── */
:root {
  /* Font stacks */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

  /* Scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */

  /* Weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;

  /* Line heights */
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;
}

/* ─── Base Styles ─── */
*, *::before, *::after {
  box-sizing: border-box;
  border-color: var(--border);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* ─── Semantic Type Classes ─── */

/* Page title */
.cb-h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--foreground);
}

/* Section title */
.cb-h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--foreground);
}

/* Card heading */
.cb-h3 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
  color: var(--foreground);
}

/* Nav / table headers */
.cb-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-normal);
  color: var(--foreground);
}

/* Body text */
.cb-body {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--foreground);
}

/* Muted / meta */
.cb-muted {
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}

/* XS meta — timestamps, badges, help text */
.cb-meta {
  font-size: var(--text-xs);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--muted-foreground);
}

/* Sidebar category label */
.cb-category {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--muted-foreground);
}

/* Code / monospace */
.cb-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* ─── Spacing Tokens ─── */
:root {
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
}

/* ─── Shadow Tokens ─── */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
}