/**
 * Brand Typography
 *
 * PolySans font family with three weights
 */

@font-face {
  font-family: 'PolySans';
  src: url('/brand-assets/PolySans-Neutral/PolySans-Neutral.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PolySans';
  src: url('/brand-assets/PolySans-Slim/PolySans-Slim.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PolySans Mono';
  src: url('/brand-assets/PolySansSlimMono/PolySans-SlimMono.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/**
 * Brand Color Palette
 *
 * Colors are defined as CSS custom properties for easy theming
 * Each color includes CMYK, RGB, and Pantone reference values
 */

:root {
  /* Primary Colors */

  /* Burgundy
   * CMYK: C59 M97 Y42 K73
   * RGB: R58 G06 B35
   * PANTONE: 2042
   */
  --color-burgundy: rgb(58, 6, 35);
  --color-burgundy-hex: #3a0623;

  /* Crimson
   * CMYK: C00 M89 Y68 K00
   * RGB: R255 G44 B60
   * PANTONE: Red 032
   */
  --color-crimson: rgb(255, 44, 60);
  --color-crimson-hex: #ff2c3c;

  /* Sedona
   * CMYK: C00 M53 Y64 K00
   * RGB: R255 G147 B93
   * PANTONE: 1485
   */
  --color-sedona: rgb(255, 147, 93);
  --color-sedona-hex: #ff935d;

  /* Neutral Colors */

  /* Stone
   * CMYK: C07 M18 Y26 K00
   * RGB: R239 G215 B193
   * PANTONE: 9180
   */
  --color-stone: rgb(239, 215, 193);
  --color-stone-hex: #efd7c1;

  /* Carbon
   * CMYK: C48 M38 Y38 K19
   * RGB: R131 G131 B131
   * PANTONE: 424
   */
  --color-carbon: rgb(131, 131, 131);
  --color-carbon-hex: #838383;

  /* Black
   * CMYK: C90 M78 Y58 K85
   * RGB: R13 G16 B22
   * PANTONE: Black 6
   */
  --color-black: rgb(13, 16, 22);
  --color-black-hex: #0d1016;

  /* White
   * CMYK: C00 M00 Y00 K00
   * RGB: R255 G255 B255
   * PANTONE: White
   */
  --color-white: rgb(255, 255, 255);
  --color-white-hex: #ffffff;

  /* Semantic Color Aliases */
  --color-primary: var(--color-crimson);
  --color-primary-foreground: var(--color-white);
  --color-accent: var(--color-crimson);
  --color-warm: var(--color-sedona);
  --color-neutral-light: var(--color-stone);
  --color-neutral-medium: var(--color-carbon);
  --color-neutral-dark: var(--color-black);

  /* Text Colors */
  --text-primary: var(--color-black);
  --text-secondary: var(--color-carbon);
  --text-inverse: var(--color-stone);

  /* Background Colors */
  --bg-primary: var(--color-stone);
  --bg-dark: var(--color-black);
  --bg-accent: var(--color-crimson);

  /* Typography */
  --font-family-primary: 'PolySans', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'PolySans Mono', 'Courier New', monospace;
  --font-weight-light: 300;
  --font-weight-normal: 400;
}

/* Base Typography Styles */
body {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
}

code, pre {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-light);
}

/* Typography Utility Classes */
.font-polysans {
  font-family: var(--font-family-primary);
}

.font-polysans-mono {
  font-family: var(--font-family-mono);
}

.font-weight-light {
  font-weight: var(--font-weight-light);
}

.font-weight-normal {
  font-weight: var(--font-weight-normal);
}

/* Utility Classes */
.color-burgundy { color: var(--color-burgundy); }
.color-crimson { color: var(--color-crimson); }
.color-sedona { color: var(--color-sedona); }
.color-stone { color: var(--color-stone); }
.color-carbon { color: var(--color-carbon); }
.color-black { color: var(--color-black); }
.color-white { color: var(--color-white); }

.bg-burgundy { background-color: var(--color-burgundy); }
.bg-crimson { background-color: var(--color-crimson); }
.bg-sedona { background-color: var(--color-sedona); }
.bg-stone { background-color: var(--color-stone); }
.bg-carbon { background-color: var(--color-carbon); }
.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }

/* Border Utility Classes */
.border-burgundy { border-color: var(--color-burgundy); }
.border-crimson { border-color: var(--color-crimson); }
.border-sedona { border-color: var(--color-sedona); }
.border-stone { border-color: var(--color-stone); }
.border-carbon { border-color: var(--color-carbon); }
.border-black { border-color: var(--color-black); }
.border-white { border-color: var(--color-white); }

/* Color Combinations
 * Each combination includes primary, secondary, and optional tertiary colors
 * Reading from top to bottom in each combination block
 */

/* Combination 01 */
.combination-01 {
  --primary: var(--color-burgundy);
  --secondary: var(--color-crimson);
}

/* Combination 02 */
.combination-02 {
  --primary: var(--color-sedona);
  --secondary: var(--color-burgundy);
}

/* Combination 03 */
.combination-03 {
  --primary: var(--color-crimson);
  --secondary: var(--color-white);
}

/* Combination 04 */
.combination-04 {
  --primary: var(--color-white);
  --secondary: var(--color-black);
}

/* Combination 05 */
.combination-05 {
  --primary: var(--color-black);
  --secondary: var(--color-crimson);
}

/* Combination 06 */
.combination-06 {
  --primary: var(--color-stone);
  --secondary: var(--color-black);
}

/* Combination 07 */
.combination-07 {
  --primary: var(--color-burgundy);
  --secondary: var(--color-crimson);
  --tertiary: var(--color-black);
}

/* Combination 08 */
.combination-08 {
  --primary: var(--color-stone);
  --secondary: var(--color-sedona);
  --tertiary: var(--color-burgundy);
}

/* Combination 09 */
.combination-09 {
  --primary: var(--color-crimson);
  --secondary: var(--color-burgundy);
  --tertiary: var(--color-stone);
}

/* Combination 10 */
.combination-10 {
  --primary: var(--color-burgundy);
  --secondary: var(--color-black);
  --tertiary: var(--color-sedona);
}

/* Core Background Patterns
 * Geometric patterns with circles and color combinations
 * Based on the 10 designs shown in the reference image
 */

/* Core 01 - Single crimson circle on burgundy background */
.core-01 {
  background-color: var(--color-burgundy);
  background-image: radial-gradient(circle, var(--color-crimson) 50%, transparent 50%);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Core 02 - Half circles: stone and burgundy on sedona background */
.core-02 {
  background-color: var(--color-sedona);
  background-image:
    radial-gradient(circle at 14% 50%, var(--color-stone) 35%, transparent 35%),
    radial-gradient(circle at 86% 50%, var(--color-burgundy) 35%, transparent 35%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Core 03 - Two circles: crimson top, burgundy bottom on stone background */
.core-03 {
  background-color: var(--color-stone);
  background-image:
    radial-gradient(circle at 50% 14%, var(--color-crimson) 35%, transparent 35%),
    radial-gradient(circle at 50% 86%, var(--color-burgundy) 35%, transparent 35%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Core 04 - Quarter circles in corners with centered circle: burgundy corners, stone center on crimson background */
.core-04 {
  background-color: var(--color-crimson);
  background-image:
    radial-gradient(circle at 25% 25%, var(--color-burgundy) 50%, transparent 50%),
    radial-gradient(circle at 74% 25%, var(--color-burgundy) 50%, transparent 50%),
    radial-gradient(circle at 25% 75%, var(--color-burgundy) 50%, transparent 50%),
    radial-gradient(circle at 75% 75%, var(--color-burgundy) 50%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--color-stone) 35%, transparent 25%);
  background-size: 50% 50%, 50% 50%, 50% 50%, 50% 50%, 100% 100%;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%, 50% 50%;
  background-repeat: no-repeat;
}

/* Core 05 - Three stacked circles: burgundy, crimson, burgundy on stone */
.core-05 {
  background-color: var(--color-stone);
  background-image:
    radial-gradient(circle at 50% -5%, var(--color-burgundy) 25%, transparent 25%),
    radial-gradient(circle at 50% 50%, var(--color-crimson) 35%, transparent 25%),
    radial-gradient(circle at 50% 105%, var(--color-burgundy) 25%, transparent 25%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Core 06 - Two circles: burgundy top left, stone bottom right on crimson background */
.core-06 {
  background-color: var(--color-crimson);
  background-image:
    radial-gradient(circle at 25% 25%, var(--color-burgundy) 32.5%, transparent 32.5%),
    radial-gradient(circle at 75% 75%, var(--color-stone) 32.5%, transparent 32.5%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Core 07 - Six circles grid: sedona and stone on burgundy */
.core-07 {
  background-color: var(--color-burgundy);
  background-image:
    radial-gradient(circle, var(--color-sedona) 45%, transparent 45%),
    radial-gradient(circle, var(--color-sedona) 45%, transparent 45%),
    radial-gradient(circle, var(--color-sedona) 45%, transparent 45%),
    radial-gradient(circle, var(--color-stone) 45%, transparent 45%),
    radial-gradient(circle, var(--color-sedona) 45%, transparent 45%),
    radial-gradient(circle, var(--color-sedona) 45%, transparent 45%);
  background-size: 33.33% 33.33%;
  background-position:
    50% 16.67%, 83.33% 16.67%,
    16.67% 50%, 50% 50%,
    16.67% 83.33%, 83.33% 83.33%;
  background-repeat: no-repeat;
}

/* Core 08 - Three large circles: burgundy, stone, burgundy on sedona */
.core-08 {
  background-color: var(--color-sedona);
  background-image:
    radial-gradient(circle at 5% 95%, var(--color-burgundy) 25%, transparent 25%),
    radial-gradient(circle at 50% 50%, var(--color-stone) 40%, transparent 40%),
    radial-gradient(circle at 95% 5%, var(--color-burgundy) 25%, transparent 25%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Core 09 - Nine circles grid: crimson, stone, crimson pattern on burgundy */
.core-09 {
  background-color: var(--color-burgundy);
  background-image:
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-stone) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%);
  background-size: 33.33% 33.33%;
  background-position:
    16.67% 16.67%, 50% 16.67%, 83.33% 16.67%,
    16.67% 50%, 50% 50%, 83.33% 50%,
    16.67% 83.33%, 50% 83.33%, 83.33% 83.33%;
  background-repeat: no-repeat;
}

/* Core 10 - Six circles with mixed colors on stone background */
.core-10 {
  background-color: var(--color-stone);
  background-image:
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-burgundy) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%);
  background-size: 33.33% 33.33%;
  background-position:
    16.67% 16.67%, 50% 16.67%, 83.33% 16.67%,
    50% 50%, 83.33% 50%,
    83.33% 83.33%;
  background-repeat: no-repeat;
}

/* Core 11 - Nine circles grid: center burgundy, rest crimson on light background */
.core-11 {
  background-color: var(--color-white);
  background-image:
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-burgundy) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%),
    radial-gradient(circle, var(--color-crimson) 45%, transparent 45%);
  background-size: 33.33% 33.33%;
  background-position:
    16.67% 16.67%, 50% 16.67%, 83.33% 16.67%,
    16.67% 50%, 50% 50%, 83.33% 50%,
    16.67% 83.33%, 50% 83.33%, 83.33% 83.33%;
  background-repeat: no-repeat;
}

/* Logo Marques
 * Three logo variants that can be applied as background images
 * Available in Black, Red, and White versions
 */

.logo-marque-black {
  background-image: url('/brand-assets/Logo/Black.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.logo-marque-red {
  background-image: url('/brand-assets/Logo/Red.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.logo-marque-white {
  background-image: url('/brand-assets/Logo/White.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Wordmarques
 * Text-based wordmarque displaying "Pangea"
 * Available in Black, Red, and White versions
 */

.wordmarque-black,
.wordmarque-red,
.wordmarque-white {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-size: 4rem;
  display: inline-block;
  padding: 0 1.8rem;
}

.wordmarque-black::after,
.wordmarque-red::after,
.wordmarque-white::after {
  content: 'Pangea';
}

/* Wordmarque in preview containers */
.background-preview.wordmarque-black,
.background-preview.wordmarque-red,
.background-preview.wordmarque-white {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.9rem;
}

.background-preview.wordmarque-black::after,
.background-preview.wordmarque-red::after,
.background-preview.wordmarque-white::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wordmarque-black::after {
  color: var(--color-black);
}

.wordmarque-red::after {
  color: var(--color-crimson);
}

.wordmarque-white::after {
  color: var(--color-white);
}

/* Lock Up
 * Combines logo and wordmarque text "Pangea"
 * Logo positioned on the left, wordmarque on the right, middle-aligned
 */

/* Lock Up Base Styles
 * IMPORTANT: Do not override gap, padding, or positioning within lockup
 * The internal spacing and alignment are critical to the brand identity
 */
.lockup-black,
.lockup-red,
.lockup-white {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 1rem;
}

.lockup-black::before,
.lockup-red::before,
.lockup-white::before {
  content: '';
  width: 80px;
  height: 80px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.lockup-black::after,
.lockup-red::after,
.lockup-white::after {
  content: 'Pangea';
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-size: 2.9rem;
  white-space: nowrap;
}

.lockup-black::before {
  background-image: url('/brand-assets/Logo/Black.svg');
}

.lockup-black::after {
  color: var(--color-black);
}

.lockup-red::before {
  background-image: url('/brand-assets/Logo/Red.svg');
}

.lockup-red::after {
  color: var(--color-crimson);
}

.lockup-white::before {
  background-image: url('/brand-assets/Logo/White.svg');
}

.lockup-white::after {
  color: var(--color-white);
}

/* Preview Section Styles */
.preview-section {
  height: 100vh;
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
}

.preview-left {
  width: 50%;
  background-color: var(--color-white);
  display: flex;
  align-items: flex-end;
  padding: 3rem;
}

.preview-text {
  font-size: 8rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-black);
  line-height: 1;
  margin: 0;
}

.preview-right {
  width: 50%;
  aspect-ratio: 1 / 1;
  align-self: center;
}

/* Lockup in preview containers
 * These styles create a wrapper that scales the lockup to fit in preview boxes
 * without breaking the internal lockup structure
 */
.background-preview.lockup-black,
.background-preview.lockup-red,
.background-preview.lockup-white {
  padding: 0;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}

/* Logo within preview - positioned to the left of center */
.background-preview.lockup-black::before,
.background-preview.lockup-red::before,
.background-preview.lockup-white::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.background-preview.lockup-black::before {
  background-image: url('/brand-assets/Logo/Black.svg');
}

.background-preview.lockup-red::before {
  background-image: url('/brand-assets/Logo/Red.svg');
}

.background-preview.lockup-white::before {
  background-image: url('/brand-assets/Logo/White.svg');
}

/* Text within preview - positioned to the right of logo */
.background-preview.lockup-black::after,
.background-preview.lockup-red::after,
.background-preview.lockup-white::after {
  content: 'Pangea';
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(20px, -50%);
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-size: 1.5rem;
  white-space: nowrap;
}

.background-preview.lockup-black::after {
  color: var(--color-black);
}

.background-preview.lockup-red::after {
  color: var(--color-crimson);
}

.background-preview.lockup-white::after {
  color: var(--color-white);
}