@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@400;500;600&display=swap');

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  /* Colours */
  --color-bg: #F7F4EF;
  --color-surface: #FFFFFF;
  --color-border: #DDD7CE;
  --color-text-primary: #1A1714;
  --color-text-secondary: #6B6259;
  --color-danger: #DC2626;
  --color-status-ok: #16a34a;
  --color-status-warn: #d97706;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 48px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(26, 23, 20, 0.08);
  --shadow-md: 0 4px 16px rgba(26, 23, 20, 0.10);
  --shadow-paper: 0 2px 20px rgba(0, 0, 0, 0.18);

  /* Buttons */
  --color-btn-primary: #000000;
  --color-btn-primary-hover: #222222;
  --color-btn-dark-hover: #333333;

  /* Danger */
  --color-danger-hover: #b91c1c;

  /* Overlays & surfaces */
  --color-paper: #ffffff;
  --color-preview-bg: #eeeeee;
  --color-overlay: rgba(0, 0, 0, 0.15);
  --color-backdrop: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] {
  --color-bg: #1C1916;
  --color-surface: #272320;
  --color-border: #3A3530;
  --color-text-primary: #EDE9E3;
  --color-text-secondary: #8A8178;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-paper: 0 2px 20px rgba(0, 0, 0, 0.5);

  --color-btn-primary: #EDE9E3;
  --color-btn-primary-hover: #D4CFC8;
  --color-btn-dark-hover: #555555;

  --color-preview-bg: #333333;
  --color-status-ok: #4ade80;
}