/*
 * Syungbook design foundation v3
 * Shared tokens only. Admin consumes these first; reader/user surfaces can opt in later.
 */
:root,
html.theme-light {
  color-scheme: light;

  --sy-page: #f4f7fb;
  --sy-surface: #ffffff;
  --sy-surface-subtle: #f8fafc;
  --sy-surface-muted: #eef3f8;
  --sy-surface-elevated: #ffffff;

  --sy-text: #172033;
  --sy-text-secondary: #647084;
  --sy-text-tertiary: #8a96a8;
  --sy-text-disabled: #aab3c0;

  --sy-line: #dce4ee;
  --sy-line-strong: #cbd6e3;
  --sy-line-soft: #e9eef4;

  --sy-accent: #356fd6;
  --sy-accent-hover: #2d61bd;
  --sy-accent-soft: #edf4ff;
  --sy-accent-line: #cfe0fb;
  --sy-accent-text: #2758ac;

  --sy-success: #1f7a55;
  --sy-success-soft: #edf8f3;
  --sy-warning: #8a640d;
  --sy-warning-soft: #fff9df;
  --sy-danger: #b64550;
  --sy-danger-soft: #fff1f2;
  --sy-info: #356fd6;
  --sy-info-soft: #edf4ff;

  --sy-overlay: rgba(14, 23, 38, .48);
  --sy-focus: rgba(53, 111, 214, .18);


  /* Stable semantic/component tokens. Keep these names when reader/user adopts the theme. */
  --sy-on-accent: #ffffff;
  --sy-on-success: #ffffff;
  --sy-on-warning: #172033;
  --sy-on-danger: #ffffff;

  --sy-nav-active-bg: #e7f0ff;
  --sy-nav-active-text: #1f55ad;
  --sy-nav-active-line: #356fd6;

  --sy-field-bg: #ffffff;
  --sy-field-text: #172033;
  --sy-field-placeholder: #8a96a8;
  --sy-field-border: #dce4ee;

  --sy-modal-bg: #ffffff;
  --sy-toast-bg: #172033;
  --sy-toast-text: #ffffff;
  --sy-progress-track: #e9eef4;
  --sy-progress-fill: #356fd6;

  --sy-neutral-badge-bg: #eef3f8;
  --sy-neutral-badge-text: #56657a;
  --sy-source-drive-bg: #edf4ff;
  --sy-source-drive-text: #2f5fae;
  --sy-source-postype-bg: #f1efff;
  --sy-source-postype-text: #6555ad;
  --sy-offline-bg: #eef7f3;
  --sy-offline-text: #39725c;
  --sy-like-bg: #fff1f4;
  --sy-like-text: #a84d62;

  --sy-control: #ffffff;
  --sy-control-hover: #f7f9fc;
  --sy-selected: #edf4ff;
  --sy-code-bg: #eef3f8;
  --sy-table-head: #f7f9fc;
  --sy-row-hover: #f8fafc;
  --sy-chip: #eef3f8;
  --sy-scroll-thumb: #c4cfdd;

  --sy-radius-xs: 6px;
  --sy-radius-sm: 8px;
  --sy-radius-md: 10px;
  --sy-radius-lg: 12px;

  --sy-shadow-sm: 0 1px 2px rgba(18, 32, 54, .04);
  --sy-shadow-modal: 0 24px 64px rgba(18, 32, 54, .16);

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

  --sy-control-sm: 34px;
  --sy-control-md: 40px;
  --sy-control-lg: 44px;

  --sy-fast: 140ms ease;
  --sy-normal: 200ms ease;

  --sy-text-primary: var(--sy-text);
  --sy-radius-control: var(--sy-radius-md);
}

html.theme-dark {
  color-scheme: dark;

  --sy-page: #0f141d;
  --sy-surface: #161d28;
  --sy-surface-subtle: #1b2431;
  --sy-surface-muted: #212b39;
  --sy-surface-elevated: #1a2230;

  --sy-text: #edf2f8;
  --sy-text-secondary: #a8b3c2;
  --sy-text-tertiary: #7f8b9b;
  --sy-text-disabled: #647080;

  --sy-line: #2b3747;
  --sy-line-strong: #3a485b;
  --sy-line-soft: #232e3d;

  --sy-accent: #79a8ff;
  --sy-accent-hover: #91b8ff;
  --sy-accent-soft: #172845;
  --sy-accent-line: #294b7c;
  --sy-accent-text: #a8c8ff;

  --sy-success: #68c59b;
  --sy-success-soft: #143126;
  --sy-warning: #e8bf62;
  --sy-warning-soft: #2b2718;
  --sy-danger: #f08a94;
  --sy-danger-soft: #391d22;
  --sy-info: #79a8ff;
  --sy-info-soft: #172845;

  --sy-overlay: rgba(3, 7, 13, .72);
  --sy-focus: rgba(121, 168, 255, .22);


  --sy-on-accent: #0b1524;
  --sy-on-success: #081b13;
  --sy-on-warning: #171006;
  --sy-on-danger: #220b0e;

  --sy-nav-active-bg: #172845;
  --sy-nav-active-text: #b8d2ff;
  --sy-nav-active-line: #79a8ff;

  --sy-field-bg: #161d28;
  --sy-field-text: #edf2f8;
  --sy-field-placeholder: #7f8b9b;
  --sy-field-border: #2b3747;

  --sy-modal-bg: #1a2230;
  --sy-toast-bg: #edf2f8;
  --sy-toast-text: #0f141d;
  --sy-progress-track: #2b3747;
  --sy-progress-fill: #79a8ff;

  --sy-neutral-badge-bg: #212b39;
  --sy-neutral-badge-text: #b5c0d0;
  --sy-source-drive-bg: #172845;
  --sy-source-drive-text: #a8c8ff;
  --sy-source-postype-bg: #24223d;
  --sy-source-postype-text: #c9c2ff;
  --sy-offline-bg: #173128;
  --sy-offline-text: #8ed1b3;
  --sy-like-bg: #361f2a;
  --sy-like-text: #f0a4b3;

  --sy-control: #161d28;
  --sy-control-hover: #1b2431;
  --sy-selected: #172845;
  --sy-code-bg: #212b39;
  --sy-table-head: #1b2431;
  --sy-row-hover: #1b2431;
  --sy-chip: #212b39;
  --sy-scroll-thumb: #3b495b;

  --sy-shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
  --sy-shadow-modal: 0 28px 72px rgba(0, 0, 0, .42);

  --sy-text-primary: var(--sy-text);
  --sy-radius-control: var(--sy-radius-md);
}

/* v3 component-level tokens: shared by admin first, reader/user later. */
:root,
html.theme-light {
  --sy-button-bg: var(--sy-control);
  --sy-button-hover: var(--sy-control-hover);
  --sy-button-text: var(--sy-text);
  --sy-button-border: var(--sy-line);
  --sy-button-active-bg: var(--sy-accent-soft);
  --sy-button-active-text: var(--sy-accent-text);
  --sy-nav-bg: color-mix(in srgb, var(--sy-page) 96%, transparent);
  --sy-note-bg: var(--sy-surface-subtle);
  --sy-table-row: var(--sy-surface);
  --sy-table-row-alt: var(--sy-surface-subtle);
  --sy-status-border: var(--sy-line);
  --sy-font-xs: 10px;
  --sy-font-sm: 11px;
  --sy-font-md: 12px;
  --sy-font-lg: 18px;
}

html.theme-dark {
  --sy-button-bg: var(--sy-control);
  --sy-button-hover: var(--sy-control-hover);
  --sy-button-text: var(--sy-text);
  --sy-button-border: var(--sy-line);
  --sy-button-active-bg: var(--sy-accent-soft);
  --sy-button-active-text: var(--sy-accent-text);
  --sy-nav-bg: color-mix(in srgb, var(--sy-page) 95%, transparent);
  --sy-note-bg: var(--sy-surface-subtle);
  --sy-table-row: var(--sy-surface);
  --sy-table-row-alt: var(--sy-surface-subtle);
  --sy-status-border: var(--sy-line);
}