/* ============================================
   HCJK Collection - Typography Styles
   Font Definitions and Text Styling
   ============================================ */

/* ==================== FONT IMPORTS ==================== */

/* Google Fonts - Cormorant Garamond (Serif) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* Google Fonts - Montserrat (Sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* Google Fonts - Allura (Script) */
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

/* ==================== BASE TYPOGRAPHY ==================== */

body {
  font-family: var(--font-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==================== HEADINGS ==================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-normal);
}

h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
}

h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

h5 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

h6 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
}

/* ==================== HEADING VARIANTS ==================== */

.heading-display {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wider);
  line-height: 1.1;
}

.heading-hero {
  font-size: clamp(3rem, 5vw, 6rem);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1;
  margin-bottom: var(--spacing-xl);
}

.heading-section {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-light);
  text-align: center;
  margin-bottom: var(--spacing-xl);
  position: relative;
}

.heading-section::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background-color: var(--color-accent);
  margin: var(--spacing-md) auto 0;
}

.heading-script {
  font-family: var(--font-script);
  font-weight: var(--font-weight-normal);
  letter-spacing: var(--letter-spacing-normal);
  color: var(--color-secondary);
}

/* ==================== PARAGRAPHS ==================== */

p {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-relaxed);
  color: var(--color-dark-gray);
}

.small-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.tiny-text {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

/* ==================== TEXT STYLES ==================== */

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* ==================== FONT WEIGHTS ==================== */

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

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

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

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

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

/* ==================== FONT FAMILIES ==================== */

.font-serif {
  font-family: var(--font-primary);
}

.font-sans {
  font-family: var(--font-secondary);
}

.font-script {
  font-family: var(--font-script);
}

/* ==================== TEXT COLORS ==================== */

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

.text-secondary {
  color: var(--color-secondary);
}

.text-accent {
  color: var(--color-accent);
}

.text-muted {
  color: var(--color-dark-gray);
}

.text-white {
  color: var(--color-white);
}

/* ==================== LINKS ==================== */

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  color: var(--color-accent);
}

a:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.link-underline:hover {
  text-decoration-thickness: 2px;
}

.link-no-underline {
  text-decoration: none;
}

/* ==================== LISTS ==================== */

ul, ol {
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-relaxed);
}

.list-unstyled {
  list-style: none;
  padding-left: 0;
}

.list-inline {
  list-style: none;
  padding-left: 0;
}

.list-inline li {
  display: inline-block;
  margin-right: var(--spacing-md);
  margin-bottom: 0;
}

.list-inline li:last-child {
  margin-right: 0;
}

/* Custom List Styling */
.list-elegant {
  list-style: none;
  padding-left: 0;
}

.list-elegant li {
  position: relative;
  padding-left: var(--spacing-lg);
}

.list-elegant li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: var(--font-weight-light);
}

/* ==================== BLOCKQUOTES ==================== */

blockquote {
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-light-gray);
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  color: var(--color-dark-gray);
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  display: block;
  margin-top: var(--spacing-md);
  font-size: var(--font-size-base);
  font-style: normal;
  font-weight: var(--font-weight-medium);
  color: var(--color-secondary);
}

blockquote cite::before {
  content: '— ';
}

/* Luxury Blockquote Variant */
.blockquote-luxury {
  border-left: none;
  background-color: transparent;
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-xl);
  position: relative;
}

.blockquote-luxury::before {
  content: '"';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 4rem;
  font-family: var(--font-primary);
  color: var(--color-accent);
  opacity: 0.3;
  line-height: 1;
}

/* ==================== CODE & PRE ==================== */

code {
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  background-color: var(--color-light-gray);
  border-radius: var(--border-radius-sm);
  color: var(--color-error);
}

pre {
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  padding: var(--spacing-md);
  background-color: var(--color-light-gray);
  border-radius: var(--border-radius-md);
  overflow-x: auto;
  margin: var(--spacing-md) 0;
}

pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* ==================== HORIZONTAL RULE ==================== */

hr {
  margin: var(--spacing-2xl) 0;
  border: 0;
  border-top: 1px solid var(--color-medium-gray);
}

.hr-accent {
  border-top-color: var(--color-accent);
  border-top-width: 2px;
}

.hr-decorative {
  position: relative;
  border: none;
  height: 1px;
  background-color: var(--color-medium-gray);
  margin: var(--spacing-3xl) auto;
  max-width: 200px;
}

.hr-decorative::before {
  content: '✦';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-background);
  padding: 0 var(--spacing-md);
  color: var(--color-accent);
  font-size: var(--font-size-lg);
}

/* ==================== SPECIAL TEXT ELEMENTS ==================== */

mark {
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 0.1em 0.3em;
  border-radius: var(--border-radius-sm);
}

strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--font-size-sm);
}

sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==================== SELECTION ==================== */

::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ==================== RESPONSIVE TYPOGRAPHY ==================== */

@media (max-width: 768px) {
  body {
    font-size: var(--font-size-sm);
  }
  
  h1 {
    margin-bottom: var(--spacing-md);
  }
  
  .heading-hero {
    margin-bottom: var(--spacing-lg);
  }
  
  .heading-section {
    margin-bottom: var(--spacing-lg);
  }
  
  blockquote {
    padding: var(--spacing-md) var(--spacing-lg);
    margin: var(--spacing-lg) 0;
  }
  
  .blockquote-luxury {
    padding: var(--spacing-xl) var(--spacing-md);
  }
}

/* ==================== PRINT STYLES ==================== */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
  
  p, blockquote {
    orphans: 3;
    widows: 3;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}