/* To manage colors and reduce efforts to type colors individually, save the colors as the variable */
/* https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Selectors/:root  */
:root {
  /* Base */
  --color-bg: #f1f5f9;
  --color-surface: #ffffff;

  /* Text */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-inverse: #ffffff;

  /* Accent */
  --color-accent: #0f4c75;
  --color-accent-hover: #0a3350;
  --color-accent-soft: #e2e8f0;
  --color-error: rgb(255, 0, 0);

  /* Border / Divider */
  --color-border: #cbd5e1;
  --color-divider: #cbd5e1;
  --color-card-shadow: rgba(15, 23, 42, 0.06);

  /* Button */
  --color-button-primary-bg: var(--color-accent);
  --color-button-primary-bg-hover: var(--color-accent-hover);
  --color-button-primary-text: var(--color-text-inverse);

  --color-button-secondary-bg: var(--color-surface);
  --color-button-secondary-bg-hover: #f8fafc;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-secondary-border: var(--color-border);

  /* Tag / Badge */
  --color-badge-bg: var(--color-accent-soft);
  --color-badge-text: var(--color-accent);

  /* Link */
  --color-link: var(--color-accent);
  --color-link-hover: var(--color-accent-hover);

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 2px 8px var(--color-card-shadow);
  --shadow-md: 0 8px 24px var(--color-card-shadow);
  --shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.5);
  color: var(--color-text-primary);
}

/* for dark theme, I used data-* attribute to indicate current theme */
/* https://developer.mozilla.org/en-US/docs/Web/HTML/How_to/Use_data_attributes */
html[data-theme="lab"] {
  /* Base */
  --color-bg: #071118;
  --color-surface: #0f1c24;

  /* Text */
  --color-text-primary: #d8f3ff;
  --color-text-secondary: #8abfd6;
  --color-text-inverse: #041014;

  /* Accent */
  --color-accent: #23f5b2;
  --color-accent-hover: #56f7c8;
  --color-accent-soft: #12343a;
  --color-error: rgb(255, 0, 0);

  /* Border / Divider */
  --color-border: #294954;
  --color-divider: #1a313a;
  --color-card-shadow: rgba(0, 255, 200, 0.10);

  /* Button */
  --color-button-primary-bg: var(--color-accent);
  --color-button-primary-bg-hover: var(--color-accent-hover);
  --color-button-primary-text: #041014;

  --color-button-secondary-bg: #0d1820;
  --color-button-secondary-bg-hover: #13242d;
  --color-button-secondary-text: var(--color-text-primary);
  --color-button-secondary-border: var(--color-border);

  /* Tag / Badge */
  --color-badge-bg: #112b31;
  --color-badge-text: #63e8c1;

  /* Link */
  --color-link: #7fffd4;
  --color-link-hover: #b8ffec;
  --shadow-sm: 0 2px 8px var(--color-card-shadow);
  --shadow-md: 0 8px 24px var(--color-card-shadow);
  --shadow-lg: 0 14px 36px rgba(0, 255, 200, 0.5);

  color: var(--color-text-primary);
}