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

:root {
  color-scheme: light;
  /* Brand & accent colors */
  --color-primary: #741C47;
  --color-primary-soft: #8F2B5C;
  --color-primary-muted: rgba(116, 28, 71, 0.1);
  --color-secondary: #5856D6;
  --color-secondary-muted: rgba(88, 86, 214, 0.12);
  --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) */
  /* Apple grouped (Innstillinger): kort-rad + nestet feltbrønn — paritet med iOS/Android handbook */
  --color-grouped-card: #FFFFFF;          /* secondarySystemGroupedBackground (lys rad/kort) */
  --color-grouped-nested: #F2F2F7;        /* tertiarySystemGroupedBackground / systemGray6 (felt inni kort) */
  --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 (DESIGN_HANDBOOK §6 - modaler, dropdowns, kort) */
  --shadow-soft: none;
  --shadow-card: none;
  --shadow-border: none;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);

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

/* Dark tokens follow app setting (data-theme), not OS alone - avoids system dark overriding "light" */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #050505;
  --color-bg-alt: #0A0A0A;
  --color-surface: #111113;
  --color-surface-raised: rgba(20, 20, 25, 0.8);
  --color-surface-muted: #1C1C1E;
  --color-grouped-card: #1C1C1E;
  --color-grouped-nested: #2C2C2E;
  --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);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
}