/* ========================================
   V2 DESIGN TOKENS (iOS-inspired)
   ======================================== */

:root {
  /* Brand & accent colors */
  --color-primary: #741C47;
  --color-primary-soft: #8F2B5C;
  --color-primary-muted: rgba(116, 28, 71, 0.1);
  --color-secondary: #5856D6;
  --color-positive: #34C759;
  --color-warning: #FF9500;
  --color-danger: #FF3B30;
  --color-info: #007AFF;

  /* iOS palette bridge */
  --color-owner: #A64D79;
  --color-owner-muted: rgba(166, 77, 121, 0.18);
  --color-owner-muted-strong: rgba(166, 77, 121, 0.32);
  --color-user-accent: #3B82F6;
  --color-user-muted: rgba(59, 130, 246, 0.15);
  --color-user-muted-strong: rgba(59, 130, 246, 0.25);
  --color-invite-success: #22C55E;
  --color-invite-muted: rgba(34, 197, 94, 0.18);
  --color-neutral-500: #6B7280;

  /* Surfaces - Se COLOR_SYSTEM.md for detaljert bruksguide */
  --color-bg: #FFFFFF;                    /* Hovedbakgrunn (body) */
  --color-bg-alt: #FFFFFF;                /* Hvite kort for maksimal kontrast (client cards, quote cards) */
  --color-surface: #F2F2F7;               /* Standard kort/bokser (dashboard cards, standard boxes) */
  --color-surface-raised: rgba(242, 242, 247, 0.95); /* Løftede kort med blur-effekt */
  --color-surface-muted: #F2F2F4;         /* Nested/seksjoner inni kort (list headers, nested containers) */
  --color-border: transparent;
  --color-border-strong: transparent;

  /* Text */
  --color-text: #1C1C1E;
  --color-text-secondary: rgba(28, 28, 30, 0.7);
  --color-text-tertiary: rgba(28, 28, 30, 0.45);
  --color-text-inverse: #FFFFFF;
  --color-text-white: #FFFFFF;

  /* Typography */
  --font-family-base: 'Poppins', Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-display: clamp(2rem, 4vw, 2.8rem);
  --letter-spacing-tight: -0.01em;

  /* Spacing (4pt base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radii & blur (Apple hierarchy) */
  --radius-xs: 12px;  /* Chips, small badges */
  --radius-sm: 16px;  /* Buttons, small cards */
  --radius-md: 20px;  /* Standard cards */
  --radius-lg: 24px;  /* Hero cards / sections */
  --radius-xl: 32px;  /* Sheets / large surfaces */
  --radius-pill: 999px;
  --blur-soft: 20px;

  /* Elevation */
  --shadow-soft: none;
  --shadow-card: none;
  --shadow-border: none;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-medium: 250ms ease;
  --transition-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #050505;
    --color-bg-alt: #0A0A0A;
    --color-surface: #111113;
    --color-surface-raised: rgba(20, 20, 25, 0.8);
    --color-surface-muted: #1C1C1E;
    --color-border: transparent;
    --color-border-strong: transparent;

    --color-text: #F5F5F7;
    --color-text-secondary: rgba(245, 245, 247, 0.75);
    --color-text-tertiary: rgba(245, 245, 247, 0.5);
    --color-text-white: #FFFFFF;

    --color-owner-muted: rgba(166, 77, 121, 0.35);
    --color-owner-muted-strong: rgba(166, 77, 121, 0.5);
    --color-user-muted: rgba(59, 130, 246, 0.25);
    --color-user-muted-strong: rgba(59, 130, 246, 0.45);
    --color-invite-muted: rgba(34, 197, 94, 0.25);
  }
}