/*
 * Isaac Perez - Legal pages stylesheet
 * ============================================================
 * The tokens, reset and base type from the former fleet design-system.css copy, and nothing
 * else. /roommate/{privacy,terms,support}/ and /souvenir/privacy/ are the only
 * pages here that ever loaded the design system, and they use none of its
 * components: every rule they carry is in their own page-scoped <style> block,
 * built out of the custom properties below. Linking all 31KB meant 76% of the
 * one render-blocking asset on an App Store legal page described buttons,
 * cards, navs, heroes and device frames that page does not contain.
 *
 * The unlinked fleet copy was removed; these retained tokens are self-contained.
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================================ */

:root {
  /* Scrollbars, the overscroll rubber-band and the pre-paint canvas follow this
     rather than --color-surface; without it the four legal pages render light
     browser chrome around a dark page. css/personal.css:3 does the same. */
  color-scheme: light;

  /* -------------------- Colors -------------------- */
  
  /* Neutral Palette */
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f7;
  --color-gray-200: #e8e8ed;
  --color-gray-300: #d2d2d7;
  --color-gray-400: #a1a1a6;
  --color-gray-500: #86868b;
  --color-gray-600: #6e6e73;
  --color-gray-700: #424245;
  --color-gray-800: #2d2d2d;
  --color-gray-900: #1d1d1f;
  --color-black: #000000;
  
  /* Primary Brand Color - Calm, confident blue-gray */
  --color-primary: #2d3436;
  --color-primary-light: #636e72;
  --color-primary-dark: #1e2224;
  
  /* Accent Color - Default (can be overridden per subdomain) */
  --color-accent: #0071e3;
  --color-accent-light: #40a0ff;
  --color-accent-dark: #0058b0;
  --color-accent-subtle: rgba(0, 113, 227, 0.1);
  
  /* Semantic Colors */
  --color-success: #34c759;
  --color-warning: #ff9f0a;
  --color-error: #ff3b30;
  
  /* Surface Colors */
  --color-surface: var(--color-white);
  --color-surface-elevated: var(--color-white);
  --color-surface-secondary: var(--color-gray-50);
  --color-surface-tertiary: var(--color-gray-100);
  
  /* Text Colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  /* gray-500 is 3.62:1 on --color-surface, and the legal pages use tertiary for
     the 15px "Last updated" line and the footer's only link -- small text, so
     4.5:1 applies. Between gray-500 and gray-600; the dark blocks below keep
     gray-500, where it already clears AA. */
  --color-text-tertiary: #74747a;
  --color-text-inverse: var(--color-white);
  
  /* Border Colors */
  --color-border: var(--color-gray-200);
  --color-border-light: var(--color-gray-100);
  
  /* -------------------- Typography -------------------- */
  
  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, 'Cascadia Mono', monospace;
  
  /* Font Sizes - Fluid Scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12-13px */
  --text-sm: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);    /* 13-15px */
  --text-base: clamp(0.9375rem, 0.875rem + 0.3vw, 1.0625rem); /* 15-17px */
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);        /* 18-21px */
  --text-xl: clamp(1.3125rem, 1.1rem + 0.9vw, 1.75rem);       /* 21-28px */
  --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);         /* 28-40px */
  --text-3xl: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);           /* 36-56px */
  --text-4xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);             /* 44-72px */
  --text-5xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);              /* 56-96px */
  
  /* Font Weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  
  /* -------------------- Spacing -------------------- */
  
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  --space-40: 10rem;    /* 160px */
  
  /* -------------------- Layout -------------------- */
  
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1440px;
  
  --grid-gap: var(--space-6);
  --section-gap: var(--space-24);
  
  /* -------------------- Borders & Radius -------------------- */
  
  --radius-none: 0;
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-2xl: 1.5rem;    /* 24px */
  --radius-3xl: 2rem;      /* 32px */
  --radius-full: 9999px;
  
  --border-width: 1px;
  --border-width-2: 2px;
  
  /* -------------------- Shadows -------------------- */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.08);
  
  /* Colored shadows for buttons/cards */
  --shadow-accent: 0 4px 16px rgba(0, 113, 227, 0.2);
  
  /* -------------------- Transitions -------------------- */
  
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  
  /* -------------------- Z-Index Scale -------------------- */
  
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ============================================================
   DARK MODE
   ============================================================ */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* Surface Colors */
    --color-surface: var(--color-gray-900);
    --color-surface-elevated: #2d2d2d;
    --color-surface-secondary: #1a1a1a;
    --color-surface-tertiary: var(--color-black);
    
    /* Text Colors */
    --color-text-primary: var(--color-gray-100);
    --color-text-secondary: var(--color-gray-400);
    --color-text-tertiary: var(--color-gray-500);
    
    /* Border Colors */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-light: rgba(255, 255, 255, 0.05);
    
    /* Adjusted accent for dark mode. #0071e3 is only 3.58:1 on --color-surface,
       and it paints every legal-page eyebrow and every link in the body copy --
       the App-Store-declared privacy, terms and support URLs. */
    --color-accent: #4da3ff;
    --color-accent-subtle: rgba(77, 163, 255, 0.2);
    
    /* Shadows for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
    --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4);
  }
}

/* Manual dark mode toggle */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surface Colors */
  --color-surface: var(--color-gray-900);
  --color-surface-elevated: #2d2d2d;
  --color-surface-secondary: #1a1a1a;
  --color-surface-tertiary: var(--color-black);
  
  /* Text Colors */
  --color-text-primary: var(--color-gray-100);
  --color-text-secondary: var(--color-gray-400);
  --color-text-tertiary: var(--color-gray-500);
  
  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.05);
  
  /* Adjusted accent for dark mode -- see the media-query block above. */
  --color-accent: #4da3ff;
  --color-accent-subtle: rgba(77, 163, 255, 0.2);
  
  /* Shadows for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   CSS RESET & BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Selection color */
::selection {
  background-color: var(--color-accent-subtle);
  color: var(--color-text-primary);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* ============================================================
   LEGAL PAGES
   ============================================================
   /roommate/{privacy,terms,support}/ and /souvenir/privacy/ are the only pages
   that load this file, and every one of them carried this exact block inline:
   106 byte-identical lines in four files, with souvenir/privacy a strict
   superset. Those URLs are declared in App Store Connect and can never move, so
   they outlive every other page here -- the link-underline contrast fix on this
   branch had to be typed into four files by hand, and the fourth copy was
   already 50 lines longer than the other three. It lives here once now. Souvenir keeps the rules only it
   needs (h3, hr, code, .legal-pre, .legal-table*) in its own <style>, because
   three pages should not download rules for a table they do not have.

   The `body` rule below deliberately re-states the base one above it: these
   pages set their line-height to 1.6 for long-form reading, and this section is
   last in the file exactly as the inline block was last in the document. */

body {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  line-height: 1.6;
}

.legal-container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.legal-header {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.legal-eyebrow {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
}

.legal-title {
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.02em;
}

.legal-meta {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.legal-content h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin: var(--space-10) 0 var(--space-3);
  letter-spacing: -0.01em;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p,
.legal-content li {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.legal-content p {
  margin: 0 0 var(--space-4);
}

.legal-content ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
}

.legal-content li {
  margin-bottom: var(--space-2);
}

/* Underlined rather than coloured only. The accent is 1.07:1 against the
   body grey it sits in, and the only other affordance was a transparent
   bottom border that appeared on :hover -- which a phone never has, so on
   touch the link never looked like one at all. */
.legal-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: text-decoration-thickness 0.15s ease;
}

.legal-content a:hover {
  text-decoration-thickness: 2px;
}

.legal-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

.legal-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

.legal-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.legal-footer a:hover { color: var(--color-accent); }