/* Typography Styles */

@use "sass:color";
@use "sass:map";
@use "variables" as *;
@use "mixins" as *;

/**
 * @name Headings
 * @group typography
 * @description
 * Retro heading styles for h1-h6 with 3D and border effects.
 * @example scss
 *   <h1>Heading 1</h1>
 */
// Base typography lives in _base.scss; this file styles the elements on top.

// Headings
h1, h2, h3, h4, h5, h6 {
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-bold);
  text-align: start;
  // Fixed rhythm rather than em-relative margins. With em, a larger heading
  // got a proportionally larger gap, so h1 sat on 37px of space and h6 on 15px
  // -- backwards for a hierarchy.
  margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
  border-radius: var(--retro-border-radius);
  box-shadow: none;
  letter-spacing: 0;
  background: none;
  color: var(--retro-text);
  text-shadow: none;
  padding: 0;
  line-height: var(--retro-line-height-tight);
}

h1 {
  background: var(--retro-bg);
  border-inline-start: 6px solid var(--retro-primary);
  padding-block: 0.18em 0.18em;
  padding-inline: 0.6em 0.7em;
  font-size: var(--retro-font-size-3xl);
  margin-top: var(--retro-spacing-xl);
}
// The panel and accent bar belong to the page title, and to one element on the
// page. Repeated at h2 they made every section start with a second title bar,
// and since h1 through h6 are all bold, a page of h2s read as a stack of
// slabs. An h2 is ruled off instead -- the same bevelled rule the framework
// draws under a card header -- and the sizes step properly from there.
h2 {
  padding-bottom: 0.15em;
  border-bottom: 2px solid var(--retro-border-dark);
  box-shadow: 0 1px 0 var(--retro-border-light);
  font-size: var(--retro-font-size-2xl);
  margin-top: var(--retro-spacing-xl);
}
h3 { font-size: var(--retro-font-size-xl); }
h4 { font-size: var(--retro-font-size-lg); }
h5 { font-size: var(--retro-font-size); }
// h5 and h6 used to be the same size *and* the same weight, so the last two
// levels of the outline were indistinguishable.
h6 {
  font-size: var(--retro-font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/**
 * @name Retro Heading Variant
 * @group typography
 * @description
 * Monospace, uppercase heading shell. Declared before the colour variants so
 * that combining the two works: this used to sit after them at equal
 * specificity, and its own background/colour/border silently overrode all
 * eight, making every `.retro-heading-variant.retro-heading-*` render
 * identically plain.
 * @example html
 *   <div class="retro-heading-variant retro-heading-success">Success</div>
 */
.retro-heading-variant {
  font-family: var(--retro-font-mono);
  font-size: var(--retro-font-size-2xl);
  font-weight: var(--retro-font-weight-bold);
  // Monospace and caps already carry the emphasis; the extra tracking on top
  // made it a fourth signal on the same text.
  text-transform: uppercase;
  padding: 0.5rem 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--retro-text);
  border: 2.5px double var(--retro-border-dark);
  box-shadow: inset 0 2px 8px var(--retro-border-light), 0 2px 0 rgba(var(--retro-shadow-rgb), 0.27);
  background: var(--retro-bg);
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/**
 * @name Display Heading Classes
 * @group typography
 * @description
 * Heading *appearance* without the heading *semantics*. Use these when
 * something should look like a heading but must not enter the document
 * outline — a component gallery demonstrating h1 styling, or a caption that
 * would otherwise create a second h1 on the page.
 * @example html
 *   <p class="retro-h1">Looks like an h1, is still a paragraph</p>
 */
.retro-h1, .retro-h2, .retro-h3, .retro-h4, .retro-h5, .retro-h6 {
  display: block;
  font-family: var(--retro-font-heading);
  font-weight: var(--retro-font-weight-bold);
  line-height: var(--retro-line-height-tight);
  color: var(--retro-text);
  margin: var(--retro-spacing-lg) 0 var(--retro-spacing-sm);
}

.retro-h1 {
  background: var(--retro-bg);
  border-inline-start: 6px solid var(--retro-primary);
  padding-block: 0.18em 0.18em;
  padding-inline: 0.6em 0.7em;
  font-size: var(--retro-font-size-3xl);
  margin-top: var(--retro-spacing-xl);
}

.retro-h2 {
  padding-bottom: 0.15em;
  border-bottom: 2px solid var(--retro-border-dark);
  box-shadow: 0 1px 0 var(--retro-border-light);
  font-size: var(--retro-font-size-2xl);
  margin-top: var(--retro-spacing-xl);
}

.retro-h3 { font-size: var(--retro-font-size-xl); }
.retro-h4 { font-size: var(--retro-font-size-lg); }
.retro-h5 { font-size: var(--retro-font-size); }
.retro-h6 {
  font-size: var(--retro-font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

// Heading Variants
.retro-heading {
  &-primary,
  &-success,
  &-warning,
  &-danger,
  &-info,
  &-teal,
  &-pink,
  &-lime {
    padding: var(--retro-spacing-sm) var(--retro-spacing-md);
    margin-bottom: var(--retro-spacing-md);
    // These often sit in a flex row beside an avatar. Flex items default to
    // min-width: auto and refuse to shrink below their text, which pushed
    // long headings off narrow viewports.
    min-width: 0;
    border: 2px solid;
    position: relative;
    font-family: var(--retro-font-heading);
    font-weight: var(--retro-font-weight-bold);
    letter-spacing: 0.5px;
    box-shadow:
      inset -1px -1px 0 var(--retro-shadow-light),
      inset 1px 1px 0 var(--retro-border-dark),
      // Was --retro-black-rgb, which inverts: this drop shadow rendered as a
      // white glow in dark mode, while the text-shadow directly below it
      // already used the fixed token and stayed dark.
      2px 2px 0 rgba(var(--retro-shadow-rgb), 0.2);
    text-shadow: 1px 1px 0 rgba(var(--retro-shadow-rgb), 0.3);
    // A gloss is white in both themes; --retro-white-rgb would make it a dark
    // smudge on the dark chassis.
    background: linear-gradient(to bottom, rgba(var(--retro-sheen-rgb), 0.1) 0%, rgba(var(--retro-sheen-rgb), 0) 100%);
    transform: translateZ(0);
    transition: transform 0.1s ease;

    &:hover {
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(1px);
      box-shadow:
        inset 1px 1px 0 var(--retro-shadow-light),
        inset -1px -1px 0 var(--retro-border-dark);
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 2px,
        rgba(var(--retro-sheen-rgb), 0.1) 2px,
        rgba(var(--retro-sheen-rgb), 0.1) 4px
      );
      pointer-events: none;
    }
  }

  &-primary {
    background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-active) 100%);
    color: var(--retro-primary-fg);
    border-color: var(--retro-primary-active);
  }

  &-success {
    background: linear-gradient(to bottom, var(--retro-success) 0%, var(--retro-success-active) 100%);
    color: var(--retro-success-fg);
    border-color: var(--retro-success-active);
  }

  &-warning {
    background: linear-gradient(to bottom, var(--retro-warning) 0%, var(--retro-warning-active) 100%);
    color: var(--retro-warning-fg);
    border-color: var(--retro-warning-active);
  }

  &-danger {
    background: linear-gradient(to bottom, var(--retro-danger) 0%, var(--retro-danger-active) 100%);
    color: var(--retro-danger-fg);
    border-color: var(--retro-danger-active);
  }

  &-info {
    background: linear-gradient(to bottom, var(--retro-info) 0%, var(--retro-info-active) 100%);
    color: var(--retro-info-fg);
    border-color: var(--retro-info-active);
  }

  &-teal {
    background: linear-gradient(to bottom, var(--retro-teal) 0%, var(--retro-teal-active) 100%);
    color: var(--retro-teal-fg);
    border-color: var(--retro-teal-active);
  }

  &-pink {
    background: linear-gradient(to bottom, var(--retro-pink) 0%, var(--retro-pink-active) 100%);
    color: var(--retro-pink-fg);
    border-color: var(--retro-pink-active);
  }

  &-lime {
    background: linear-gradient(to bottom, var(--retro-lime) 0%, var(--retro-lime-active) 100%);
    color: var(--retro-lime-fg);
    border-color: var(--retro-lime-active);
  }
}

/**
 * @name Text Utilities
 * @group typography
 * @description
 * Utility classes for text color, weight, style, shadow, and more.
 * @example scss
 *   <span class="retro-text-primary retro-text-bold">Primary Bold</span>
 */
// Text Styles
.retro-text {
  &-primary { color: var(--retro-color-primary); }
  &-success { color: var(--retro-color-success); }
  &-danger { color: var(--retro-color-danger); }
  &-warning { color: var(--retro-color-warning); }
  &-info { color: var(--retro-color-info); }
  &-teal { color: var(--retro-color-teal); }
  &-pink { color: var(--retro-color-pink); }
  &-lime { color: var(--retro-color-lime); }

  &-bold { font-weight: var(--retro-font-weight-bold); }
  &-italic { font-style: italic; }
  &-underline { text-decoration: underline; }

  &-shadow {
    text-shadow: 1px 1px 1px var(--retro-border-dark);
  }

  &-outline {
    text-shadow: 
      -1px -1px 0 var(--retro-border-dark),
      1px -1px 0 var(--retro-border-dark),
      -1px 1px 0 var(--retro-border-dark),
      1px 1px 0 var(--retro-border-dark);
  }
}

.retro-text-uppercase { text-transform: uppercase; }
.retro-text-lowercase { text-transform: lowercase; }
.retro-text-capitalize { text-transform: capitalize; }
.retro-text-monospace { font-family: var(--retro-font-mono); }
.retro-text-xs { font-size: var(--retro-font-size-xs); }
.retro-text-sm { font-size: var(--retro-font-size-sm); }
.retro-text-lg { font-size: var(--retro-font-size-lg); }
.retro-text-xl { font-size: var(--retro-font-size-xl); }
.retro-text-strike { text-decoration: line-through; }
.retro-text-shadow-strong { text-shadow: 2px 2px 2px var(--retro-border-medium); }
.retro-text-shadow-soft { text-shadow: 1px 1px 4px var(--retro-gray); }
.retro-text-glow { text-shadow: 0 0 6px var(--retro-cyan), 0 0 12px var(--retro-cyan); }

/**
 * @name Fancy Text Styles
 * @group typography
 * @description
 * Special effect text styles: rainbow, gradient, glitch, metallic, fire, etc.
 * @example scss
 *   <span class="retro-text-rainbow">Rainbow</span>
 */
// Fancy Text Styles.
// The gradient fills below (rainbow / gradient / metallic / fire) and the
// glitch fringes are deliberate fixed-palette effects -- their literal hexes
// ARE the effect and are intentionally not tokenized. Their halos and strokes
// are themed so they still read on a dark page.
.retro-text-rainbow {
  background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33ff00, #00ffee, #0066ff, #cc00ff, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  animation: rainbow-hue 3s linear infinite;
  font-weight: bold;
  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
}
@keyframes rainbow-hue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.retro-text-hue-rotate {
  animation: hue-rotate-text 2s linear infinite;
  display: inline-block;
}
@keyframes hue-rotate-text {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.retro-text-gradient {
  background: linear-gradient(90deg, #4a90e2, #00e5ee, #ff69b4, #ffd700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 0 1px 1px var(--retro-bg), 0 2px 2px rgba(var(--retro-shadow-rgb), 0.13);
}

.retro-text-outline-strong {
  color: var(--retro-bg);
  font-weight: var(--retro-font-weight-bold);
  -webkit-text-stroke: 2px var(--retro-text);
  text-shadow: none;
}

.retro-text-emboss {
  color: var(--retro-text);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
}

.retro-text-deboss {
  color: var(--retro-text-muted);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-border-light), -1px -1px 0 var(--retro-border-medium);
}

.retro-text-shadow-multicolor {
  color: var(--retro-text);
  font-weight: var(--retro-font-weight-bold);
  text-shadow: 1px 1px 0 var(--retro-primary);
}

.retro-text-glitch {
  position: relative;
  color: var(--retro-text);
  text-shadow: 2px 0 #f0f, -2px 0 #0ff;
  animation: glitch 1s infinite linear alternate-reverse;
}
@keyframes glitch {
  0% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
  20% { text-shadow: 2px 2px #0ff, -2px -2px #f0f; }
  40% { text-shadow: -2px 0 #f0f, 2px 0 #0ff; }
  60% { text-shadow: 2px -2px #0ff, -2px 2px #f0f; }
  80% { text-shadow: 0 2px #f0f, 0 -2px #0ff; }
  100% { text-shadow: 2px 0 #f0f, -2px 0 #0ff; }
}

.retro-text-metallic {
  background: linear-gradient(90deg, #e6e6e6 0%, #b0b0b0 40%, #fff 60%, #b0b0b0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px var(--retro-border-dark);
  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 4px rgba(var(--retro-shadow-rgb), 0.53);
}

.retro-text-fire {
  background: linear-gradient(90deg, #ff6600 0%, #ffcc00 40%, #fff 60%, #ff3300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-fill-color: transparent;
  font-weight: bold;
  -webkit-text-stroke: 1px #800;
  text-shadow: 0 1px 2px var(--retro-bg), 0 2px 8px #ff6600, 0 4px 16px #ff3300;
}

/**
 * @name Retro Blockquote
 * @group typography
 * @description
 * Styled blockquote with Win9x look
 */
.retro-blockquote {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-right: 2px solid var(--retro-border-light);
  border-bottom: 2px solid var(--retro-border-light);
  border-left: 2px solid var(--retro-border-medium);
  border-top: 2px solid var(--retro-border-medium);
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
  font-style: italic;
  box-shadow: 
    inset -1px -1px 0 var(--retro-shadow-light),
    inset 1px 1px 0 var(--retro-border-dark);
  font-family: var(--retro-font);
  font-size: var(--retro-font-size);
  line-height: var(--retro-line-height);
  max-width: var(--retro-measure);
  color: var(--retro-text);
  
  &::before {
    content: '"';
    font-size: 2.5em;
    color: var(--retro-primary-text);
    position: absolute;
    inset-inline-start: 0.3rem;
    top: -0.2rem;
    font-family: var(--retro-font);
    opacity: 0.7;
  }

  &::after {
    content: '"';
    font-size: 2.5em;
    color: var(--retro-primary-text);
    position: absolute;
    inset-inline-end: 0.3rem;
    bottom: -0.5rem;
    font-family: var(--retro-font);
    opacity: 0.7;
  }
}

/**
 * @name Retro Code Block
 * @group typography
 * @description
 * Styled code block with Win9x look
 */
.retro-code {
  background: var(--retro-bg);
  border: 2px solid var(--retro-border-dark);
  border-top-color: var(--retro-border-light);
  border-left-color: var(--retro-border-light);
  padding: 0;
  margin: 1.5rem 0;
  font-family: var(--retro-font-mono);
  white-space: pre-wrap;
  overflow-x: auto;
  position: relative;
  box-shadow:
    inset -1px -1px 0 var(--retro-shadow-light),
    inset 1px 1px 0 var(--retro-border-dark);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: linear-gradient(to bottom, var(--retro-primary) 0%, var(--retro-primary-hover) 100%);
    border-bottom: 1px solid var(--retro-border-dark);
  }
  
  &::after {
    content: 'Code';
    position: absolute;
    top: 2px;
    inset-inline-start: 8px;
    color: var(--retro-primary-fg);
    font-family: var(--retro-font);
    font-size: var(--retro-font-size-sm);
    font-weight: var(--retro-font-weight-bold);
  }
  
  .retro-code-copy {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    background: var(--retro-bg);
    border: 1px solid var(--retro-border-dark);
    border-right: 1px solid var(--retro-border-light);
    border-bottom: 1px solid var(--retro-border-light);
    border-left: 1px solid var(--retro-border-medium);
    border-top: 1px solid var(--retro-border-medium);
    padding: 2px 8px;
    font-family: var(--retro-font);
    font-size: var(--retro-font-size-xs);
    cursor: pointer;
    color: var(--retro-text);
    box-shadow:
      inset -1px -1px 0 var(--retro-shadow-light),
      inset 1px 1px 0 var(--retro-border-dark);
    
    &:hover {
      background: var(--retro-light);
    }
    
    &:active {
      box-shadow: 
        inset 1px 1px 0 var(--retro-shadow-light),
        inset -1px -1px 0 var(--retro-border-dark);
    }

    // Result states. code-copy.js used to assign '#c0c0c0' and '#ffcccc'
    // inline, which ignored [data-theme] and left pale text on pale fill on
    // the dark chassis. These ride the palette instead.
    &.retro-code-copy-ok {
      background: var(--retro-success);
      color: var(--retro-success-fg);
      border-color: var(--retro-success-active);
    }

    &.retro-code-copy-fail {
      background: var(--retro-danger);
      color: var(--retro-danger-fg);
      border-color: var(--retro-danger-active);
    }
  }
  
  code {
    display: block;
    padding: 1.2rem;
    padding-top: calc(1.2rem + 24px);
    color: var(--retro-text);
    font-size: var(--retro-font-size-sm);
    line-height: var(--retro-line-height);

    // Syntax highlighting. Previously fixed light-mode hexes: on the dark code
    // surface .keyword (#000080) measured 1.02:1 -- invisible. Now per-theme.
    .keyword { color: var(--retro-syntax-keyword); font-weight: var(--retro-font-weight-bold); }
    .string { color: var(--retro-syntax-string); }
    .comment { color: var(--retro-syntax-comment); font-style: italic; }
    .function { color: var(--retro-syntax-function); }
    .number { color: var(--retro-syntax-number); }
    .operator { color: var(--retro-syntax-operator); }
    .variable { color: var(--retro-syntax-variable); }
    .class { color: var(--retro-syntax-class); }
    .property { color: var(--retro-syntax-property); }
    .tag { color: var(--retro-syntax-tag); }
    .attribute { color: var(--retro-syntax-attribute); }
  }
}

// NOTE: a second .retro-heading-* block used to live here with a flat pastel
// palette. Same specificity, declared later, so it silently shadowed the
// beveled variants above and froze them at light-mode values. Removed.

/**
 * @name Retro Prose
 * @group typography
 * @description
 * Opt-in long-form container. Caps the measure and opens up leading so an
 * article does not run 200-character lines edge to edge. Opt-in rather than
 * applied to `p` globally, which would break dashboard and form layouts.
 * @example scss
 *   <article class="retro-prose">...</article>
 */
.retro-prose {
  line-height: var(--retro-line-height);

  // The measure caps running text only. Putting it on the container squeezes
  // code blocks and tables into needless horizontal scrollbars, so those are
  // explicitly allowed the full width.
  > p,
  > ul,
  > ol,
  > dl,
  > blockquote,
  > h1, > h2, > h3, > h4, > h5, > h6 {
    max-width: var(--retro-measure);
  }

  > pre,
  > table,
  > figure,
  > .retro-code,
  > .retro-table {
    max-width: 100%;
  }

  p, ul, ol, blockquote, pre { margin-bottom: var(--retro-spacing-md); }
  > :first-child { margin-top: 0; }
  > :last-child { margin-bottom: 0; }
}