:root {
  --color-bg: #EAE5DC;
  --color-surface: transparent;
  --color-surface-dim: transparent;
  --color-text: #1C1A17;
  --color-text-muted: #59544D;
  --color-text-light: #59544D;
  --color-primary: #D9532A;
  --color-primary-light: #B07D35;
  --color-primary-hover: #1C1A17;
  --color-secondary: #5F6B5F;
  --color-accent: #B07D35;
  --color-accent-hover: #1C1A17;
  --color-border: #1C1A17;
  --bg-color: #EAE5DC;
  --text-main: #1C1A17;
  --card-bg: transparent;
  --border-color: #1C1A17;
  --success-color: #5F6B5F;
  --surprise-color: #8C3B26;

  --font-display: 'Fraunces', serif;
  --font-serif: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-sans: 'Inter', sans-serif;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-card: none;
  
  --transition-fast: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-normal: 600ms cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: 1000ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hidden container for the DNA card that will be converted to an image */
#dna-card-container {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1080px; /* Instagram Story / Post optimized width */
    height: 1920px; /* 9:16 aspect ratio */
    background: linear-gradient(135deg, #e3dfd3 0%, #c8ccbf 100%);
    color: #2c3e35;
    font-family: 'Inter', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px;
    box-sizing: border-box;
    z-index: -100;
}

.dna-card-inner {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    border-radius: 0;
    padding: 100px 80px;
    width: 100%;
    height: 100%;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    border: 2px solid rgba(255,255,255,0.6);
}

.dna-card-header {
    text-align: center;
}

.dna-card-header h1 {
    font-family: 'Lora', serif;
    font-size: 6rem;
    margin: 0;
    color: #2c3e35;
    font-weight: 400;
}

.dna-card-header p {
    font-size: 2.5rem;
    margin-top: 20px;
    color: #4a6355;
    font-style: italic;
}

.dna-card-traits {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin: 80px 0;
}

.trait-badge {
    background: white;
    padding: 40px 60px;
    border-radius: 0;
    font-size: 3rem;
    font-weight: 500;
    text-align: center;
    color: #2c3e35;
    box-shadow: none;
}

.dna-card-footer {
    text-align: center;
    margin-top: auto;
}

.dna-card-footer .brand {
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: -1px;
}

.dna-card-footer .url {
    font-size: 3.5rem;
    color: #4a6355;
    margin-top: 15px;
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

::selection {
  background: var(--color-primary);
  color: #F9F7F3;
}

.btn:hover { transform: scale(1.02); }