/* Tokens styles */
/* Self-hosted web fonts */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-size: 24px;
}

/* Shared design tokens: keep this block identical in both apps. */
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-ink: #111827;
  --color-blue-1: #0071e3;
  --color-blue-2: #005ab5;
  --color-blue-3: #004085;
  --color-blue-text: #005ab5;
  --color-red-1: #c44438;
  --color-red-2: #913128;
  --color-green-1: #35752e;
  --color-green-text: #35752e;
  --color-red-text: #a13027;
  --color-amber-text: #8a4c00;
  --color-amber-1: #b45309;
  --color-gray-1: #fafafa;
  --color-gray-3: #bebebe;
  --color-gray-5: #666666;
  --color-gray-6: #4e4e4e;
  --color-gray-8: #1d1d1d;
  --font-family: 'Roboto', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --base-font-size: 1rem;
  --line-height: 1.4;
  --radius-control: 6px;
  --radius-panel: 10px;
  --radius-surface: 12px;
  --radius-round: 999px;
  --zone-header-color: #3d4a5c;
  --bg-color: #f3f4f6;
  --surface-color: var(--color-white);
  --surface2-color: #f6f7f9;
  --border-color: #858b94;
  --card-shell-border: color-mix(in srgb, var(--border-color) 35%, var(--surface-color));
  --font-color: var(--color-gray-8);
  --font-color-2: var(--color-gray-5);
  --font-color-footer: var(--color-gray-5);
  --branding-font-color: var(--font-color);
  --branding-span-font-color: var(--color-blue-1);
  --link-hover-color: var(--color-blue-text);
  --button-bg-color: var(--color-blue-1);
  --button-hover-bg-color: var(--color-blue-2);
  --button-active-bg-color: var(--color-blue-3);
  --button-font-color: var(--color-white);
  --button-disabled-bg-color: #d5d8de;
  --button-disabled-font-color: var(--color-gray-6);
  --form-input-bg-color: var(--color-gray-1);
  --form-input-font-color: var(--color-gray-6);
  --form-input-border: 1px solid var(--border-color);
  --form-placeholder-color: var(--color-gray-5);
  --accent: var(--color-blue-1);
  --accent-dim: rgb(0 113 227 / 10%);
  --body-glow: rgb(0 113 227 / 8%);
  --body-sheen: rgb(255 255 255 / 55%);
  --drop-tint: rgb(0 113 227 / 4%);
  --drop-tint-hover: rgb(0 113 227 / 10%);
  --border-color-drop-area: var(--focus-color);
  --focus-color: var(--color-blue-1);
}

/* Shared dark theme tokens: keep this block identical in both apps. */
[data-theme="dark"] {
  --zone-header-color: #b4c0d0;
  color-scheme: dark;
  --color-blue-text: #9ac7ff;
  --color-green-text: #8fd38b;
  --color-red-text: #ff8d82;
  --color-amber-text: #ffc078;
  --bg-color: #16181c;
  --surface-color: #22252b;
  --surface2-color: #2d3138;
  --border-color: #7b828c;
  --card-shell-border: color-mix(in srgb, var(--border-color) 35%, var(--surface-color));
  --font-color: #f1f3f5;
  --font-color-2: #b5bac2;
  --font-color-footer: #a6acb4;
  --branding-font-color: var(--font-color);
  --branding-span-font-color: var(--color-blue-1);
  --link-hover-color: var(--color-blue-text);
  --button-disabled-bg-color: #444a53;
  --button-disabled-font-color: var(--font-color);
  --form-input-bg-color: #181b20;
  --form-input-font-color: var(--font-color);
  --form-input-border: 1px solid var(--border-color);
  --form-placeholder-color: var(--font-color-2);
  --accent-dim: rgb(0 113 227 / 10%);
  --body-glow: rgb(0 113 227 / 14%);
  --body-sheen: rgb(255 255 255 / 3%);
  --border-color-drop-area: var(--focus-color);
  --focus-color: #9ac7ff;
}

/* pdfprotect tokens */
:root {
  --danger: var(--color-red-text);
  --success: var(--color-green-text);
  --locked: var(--color-red-text);
  --owner-locked: var(--color-amber-text);
  --protect-desk-bg: #e4e9ef;
  --protect-inset-bg: #edf0f4;
  --protect-card-shadow: 0 2px 8px rgb(17 24 39 / 12%), 0 10px 24px rgb(17 24 39 / 6%);
  --color-strength-orange: #d97706;
  --color-scan-blue: #3366cc;
}

[data-theme="dark"] {
  --protect-desk-bg: #171a1f;
  --protect-inset-bg: #191d23;
  --protect-card-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}