/* Georges Raad: shared design tokens (colour, type, spacing, radius, motion).
   Used by the main page, the tools and the design system page. Change a value here and it changes everywhere. */

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

:root {
  --color-bg: #f5f5f5;
  --color-surface: #ffffff;
  --color-field: #efefef;
  --color-field-hover: #e6e6e6;
  --color-border: #dedede;
  --color-ink: #2f2f2f;
  --color-ink-hover: #000000;
  --color-on-ink: #ffffff;
  --color-text: #4c4c4c;
  --color-muted: #6b6b6b;
  --color-accent: #ac354a;
  --color-accent-soft: rgba(172, 53, 74, 0.08);
  --color-success: #1e7f4f;
  --color-warning: #b4540a;
  --color-danger: #c62b1e;
  --cat-color: #ac354a;
  --cat-pdf: #c2570c;
  --cat-image: #2b8070;
  --cat-misc: #4a5fc1;
  --cat-text: #a67c0a;
  --cat-developer: #8a4fc7;

  --font: "Inter", Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --weight-regular: 400;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --page-padding: var(--space-8);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.14);
  --duration: 150ms;
  --topbar-height: 3.5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111111;
    --color-surface: #1a1a1a;
    --color-field: #262626;
    --color-field-hover: #303030;
    --color-border: #333333;
    --color-ink: #ededed;
    --color-ink-hover: #ffffff;
    --color-on-ink: #111111;
    --color-text: #c4c4c4;
    --color-muted: #a3a3a3;
    --color-accent: #e06a80;
    --color-accent-soft: rgba(224, 106, 128, 0.14);
    --color-success: #4cc38a;
    --color-warning: #f0a050;
    --color-danger: #ff6b5e;
    --cat-color: #e06a80;
    --cat-pdf: #d97a2b;
    --cat-image: #3f9d86;
    --cat-misc: #6b7fe0;
    --cat-text: #d4a72c;
    --cat-developer: #a97be0;
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-bg: #111111;
  --color-surface: #1a1a1a;
  --color-field: #262626;
  --color-field-hover: #303030;
  --color-border: #333333;
  --color-ink: #ededed;
  --color-ink-hover: #ffffff;
  --color-on-ink: #111111;
  --color-text: #c4c4c4;
  --color-muted: #a3a3a3;
  --color-accent: #e06a80;
  --color-accent-soft: rgba(224, 106, 128, 0.14);
  --color-success: #4cc38a;
  --color-warning: #f0a050;
  --color-danger: #ff6b5e;
  --cat-color: #e06a80;
  --cat-pdf: #d97a2b;
  --cat-image: #3f9d86;
  --cat-misc: #6b7fe0;
  --cat-text: #d4a72c;
  --cat-developer: #a97be0;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}