/* ========================================
   V2 DESIGN TOKENS (Design Handbook V2)
   Flat / sharp: 6px radius, visible borders, no card elevation
   ======================================== */

: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 — Apple grouped as global standard (handbook §3 / §20.2)
     1. --color-bg: page canvas (gray)
     2. --color-surface: standard cards / glass-card (white)
     3. --color-surface-muted: nested wells inside cards (gray)
     4. --color-bg-alt: elevated white cards/items on the page (client/quote cards)
     5. --color-grouped-card / --color-grouped-nested: same as surface / muted (aliases) */
  --color-bg: #F0F0F0;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-raised: rgba(255, 255, 255, 0.95);
  --color-surface-muted: #F0F0F0;
  --color-grouped-card: #FFFFFF;
  --color-grouped-nested: #F0F0F0;
  /* TEST: kantlinjer av — sett tilbake til color-mix … 16%/22% for å gjenopprette */
  --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(1.5rem, 2.8vw, 1.75rem);
  --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;

  /* Page chrome — shared by .app-main + page-header controls (V2) */
  --page-padding: var(--space-5); /* equal inset on all sides of .app-main */
  --page-header-gap: var(--space-2); /* search ↔ buttons ↔ buttons */
  --page-header-control-height: 34px;
  /* Listeside controls-panel: søk, select, segmented, toggle — samme høyde */
  --controls-panel-control-height: 40px;
  /* Listebokser: innrykk så innhold ikke ligger flush mot boks-kanten */
  --list-box-padding-x: var(--space-5);
  --list-box-padding-bottom: var(--space-5);

  /* Radii — Design Handbook V2 (sharp / dense) */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --blur-soft: 20px;

  /* Elevation — slightly stronger card lift (borders off) */
  --shadow-soft: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-card: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-border: none;
  --shadow-sm: 0 1px 2px rgba(28, 28, 30, 0.06), 0 4px 12px rgba(28, 28, 30, 0.08);
  --shadow-md: 0 4px 16px rgba(28, 28, 30, 0.1);
  --shadow-lg: 0 12px 32px rgba(28, 28, 30, 0.14);

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

:root[data-theme="dark"] {
  color-scheme: dark;
  /* Slightly lifted page canvas so card elevation (rim + shadow) reads clearly */
  --color-bg: #121212;
  --color-bg-alt: #1C1C1E;
  --color-surface: #1C1C1E;
  --color-surface-raised: rgba(28, 28, 30, 0.95);
  --color-surface-muted: #2C2C2E;
  --color-grouped-card: #1C1C1E;
  --color-grouped-nested: #2C2C2E;
  /* TEST: kantlinjer av */
  --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);

  /* Dark elevation — same geometry as light; slightly stronger for dark surfaces */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}