/* ==========================================================================
   freisein — Design Tokens
   Single source of truth for all design decisions.
   Use these variables throughout CSS to keep the look consistent.
   ========================================================================== */

:root {

   /* --------------------------------------------------------------------------
      Typography
     -------------------------------------------------------------------------- */

   --font-sans: 'Open Sans', ui-sans-serif, system-ui, sans-serif;
   --font-heading: 'Roboto Slab', serif;
   --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;

   --line-height-tight: 1.25;
   --line-height-snug: 1.375;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.625;

   /* --------------------------------------------------------------------------
      Brand palette — bronze/gold (#ab9671) from steffi-freise.de
     -------------------------------------------------------------------------- */

   --c-brand-50: #f9f6f2;
   --c-brand-100: #f0e9df;
   --c-brand-200: #e0d1be;
   --c-brand-300: #ccb89b;
   --c-brand-400: #bc9f7c;
   --c-brand-500: #ab9671;
   --c-brand-600: #9a8464;
   --c-brand-700: #7e6b4f;
   --c-brand-800: #5e4f3a;
   --c-brand-900: #3e3325;

   /* Semantic aliases */
   --c-primary: var(--c-brand-600);
   --c-primary-hover: var(--c-brand-700);
   --c-primary-light: var(--c-brand-100);
   --c-primary-ring: var(--c-brand-500);

   /* --------------------------------------------------------------------------
      Copy & surface colours
     -------------------------------------------------------------------------- */

   --c-copy: #404c56;
   /* dark blue-gray body text */
   --c-copy-muted: #6b7280;
   /* gray-500 */
   --c-copy-faint: #9ca3af;
   /* gray-400 */

   --c-surface: #FAF7F2;
   --c-surface-subtle: #f9fafb;
   /* gray-50 — page background */
   --c-surface-muted: #f3f4f6;
   /* gray-100 */

   --c-border: #FAF7F2;
   /* gray-200 */
   --c-border-strong: #FAF7F2;
   /* gray-300 */

   /* --------------------------------------------------------------------------
      Semantic status colours
     -------------------------------------------------------------------------- */

   --c-success: #4d8861;
   /* green-600 */
   --c-success-bg: #D4E4D7;
   /* green-100 */
   --c-success-border: #4d8861;
   /* green-300 */

   --c-error: #bf4f4f;
   /* red-600 */
   --c-error-bg: #fee2e2;
   /* red-100 */
   --c-error-border: #fca5a5;
   /* red-300 */

   --c-warning: #d97706;
   /* amber-600 */
   --c-warning-bg: #fef3c7;
   /* amber-100 */
   --c-warning-border: #fcd34d;
   /* amber-300 */

   --c-info: var(--c-brand-600);
   /* blue-600 */
   --c-info-bg: var(--c-brand-100);
   /* blue-100 */
   --c-info-border: var(--c-brand-300);
   /* blue-300 */

   /* --------------------------------------------------------------------------
      Third-party brand colours
     -------------------------------------------------------------------------- */

   --c-whatsapp: #25D366;
   --c-whatsapp-hover: #1aad52;
   --c-zoom: #2D8CFF;

   /* --------------------------------------------------------------------------
      Border radius
     -------------------------------------------------------------------------- */

   --radius-sm: 2px;
   /* 4px  — badges, code, small chips */
   --radius-md: 2px;
   /* 8px  — inputs, small buttons */
   --radius-lg: 2px;
   /* 12px — default buttons, alerts, table wrappers */
   --radius-xl: 2px;
   /* 12px — cards, image previews */
   --radius-2xl: 2px;
   /* 16px — modals */
   --radius-full: 2px;
   /* pills, avatars */

   /* --------------------------------------------------------------------------
      Shadows
     -------------------------------------------------------------------------- */

   --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
   --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.08);

   /* --------------------------------------------------------------------------
      Spacing scale
     -------------------------------------------------------------------------- */

   --space-1: 0.25rem;
   /* 4px  */
   --space-2: 0.5rem;
   /* 8px  */
   --space-3: 0.75rem;
   /* 12px */
   --space-4: 1rem;
   /* 16px */
   --space-6: 1.5rem;
   /* 24px */
   --space-8: 2rem;
   /* 32px */
   --space-12: 3rem;
   /* 48px */
   --space-16: 4rem;
   /* 64px */

   /* --------------------------------------------------------------------------
      Transitions
     -------------------------------------------------------------------------- */

   --duration-fast: 150ms;
   --duration-normal: 200ms;
   --duration-slow: 300ms;
   --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

   /* --------------------------------------------------------------------------
      Z-index scale
     -------------------------------------------------------------------------- */

   --z-dropdown: 10;
   --z-sticky: 20;
   --z-modal: 50;
   --z-toast: 60;
}