/*
  Obsidian Desk reusable token reference.
  Extracted from the implemented Notes V2 app.
  This file is standalone documentation/support material and is not imported by the app.
*/

:root,
.obsidian-desk {
  color-scheme: light;

  --od-bg: #eef2f8;
  --od-bg-strong: #dfe7f3;
  --od-surface: rgba(255, 255, 255, 0.68);
  --od-surface-2: rgba(247, 250, 255, 0.62);
  --od-surface-3: rgba(229, 236, 248, 0.78);
  --od-text: #101522;
  --od-text-soft: rgba(16, 21, 34, 0.66);
  --od-text-faint: rgba(16, 21, 34, 0.42);
  --od-border: rgba(18, 25, 43, 0.11);
  --od-border-strong: rgba(18, 25, 43, 0.22);
  --od-accent: #5b5cf6;
  --od-accent-2: #1d7df2;
  --od-accent-3: #9b5cff;
  --od-accent-soft: rgba(91, 92, 246, 0.14);
  --od-accent-glow: rgba(91, 92, 246, 0.26);
  --od-danger: #db3f5f;
  --od-danger-soft: rgba(219, 63, 95, 0.13);
  --od-success: #28cf83;
  --od-warning: #ffe85e;
  --od-shadow: 0 24px 80px rgba(37, 50, 84, 0.14);
  --od-shadow-soft: 0 14px 38px rgba(37, 50, 84, 0.1);
  --od-glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(244, 248, 255, 0.46));
  --od-glass-bg-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(236, 244, 255, 0.58));
  --od-glass-border: rgba(18, 25, 43, 0.12);
  --od-glass-highlight: rgba(255, 255, 255, 0.86);
  --od-control-bg: rgba(255, 255, 255, 0.58);
  --od-control-bg-hover: rgba(255, 255, 255, 0.84);
  --od-control-text: rgba(16, 21, 34, 0.72);
  --od-note-base: #f7faff;
  --od-note-ink: #121827;
  --od-note-muted: rgba(18, 24, 39, 0.62);

  --od-note-yellow: #fef08a;
  --od-note-green: #bbf7d0;
  --od-note-blue: #bfdbfe;
  --od-note-pink: #fbcfe8;
  --od-note-lilac: #ddd6fe;
  --od-note-peach: #fed7aa;
  --od-note-teal: #99f6e4;
  --od-note-slate: #e2e8f0;

  --od-header-h: 58px;
  --od-safe-top: env(safe-area-inset-top, 0px);
  --od-safe-bottom: env(safe-area-inset-bottom, 0px);

  --od-font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --od-type-heading-size: 15px;
  --od-type-heading-weight: 800;
  --od-type-body-size: 14px;
  --od-type-body-weight: 500;
  --od-type-meta-size: 12px;
  --od-type-meta-weight: 600;

  --od-radius-xs: 5px;
  --od-radius-sm: 8px;
  --od-radius-md: 10px;
  --od-radius-popover: 12px;
  --od-radius-note: 16px;
  --od-radius-mobile-card: 18px;
  --od-radius-panel: 24px;
  --od-radius-pill: 999px;

  --od-blur-control: 16px;
  --od-blur-surface: 18px;
  --od-blur-sidebar: 20px;
  --od-blur-mobile-chrome: 22px;
  --od-blur-panel: 24px;

  --od-transition-fast: 0.14s ease;
  --od-transition-card: 0.16s ease;
  --od-transition-swipe: 0.18s ease;
  --od-press-transform: translateY(1px);
  --od-drag-transform: translateY(-2px);

  /*
    Compatibility aliases matching the current Notes V2 implementation.
    Future apps can either use --od-* directly or these shorter aliases.
  */
  --bg: var(--od-bg);
  --bg-strong: var(--od-bg-strong);
  --surface: var(--od-surface);
  --surface-2: var(--od-surface-2);
  --surface-3: var(--od-surface-3);
  --text: var(--od-text);
  --text-soft: var(--od-text-soft);
  --text-faint: var(--od-text-faint);
  --border: var(--od-border);
  --border-strong: var(--od-border-strong);
  --accent: var(--od-accent);
  --accent-2: var(--od-accent-2);
  --accent-3: var(--od-accent-3);
  --accent-soft: var(--od-accent-soft);
  --accent-glow: var(--od-accent-glow);
  --danger: var(--od-danger);
  --danger-soft: var(--od-danger-soft);
  --success: var(--od-success);
  --warning: var(--od-warning);
  --shadow: var(--od-shadow);
  --shadow-soft: var(--od-shadow-soft);
  --glass-bg: var(--od-glass-bg);
  --glass-bg-strong: var(--od-glass-bg-strong);
  --glass-border: var(--od-glass-border);
  --glass-highlight: var(--od-glass-highlight);
  --control-bg: var(--od-control-bg);
  --control-bg-hover: var(--od-control-bg-hover);
  --control-text: var(--od-control-text);
  --note-base: var(--od-note-base);
  --note-ink: var(--od-note-ink);
  --note-muted: var(--od-note-muted);
  --header-h: var(--od-header-h);
  --safe-top: var(--od-safe-top);
  --safe-bottom: var(--od-safe-bottom);
  --type-heading-size: var(--od-type-heading-size);
  --type-heading-weight: var(--od-type-heading-weight);
  --type-body-size: var(--od-type-body-size);
  --type-body-weight: var(--od-type-body-weight);
  --type-meta-size: var(--od-type-meta-size);
  --type-meta-weight: var(--od-type-meta-weight);
}

:root[data-theme='dark'],
.obsidian-desk[data-theme='dark'],
[data-theme='dark'] .obsidian-desk {
  color-scheme: dark;

  --od-bg: #05070d;
  --od-bg-strong: #080d18;
  --od-surface: rgba(18, 21, 34, 0.62);
  --od-surface-2: rgba(27, 31, 48, 0.58);
  --od-surface-3: rgba(43, 48, 69, 0.68);
  --od-text: #f6f8ff;
  --od-text-soft: rgba(246, 248, 255, 0.68);
  --od-text-faint: rgba(246, 248, 255, 0.4);
  --od-border: rgba(255, 255, 255, 0.085);
  --od-border-strong: rgba(255, 255, 255, 0.18);
  --od-accent: #8d7bff;
  --od-accent-2: #49a0ff;
  --od-accent-3: #b76cff;
  --od-accent-soft: rgba(141, 123, 255, 0.16);
  --od-accent-glow: rgba(141, 123, 255, 0.34);
  --od-danger: #ff6381;
  --od-danger-soft: rgba(255, 99, 129, 0.16);
  --od-success: #54ee91;
  --od-warning: #fff36c;
  --od-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --od-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.32);
  --od-glass-bg: linear-gradient(145deg, rgba(28, 32, 50, 0.72), rgba(12, 16, 29, 0.5));
  --od-glass-bg-strong: linear-gradient(145deg, rgba(38, 43, 64, 0.78), rgba(15, 18, 31, 0.62));
  --od-glass-border: rgba(255, 255, 255, 0.1);
  --od-glass-highlight: rgba(255, 255, 255, 0.2);
  --od-control-bg: rgba(255, 255, 255, 0.07);
  --od-control-bg-hover: rgba(255, 255, 255, 0.13);
  --od-control-text: rgba(246, 248, 255, 0.72);
  --od-note-base: #090d18;
  --od-note-ink: #f7f9ff;
  --od-note-muted: rgba(247, 249, 255, 0.64);
}

.obsidian-desk {
  font-family: var(--od-font-family);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--od-accent-3) 24%, transparent), transparent 32%),
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--od-accent-2) 22%, transparent), transparent 34%),
    radial-gradient(circle at 52% 88%, color-mix(in srgb, var(--od-accent) 16%, transparent), transparent 42%),
    linear-gradient(145deg, var(--od-bg), var(--od-bg-strong));
  color: var(--od-text);
}

.obsidian-desk-glass-panel {
  border: 1px solid var(--od-glass-border);
  border-radius: var(--od-radius-panel);
  background: var(--od-glass-bg-strong);
  box-shadow: var(--od-shadow);
  backdrop-filter: blur(var(--od-blur-panel));
}

.obsidian-desk-glass-control {
  border: 1px solid var(--od-glass-border);
  background: var(--od-control-bg);
  color: var(--od-control-text);
  box-shadow: inset 0 1px 0 var(--od-glass-highlight);
  backdrop-filter: blur(var(--od-blur-control));
}

.obsidian-desk-note-surface {
  --note-color: var(--od-note-yellow);
  color: var(--od-note-ink);
  border: 1px solid color-mix(in srgb, var(--note-color) 40%, var(--od-glass-border));
  border-radius: var(--od-radius-note);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--note-color) 38%, var(--od-note-base)) 0%,
      color-mix(in srgb, var(--note-color) 18%, var(--od-note-base)) 54%,
      color-mix(in srgb, var(--note-color) 9%, var(--od-surface)) 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 16px 44px rgba(0, 0, 0, 0.16),
    0 0 34px color-mix(in srgb, var(--note-color) 18%, transparent);
  backdrop-filter: blur(var(--od-blur-surface));
}