/* ==========================================================================
   Git2Cloud design tokens

   Deliberately not the generic "AI-app" blue (#2563eb on cold gray-white).
   The palette reads as a private archive: warm paper surfaces, ink text,
   and a single considered accent - a deep spruce green, evoking growth and
   branching paths rather than a generic SaaS "trust blue". Amber is used
   sparingly as the one warm counter-note (favorites, folders).

   Three type roles are used deliberately, not just one flat font stack:
   --font-display for the brand/headings (tight tracking, heavier weight),
   --font-body for everything else, and --font-mono for exact figures
   (file sizes, dates, counts) - the same convention code editors and
   GitHub itself use for data that should align and read precisely.
   ========================================================================== */

:root {
  /* --- Palette (light) --- */
  --color-primary: #2f6f62;         /* spruce - primary accent */
  --color-primary-hover: #255a4f;
  --color-primary-soft: #e7f0ed;
  --color-warm: #c97c2a;            /* amber - secondary accent (favorites, folders) */
  --color-warm-soft: #f6e9d8;

  --color-background: #f7f6f3;      /* paper */
  --color-surface: #ffffff;
  --color-surface-alt: #efede7;
  --color-text: #1c1f26;            /* ink */
  --color-text-muted: #6b6357;      /* clay */
  --color-text-faint: #9a9385;
  --color-border: #e4e0d7;
  --color-border-strong: #d3cdbe;

  --color-success: #2f7a5e;
  --color-danger: #b0453d;
  --color-danger-soft: #f6e7e5;
  --color-warning: #a66a17;

  /* --- Type roles --- */
  --font-display: -apple-system, "Segoe UI", "SF Pro Display", Inter, Roboto, Arial, sans-serif;
  --font-body: -apple-system, "Segoe UI", Inter, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;
  --tracking-tight: -0.02em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(28, 23, 14, 0.07);
  --shadow-md: 0 6px 20px rgba(28, 23, 14, 0.10);
  --shadow-lg: 0 16px 44px rgba(28, 23, 14, 0.18);

  --sidebar-width: 240px;
  --topbar-height: 64px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-primary: #4fa08c;
  --color-primary-hover: #63b29e;
  --color-primary-soft: #1b2e29;
  --color-warm: #de9a4e;
  --color-warm-soft: #33291a;

  --color-background: #14171b;
  --color-surface: #1c2024;
  --color-surface-alt: #23282e;
  --color-text: #ece9e2;
  --color-text-muted: #a29b8b;
  --color-text-faint: #746c5d;
  --color-border: #2a2f35;
  --color-border-strong: #3a4149;

  --color-success: #52b491;
  --color-danger: #e0776d;
  --color-danger-soft: #2c1c1a;
  --color-warning: #dba75a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --color-primary: #4fa08c;
    --color-primary-hover: #63b29e;
    --color-primary-soft: #1b2e29;
    --color-warm: #de9a4e;
    --color-warm-soft: #33291a;

    --color-background: #14171b;
    --color-surface: #1c2024;
    --color-surface-alt: #23282e;
    --color-text: #ece9e2;
    --color-text-muted: #a29b8b;
    --color-text-faint: #746c5d;
    --color-border: #2a2f35;
    --color-border-strong: #3a4149;

    --color-success: #52b491;
    --color-danger: #e0776d;
    --color-danger-soft: #2c1c1a;
    --color-warning: #dba75a;

    color-scheme: dark;
  }
}