@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-on-secondary-fixed: #1c1b1b;
  --color-surface-container-highest: #ede0d7;
  --color-on-background: #211a15;
  --color-surface-variant: #ede0d7;
  --color-outline-variant: #d7c3b3;
  --color-on-secondary-fixed-variant: #474746;
  --color-error-container: #ffdad6;
  --color-secondary: #5f5e5e;
  --color-on-tertiary-container: #fafdff;
  --color-on-primary: #ffffff;
  --color-on-primary-fixed: #2d1600;
  --color-primary-container: #a66622;
  --color-secondary-container: #e2dfde;
  --color-inverse-on-surface: #fceee5;
  --color-outline: #857467;
  --color-surface-bright: #fff8f5;
  --color-on-tertiary-fixed-variant: #004d62;
  --color-secondary-fixed: #e5e2e1;
  --color-surface-container-low: #fff1e8;
  --color-on-tertiary: #ffffff;
  --color-tertiary: #00647e;
  --color-surface: #fff8f5;
  --color-on-primary-fixed-variant: #6b3b00;
  --color-inverse-surface: #362f29;
  --color-on-secondary-container: #636262;
  --color-surface-container: #f9ebe2;
  --color-on-primary-container: #fffbff;
  --color-on-error-container: #93000a;
  --color-on-tertiary-fixed: #001f29;
  --color-tertiary-container: #0a7f9e;
  --color-primary-fixed-dim: #ffb876;
  --color-tertiary-fixed-dim: #79d2f4;
  --color-background: #fff8f5;
  --color-primary: #884e08;
  --color-on-surface: #211a15;
  --color-tertiary-fixed: #baeaff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #f3e6dd;
  --color-inverse-primary: #ffb876;
  --color-error: #ba1a1a;
  --color-surface-tint: #8b500b;
  --color-on-error: #ffffff;
  --color-primary-fixed: #ffdcc0;
  --color-on-secondary: #ffffff;
  --color-surface-dim: #e5d8cf;
  --color-on-surface-variant: #524438;
  --color-secondary-fixed-dim: #c8c6c5;

  --spacing-unit: 4px;
  --spacing-sm: 8px;
  --spacing-xs: 4px;
  --spacing-lg: 24px;
  --spacing-container-max: 1120px;
  --spacing-gutter: 24px;
  --spacing-md: 16px;
  --spacing-xl: 48px;

  --font-body-md: 'Inter', sans-serif;
  --font-headline-lg: 'Inter', sans-serif;
  --font-mono-metric: 'JetBrains Mono', monospace;
  --font-body-lg: 'Inter', sans-serif;
  --font-headline-md: 'Inter', sans-serif;
  --font-mono-label: 'JetBrains Mono', monospace;
  --font-headline-lg-mobile: 'Inter', sans-serif;
}

.dark {
  --color-background: #121212;
  --color-on-background: #FBF9F6;
  --color-surface: #1e1e1e;
  --color-on-surface: #E0E0E0;
  --color-surface-container-lowest: #121212;
  --color-surface-container-low: #1e1e1e;
  --color-surface-variant: #2a2a2a;
  --color-on-surface-variant: #b0b0b0;
  --color-outline: #555555;
  --color-outline-variant: #333333;
  --color-primary: #ffb876;
  --color-inverse-surface: #e0e0e0;
  --color-inverse-on-surface: #121212;
}

@utility text-body-md {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
@utility text-headline-lg {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
@utility text-mono-metric {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
@utility text-body-lg {
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
@utility text-headline-md {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
@utility text-mono-label {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
@utility text-headline-lg-mobile {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.01em;
  font-weight: 600;
}

body {
  background-color: var(--color-background);
  color: var(--color-on-background);
}

.shadow-stroke {
  box-shadow: 0 0 2px 0 rgba(33, 26, 21, 0.05);
}

.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--color-primary);
}

@keyframes blink {
  50% { opacity: 0; }
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-outline);
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}