/*
  QA2-09 Pocket Locker Design Plan
  1. Business/Subject items:
     - QA2-09 Pocket Locker: a personal pocket-sized digital vault for private notes & files
     - Intimate, calm, trustworthy aesthetic: soft slate, deep petrol ink, warm amber accent
     - Tactile elements: pocket tabs, clean note cards, clear file badges, direct download triggers
     - Zero leakage guarantee: record-owner strict isolation
     - Simple friendly layout: clear auth state, immediate access to notes and files
  2. Idea sentence:
     - On this site, a personal pocket notebook becomes an unbreachable digital safe with clear status feedback.
  3. Bold element:
     - Dual-drawer pocket layout with tactile note-cards and file tokens, explicit status feedback banners on every write/delete/download.
*/

:root {
  --color-ground: #f4f6f8;
  --color-surface: #ffffff;
  --color-surface-subtle: #ebf0f4;
  --color-ink: #16222f;
  --color-ink-muted: #536474;
  --color-accent: #0f62fe;
  --color-accent-hover: #0043ce;
  --color-danger: #da1e28;
  --color-danger-bg: #fff1f1;
  --color-success: #198038;
  --color-success-bg: #defbe6;
  --color-border: #d0d7de;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-subtle: 6px;
  --radius-round: 9999px;
}