/*
 * JeongGam company site design tokens.
 * All CSS color values live in this file. Component styles must consume them
 * through var(...) instead of declaring color literals directly.
 */

:root {
  /* Core palette */
  --color-canvas: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F3F8FC;

  --color-ink: #1F2937;
  --color-text: #5B667A;
  --color-text-strong: #475467;
  --color-muted: #667085;
  --color-line: #D8E2F0;

  --color-primary: #0F274F;
  --color-primary-hover: #183867;
  --color-primary-soft: #EEF2F6;

  /* Near-black navy reserved for the shared footer. */
  --color-footer: #0B1220;

  /* Homepage translucent surfaces */
  --color-header-glass: rgba(15, 39, 79, 0.72);
  --color-header-solid: rgba(15, 39, 79, 0.97);
  --color-hero-copy: rgba(255, 255, 255, 0.8);
  --color-orbit-node: rgba(255, 255, 255, 0.9);

  /* Flat translucent fills; illumination comes from the outer glow only */
  --background-hero-core-glass: rgba(15, 39, 79, 0.64);
  --background-hero-node-glass: rgba(220, 235, 255, 0.78);
  --color-hero-glow-line: rgba(220, 235, 255, 0.32);

  /* Clear blue accent derived from the primary navy; reserved for actions and key emphasis */
  --color-accent: #4A78E8;
  --color-accent-text: #3C63C6;
  --color-accent-hover: var(--color-accent-text);
  --color-accent-light: var(--color-accent-text);
  --color-accent-soft: #DCEBFF;

  /* Reserved for a future point-color use; not yet consumed by any component. */
  --color-point: #A8C936;

  /* Featured service glow */
  --color-feature-border: #BFD0F0;
  --color-panel-border: #E6ECF4;
  --color-feature-glow: rgba(74, 120, 232, 0.1);
  --color-feature-overlay: rgba(255, 255, 255, 0.92);
  --color-feature-overlay-soft: rgba(255, 255, 255, 0.38);

  /* Relationship diagram */
  --color-work-background: var(--color-surface);
  --color-node-surface: var(--color-surface-muted);
  --color-node-line: #9DB2D1;

  /* Homepage strength image overlay */
  --color-strength-image-base: #1B6271;
  --color-strength-overlay: rgba(243, 248, 252, 0.84);
  --color-strength-overlay-strong: rgba(243, 248, 252, 0.94);
  --color-strength-divider: rgba(214, 218, 226, 0.6);

  /* Neutral white overlay; fade the texture into the following canvas section. */
  --color-strength-photo-heading: rgba(255, 255, 255, 0.98);
  --color-strength-photo-overlay: rgba(255, 255, 255, 0.78);

  /* Detail hero backgrounds sampled from the left side of each visual */
  --color-detail-hero-offerwall: #D7EAFE;
  --color-detail-hero-offerwall-dim: rgba(0, 0, 0, 0.68);
  --color-detail-hero-offerwall-dim-strong: rgba(0, 0, 0, 0.58);
  --color-detail-hero-offerwall-header: rgba(0, 0, 0, 0.28);
  --color-detail-hero-offerwall-header-scrolled: rgba(255, 255, 255, 0.78);
  --color-detail-hero-offerwall-header-solid: rgba(255, 255, 255, 0.97);
  --color-detail-hero-card-lms: #F6FBFE;
  --color-detail-hero-card-lms-header-scrolled: rgba(255, 255, 255, 0.78);
  --color-detail-hero-card-lms-header-solid: rgba(255, 255, 255, 0.97);

  --color-disabled: #E5E8ED;
  --color-disabled-text: #838792;
  --color-error: #B33A3A;
  --color-error-soft: #FAECEA;

  /* Colors used on dark surfaces */
  --color-on-dark: #FFFFFF;
  --color-on-dark-strong: rgba(255, 255, 255, 0.88);
  --color-on-dark-muted: rgba(255, 255, 255, 0.72);
  --color-on-dark-subtle: rgba(255, 255, 255, 0.48);
  --color-on-dark-line: rgba(255, 255, 255, 0.14);
  --color-contact-divider: rgba(255, 255, 255, 0.24);
  --color-contact-photo-shade: rgba(11, 18, 32, 0.28);
  --color-transparent: transparent;

  /* Shared contact closing surface */
  --background-contact: radial-gradient(ellipse at 14% 0%, rgba(74, 120, 232, 0.12) 0%, var(--color-transparent) 56%), linear-gradient(120deg, var(--color-primary-hover) 0%, var(--color-primary) 56%, var(--color-primary-hover) 100%);

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(15, 39, 79, 0.06);
  --shadow-md: 0 12px 32px rgba(15, 39, 79, 0.09);
  --shadow-feature-glow: 0 0 0 1px rgba(74, 120, 232, 0.04), 0 12px 32px rgba(15, 39, 79, 0.1);
  --shadow-work-core-glow: 0 0 0 1px rgba(74, 120, 232, 0.04), 0 0 32px 8px rgba(220, 235, 255, 0.14), 0 10px 28px rgba(74, 120, 232, 0.08);

  /* Hero network glow on the dark navy background */
  --shadow-hero-core-glow: 0 0 22px 4px rgba(220, 235, 255, 0.26), 0 0 48px 10px rgba(74, 120, 232, 0.16);
  --shadow-hero-node-glow: 0 0 14px 2px rgba(220, 235, 255, 0.22), 0 0 28px 5px rgba(74, 120, 232, 0.12);

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;

  /* Layout */
  --maxw: 1200px;
  --header-h: 68px;

  /* Type */
  --font-sans: 'Noto Sans KR', BlinkMacSystemFont, 'Malgun Gothic', 'Segoe UI', sans-serif;
}