/* Variables */
:root {
  /* Primary */
  --color-primary: #1e3a8a;
  --color-primary-light: #3b82f6;
  --color-primary-pale: #e1f3ff;
  --color-primary-super-pale: #e0f2fe;

  /* Other Colors */
  --color-accent: #dc2626;
  --color-accent-pale: #fef2f2;
  --color-background: #f8fafc;
  --color-border: #e5e7eb;
  --color-white: #ffffff;
  --color-black: #444444;
  --color-gray: #d1d5db;
  --color-gray-light: #e5e7eb;

  /* Text */
  --font-size-default: 14px;
  --font-size-small: 12px;
  --font-size-x-small: 10px;
  --font-size-title: 1.25rem;
  --font-size-title-small: 1.1rem;
  --color-text: #444444;
  --color-text-secondary: #666666;

  /* Radius */
  --round-small: 4px;
  --round-medium: 8px;
  --round-large: 16px;

  /* Transition */
  --transition: 0.3s ease;

  /* Shadow */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 8px 16px rgba(0, 0, 0, 0.1);

  /* Layout */
  --max-width: 100%;
}

@media (min-width: 1024px) {
  /* Variables */
  :root {
    /* Text */
    --font-size-default: 18px;
    --font-size-small: 14px;
    --font-size-title: 1.5rem;
    --font-size-title-small: 1.25rem;

    /* Layout */
    --max-width: 1200px;
  }
}