:root {
  color-scheme: light;

  /* Color */
  --bg: #f5f7fb;
  --surface: #ffffff;
  --side: #f8fafc;
  --surface-subtle: #f3f6fa;
  --surface-hover: #edf2f8;
  --border: #cbd5e1;
  --border-strong: #aeb8c6;
  --text: #172033;
  --muted: #475467;
  --faint: #667085;
  --icon-muted: #667085;
  --icon-muted-bg: #f1f3f6;
  --brand: #ff3b30;
  --brand-blue: #0051ba;
  --brand-yellow: #ffda1a;
  --brand-soft: #fff0ef;
  --primary: #ff3b30;
  --primary-hover: #e8342a;
  --accent: var(--primary);
  --accent-hover: var(--primary-hover);
  --accent-soft: var(--brand-soft);
  --info: #175cd3;
  --info-soft: #eff8ff;
  --danger: #ff3b30;
  --danger-soft: #fff1f0;
  --warning: #b54708;
  --warning-soft: #fff4e5;
  --success: #067647;
  --success-bg: #ecfdf3;
  --success-text: #05603a;
  --category-contract-bg: #eff6ff;
  --category-contract-text: #1d4ed8;
  --category-certificate-bg: #ecfdf3;
  --category-certificate-text: #067647;
  --category-request-bg: #fff7ed;
  --category-request-text: #c2410c;
  --category-order-bg: #fff0ef;
  --category-order-text: #ff3b30;
  --category-agreement-bg: #f5f3ff;
  --category-agreement-text: #6d28d9;
  --category-other-bg: #f1f5f9;
  --category-other-text: #475569;
  --category-uncategorized-bg: #f8fafc;
  --category-uncategorized-text: #64748b;
  --attendance-surface: #172236;
  --attendance-surface-hover: #223149;
  --attendance-border: #27354d;
  --attendance-text: #f8fafc;
  --attendance-muted: #aebbd0;
  --focus-ring: color-mix(in srgb, var(--accent) 30%, transparent);
  --overlay: rgba(15, 23, 42, .38);

  /* Shared list/search and semantic file surfaces */
  --on-accent: #fff;
  --search-height: calc(42px * var(--density-scale));
  --search-background: var(--surface-subtle);
  --list-header-title-size: calc(18px * var(--font-scale));
  --list-header-title-weight: 700;
  --sidebar-title-icon-size: 18px;
  --file-type-default: var(--danger);
  --file-type-image: #7c62ce;
  --file-type-office: var(--info);
  --file-type-text: var(--success);
  --file-type-media: var(--warning);
  --viewer-canvas: #202633;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-scale: 1;
  --density-scale: 1;
  --text-3xs: calc(9px * var(--font-scale));
  --text-2xs: calc(10px * var(--font-scale));
  --text-xs: calc(12px * var(--font-scale));
  --text-sm: calc(13px * var(--font-scale));
  --text-control: calc(14px * var(--font-scale));
  --text-md: calc(15px * var(--font-scale));
  --text-base: var(--text-md);
  --text-list-title: calc(15px * var(--font-scale));
  --text-reading: calc(16px * var(--font-scale));
  --text-lg: calc(17px * var(--font-scale));
  --text-xl: calc(22px * var(--font-scale));
  --text-2xl: calc(28px * var(--font-scale));
  --rich-text-sm: var(--text-sm);
  --rich-text-base: var(--text-md);
  --rich-text-lg: var(--text-lg);
  --rich-text-xl: var(--text-xl);
  --rich-text-line-height: 1.55;
  --rich-text-table-line-height: 1.45;
  --line-tight: 1.3;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* Shape and elevation */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --shadow-panel: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-popover: 0 14px 34px rgba(16, 24, 40, .14);

  /* Layout */
  --header-height: 64px;
  --footer-height: 0px;
  --sidebar-width: 236px;
  --content-max: 1480px;
  --split-size: var(--stored-split-size, 42%);
  --workspace-list-size: var(--split-size);
  --workspace-list-min: 320px;
  --workspace-detail-min: 420px;
  --workspace-preview-min: 340px;
  --workspace-preview-default: 42%;
  --workspace-pane-nav-size: var(--sidebar-width);
  --workspace-pane-nav-min: 210px;
  --workspace-pane-list-min: 430px;
  --workspace-divider-size: 12px;
  --workspace-divider-line-size: 1px;
  --workspace-divider-color: var(--border);
  --workspace-divider-hover: var(--primary);
  /* Shared create/edit workspace. Percentage values stay unitless for JS resizing. */
  --workspace-authoring-list-default: 24;
  --workspace-authoring-list-min: 18;
  --workspace-authoring-list-max: 45;
  --workspace-authoring-header-height: calc(72px * var(--density-scale));
  --workspace-authoring-content-width: 1280px;
  --workspace-authoring-padding-inline: 24px;
  --workspace-authoring-padding-block: 20px;
  --workspace-authoring-section-gap: 18px;
  --workspace-authoring-footer-height: calc(64px * var(--density-scale));
  --workspace-authoring-editor-min-height: 280px;
  --workspace-authoring-editor-min-height-mobile: 240px;
  --page-gutter-inline: 30px;
  --page-gutter-top: 26px;
  --page-gutter-bottom: 40px;
  --section-gap: 24px;
  --panel-padding-inline: 16px;
  --modal-viewport-inset: 32px;
  --modal-viewport-block-inset: 32px;
  --table-cell-padding-inline: 12px;
  --table-cell-padding-block: 12px;
  --control-height-sm: calc(34px * var(--density-scale));
  --control-height: calc(38px * var(--density-scale));
  --control-height-lg: calc(44px * var(--density-scale));
  --icon-size-sm: 15px;
  --icon-size: 18px;
  --icon-button-size-sm: calc(32px * var(--density-scale));
  --icon-button-size: calc(36px * var(--density-scale));
  --panel-head-height: calc(56px * var(--density-scale));
  --list-head-height: calc(42px * var(--density-scale));
  --list-row-height: calc(66px * var(--density-scale));
  --sidebar-row-height: calc(42px * var(--density-scale));
  --document-content-width: 1040px;
  --document-action-size-mobile: calc(40px * var(--density-scale));
  --modal-width-sm: 540px;
  --modal-width-md: 760px;
  --modal-width-lg: 1120px;
  --modal-width-xl: 1440px;
  --modal-head-height: calc(84px * var(--density-scale));
  --z-footer: 15;
  --z-header: 30;
  --z-drawer: 70;
  --z-popover: 90;
  --z-overlay: 100;
  --z-modal: 110;

  font-family: var(--font-sans);
}

html[data-font-size="comfortable"] {
  --font-scale: 1.08;
  --density-scale: 1.04;
}

html[data-font-size="large"] {
  --font-scale: 1.16;
  --density-scale: 1.08;
}

:root.dark,
body.dark {
  color-scheme: dark;
  --bg: #000000;
  --surface: #121212;
  --side: #090909;
  --surface-subtle: #212121;
  --surface-hover: #2a2a2a;
  --border: #303030;
  --border-strong: #4a4a4a;
  --text: #f1f1f1;
  --muted: #b3b3b3;
  --faint: #8f8f8f;
  --icon-muted: #aaaaaa;
  --icon-muted-bg: #212121;
  --brand: #ff3b30;
  --brand-blue: #4c8edb;
  --brand-yellow: #ffe45c;
  --brand-soft: #321311;
  --primary: #ff3b30;
  --primary-hover: #ff554c;
  --accent: #ff3b30;
  --accent-hover: #ff3b30;
  --accent-soft: #321311;
  --info: #84adff;
  --info-soft: #17263d;
  --danger: #ff3b30;
  --danger-soft: #321b1a;
  --warning: #fdb022;
  --warning-soft: #302513;
  --success: #6ce9a6;
  --success-bg: #173025;
  --success-text: #a1e3b9;
  --category-contract-bg: #17263d;
  --category-contract-text: #84adff;
  --category-certificate-bg: #173025;
  --category-certificate-text: #6ce9a6;
  --category-request-bg: #302513;
  --category-request-text: #fdb022;
  --category-order-bg: #321311;
  --category-order-text: #ff3b30;
  --category-agreement-bg: #2a2142;
  --category-agreement-text: #c3b5fd;
  --category-other-bg: #262626;
  --category-other-text: #cbd5e1;
  --category-uncategorized-bg: #1d1d1d;
  --category-uncategorized-text: #aab2bd;
  --attendance-surface: #181818;
  --attendance-surface-hover: #242424;
  --attendance-border: #383838;
  --attendance-text: #f8fafc;
  --attendance-muted: #b3b3b3;
  --search-background: #292929;
  --focus-ring: color-mix(in srgb, var(--accent) 38%, transparent);
  --overlay: rgba(0, 0, 0, .68);
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-popover: 0 18px 42px rgba(0, 0, 0, .38);
}