/* Kyasina Typography Styles */

/* Base Typography */
/* 
 * REMOVED: Tailwind base typography styles
 * REPLACED WITH: Bootstrap typography
 * 
 * Bootstrap already provides base typography styles.
 * You can customize the font family by setting the $font-family-sans-serif variable in Bootstrap.
 * 
 * For custom fonts, add them to your CSS and they will override Bootstrap's defaults:
 * body {
 *   font-family: 'Inter', system-ui, sans-serif;
 * }
 */

/* Headings */
/* 
 * REMOVED: Tailwind heading styles
 * REPLACED WITH: Bootstrap heading styles
 * 
 * Use the following Bootstrap classes instead:
 * - h1-h6 HTML elements or .h1-.h6 classes for heading styles
 * - .display-1 through .display-6 for larger, more prominent headings
 * - .fw-bold, .fw-semibold, etc. for font weights
 * - .text-primary, .text-secondary, etc. for text colors
 * 
 * Examples:
 * <h1 class="display-4 fw-bold text-primary">Heading 1</h1>
 * <h2 class="h2 fw-semibold text-secondary">Heading 2</h2>
 */

/* Responsive Headings */
/* 
 * REMOVED: Tailwind responsive heading styles
 * REPLACED WITH: Bootstrap responsive typography
 * 
 * Bootstrap's typography is already responsive by default.
 * For custom responsive behavior, use the responsive variants of Bootstrap classes:
 * 
 * Examples:
 * <h1 class="display-4 display-md-3 display-lg-2">Responsive Heading</h1>
 * <p class="fs-6 fs-md-5 fs-lg-4">Responsive text</p>
 */

/* Paragraphs */
/* 
 * REMOVED: Tailwind paragraph styles
 * REPLACED WITH: Bootstrap paragraph styles
 * 
 * Bootstrap already provides paragraph styles.
 * For custom styling, use Bootstrap's utility classes:
 * 
 * Examples:
 * <p class="lead">Lead paragraph</p>
 * <p class="text-muted">Muted paragraph</p>
 */

/* Text Sizes */
/* 
 * REMOVED: Tailwind text size classes
 * REPLACED WITH: Bootstrap font size utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .fs-1 through .fs-6 for predefined font sizes
 * - .small for smaller text (typically 80% of the parent)
 * - .lead for larger intro text
 * 
 * Bootstrap font size scale:
 * - .fs-1: ~2.5rem (40px)
 * - .fs-2: ~2rem (32px)
 * - .fs-3: ~1.75rem (28px)
 * - .fs-4: ~1.5rem (24px)
 * - .fs-5: ~1.25rem (20px)
 * - .fs-6: ~1rem (16px)
 * 
 * Examples:
 * <p class="fs-6">Default size text</p>
 * <p class="fs-5">Slightly larger text</p>
 * <p class="fs-4">Even larger text</p>
 */

/* Font Weights */
/* 
 * REMOVED: Tailwind font weight classes
 * REPLACED WITH: Bootstrap font weight utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .fw-bold: font-weight: 700
 * - .fw-bolder: font-weight: bolder (relative to parent)
 * - .fw-semibold: font-weight: 600
 * - .fw-medium: font-weight: 500
 * - .fw-normal: font-weight: 400
 * - .fw-light: font-weight: 300
 * - .fw-lighter: font-weight: lighter (relative to parent)
 * 
 * Examples:
 * <p class="fw-bold">Bold text</p>
 * <p class="fw-normal">Normal weight text</p>
 * <p class="fw-light">Light weight text</p>
 */

/* Font Families */
/* 
 * REMOVED: Tailwind font family classes
 * REPLACED WITH: Bootstrap font family utilities
 * 
 * Bootstrap uses system font stacks by default. For custom fonts, you can:
 * 
 * 1. Override Bootstrap variables in your Sass files (preferred method):
 *    $font-family-sans-serif: 'Inter', system-ui, sans-serif;
 *    $font-family-monospace: 'Roboto Mono', monospace;
 * 
 * 2. Or add custom CSS classes:
 *    .font-display {
 *      font-family: 'Gilroy Bold', system-ui, sans-serif;
 *    }
 *    .font-body {
 *      font-family: 'Inter', system-ui, sans-serif;
 *    }
 * 
 * Bootstrap also provides:
 * - .font-monospace for monospace text
 */

/* Text Colors */
/* 
 * REMOVED: Tailwind text color classes
 * REPLACED WITH: Bootstrap text color utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .text-primary: Primary brand color
 * - .text-secondary: Secondary brand color
 * - .text-success: Success color (green)
 * - .text-danger: Danger color (red)
 * - .text-warning: Warning color (yellow)
 * - .text-info: Info color (cyan)
 * - .text-light: Light color
 * - .text-dark: Dark color
 * - .text-muted: Muted color
 * - .text-white: White color
 * - .text-body: Default body color
 * 
 * For custom brand colors, you can either:
 * 1. Override Bootstrap's theme colors in your Sass files
 * 2. Create custom CSS classes for specific brand colors
 * 
 * Example:
 * <p class="text-primary">Primary color text</p>
 * <p class="text-secondary">Secondary color text</p>
 */

/* Text Alignment */
/* 
 * REMOVED: Tailwind text alignment classes
 * REPLACED WITH: Bootstrap text alignment utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .text-start: Text aligned to start (left in LTR)
 * - .text-center: Centered text
 * - .text-end: Text aligned to end (right in LTR)
 * 
 * Responsive variants are also available:
 * - .text-{breakpoint}-start
 * - .text-{breakpoint}-center
 * - .text-{breakpoint}-end
 * 
 * Examples:
 * <p class="text-center">Centered text</p>
 * <p class="text-start text-md-center text-lg-end">Responsive text alignment</p>
 */

/* Text Transforms */
/* 
 * REMOVED: Tailwind text transform classes
 * REPLACED WITH: Bootstrap text transform utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .text-uppercase: Transform text to uppercase
 * - .text-lowercase: Transform text to lowercase
 * - .text-capitalize: Capitalize first letter of each word
 * 
 * Examples:
 * <p class="text-uppercase">uppercase text</p>
 * <p class="text-lowercase">LOWERCASE TEXT</p>
 * <p class="text-capitalize">capitalized text</p>
 */

/* Text Decoration */
/* 
 * REMOVED: Tailwind text decoration classes
 * REPLACED WITH: Bootstrap text decoration utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .text-decoration-underline: Underlined text
 * - .text-decoration-line-through: Strikethrough text
 * - .text-decoration-none: No text decoration
 * 
 * Examples:
 * <p class="text-decoration-underline">Underlined text</p>
 * <p class="text-decoration-line-through">Strikethrough text</p>
 * <a class="text-decoration-none">Link with no underline</a>
 */

/* Letter Spacing */
/* 
 * REMOVED: Tailwind letter spacing classes
 * REPLACED WITH: Bootstrap doesn't have built-in letter spacing utilities
 * 
 * For letter spacing in Bootstrap, you'll need to create custom utility classes
 * or use inline styles. Here's how you might create your own utilities:
 * 
 * .letter-spacing-tight {
 *   letter-spacing: -0.025em;
 * }
 * 
 * .letter-spacing-normal {
 *   letter-spacing: 0;
 * }
 * 
 * .letter-spacing-wide {
 *   letter-spacing: 0.025em;
 * }
 * 
 * Or use inline styles when needed:
 * <p style="letter-spacing: 0.05em;">Text with wider letter spacing</p>
 */

/* Line Heights */
/* 
 * REMOVED: Tailwind line height classes
 * REPLACED WITH: Bootstrap line height utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .lh-1: line-height: 1
 * - .lh-sm: line-height: 1.25
 * - .lh-base: line-height: 1.5
 * - .lh-lg: line-height: 2
 * 
 * Examples:
 * <p class="lh-1">Tightly spaced text with line-height: 1</p>
 * <p class="lh-sm">Slightly tighter than normal line height</p>
 * <p class="lh-base">Default line height</p>
 * <p class="lh-lg">Loose line height</p>
 */

/* Lists */
/* 
 * REMOVED: Tailwind list styles
 * REPLACED WITH: Bootstrap list styles
 * 
 * Bootstrap already provides default styling for lists.
 * For custom list styling, use these Bootstrap classes:
 * 
 * - .list-unstyled: Removes default list styling
 * - .list-inline: Creates horizontal lists with .list-inline-item for each item
 * - .list-group: Creates styled list groups (with .list-group-item)
 * 
 * Examples:
 * <ul class="list-unstyled">
 *   <li>No bullets or indentation</li>
 * </ul>
 * 
 * <ul class="list-inline">
 *   <li class="list-inline-item">Inline item 1</li>
 *   <li class="list-inline-item">Inline item 2</li>
 * </ul>
 */

/* Blockquote */
/* 
 * REMOVED: Tailwind blockquote styles
 * REPLACED WITH: Bootstrap blockquote styles
 * 
 * Use the following Bootstrap classes:
 * - <blockquote class="blockquote"> for the blockquote itself
 * - <footer class="blockquote-footer"> for the citation
 * 
 * Example:
 * <figure>
 *   <blockquote class="blockquote">
 *     <p>A well-known quote, contained in a blockquote element.</p>
 *   </blockquote>
 *   <figcaption class="blockquote-footer">
 *     Someone famous in <cite title="Source Title">Source Title</cite>
 *   </figcaption>
 * </figure>
 * 
 * For custom styling like colored borders, you can add additional classes:
 * <blockquote class="blockquote border-start border-primary border-3 ps-3">
 */

/* Links */
/* 
 * REMOVED: Tailwind link styles
 * REPLACED WITH: Bootstrap link styles
 * 
 * Bootstrap already provides default styling for links.
 * For custom link styling, use these Bootstrap classes:
 * 
 * - .link-primary, .link-secondary, etc. for colored links
 * - .text-decoration-none to remove underlines
 * - .text-decoration-underline to add underlines
 * 
 * Examples:
 * <a href="#" class="link-primary">Primary link</a>
 * <a href="#" class="link-secondary">Secondary link</a>
 * <a href="#" class="link-success">Success link</a>
 * <a href="#" class="text-decoration-none">Link with no underline</a>
 */

/* Page Title and Subtitle */
/* 
 * REMOVED: Tailwind page title and subtitle styles
 * REPLACED WITH: Bootstrap heading and display utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .display-4 or .display-5 for page titles
 * - .lead or .fs-5 with .text-muted for subtitles
 * 
 * Examples:
 * <h1 class="display-4 fw-bold text-primary mb-4">Page Title</h1>
 * <p class="lead text-secondary mb-5">Page subtitle or description text</p>
 * 
 * Alternative with more spacing:
 * <div class="mb-5">
 *   <h1 class="display-5 fw-bold text-primary mb-2">Page Title</h1>
 *   <p class="fs-5 text-muted">Page subtitle with additional context</p>
 * </div>
 */

/* Section Title and Subtitle */
/* 
 * REMOVED: Tailwind section title and subtitle styles
 * REPLACED WITH: Bootstrap heading utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .h2 or .h3 with .fw-bold for section titles
 * - .fs-5 or .fs-6 with .text-muted for section subtitles
 * 
 * Examples:
 * <h2 class="h3 fw-bold text-primary mb-3">Section Title</h2>
 * <p class="fs-5 text-muted mb-4">Section subtitle or description text</p>
 * 
 * Alternative with card styling:
 * <div class="card mb-4">
 *   <div class="card-header bg-primary text-white">
 *     <h3 class="h4 mb-0">Section Title</h3>
 *   </div>
 *   <div class="card-body">
 *     Content goes here
 *   </div>
 * </div>
 */

/* Code */
/* 
 * REMOVED: Tailwind code styles
 * REPLACED WITH: Bootstrap code styles
 * 
 * Use the following Bootstrap classes instead:
 * - <code> element for inline code (styled by Bootstrap)
 * - <pre> element for code blocks (styled by Bootstrap)
 * - .font-monospace for monospace text
 * - .bg-light for light backgrounds
 * 
 * Examples:
 * <p>Inline <code>code</code> example</p>
 * 
 * <pre class="p-3 bg-light rounded">
 * <code>// Code block example
 * function example() {
 *   return 'Hello world';
 * }</code>
 * </pre>
 * 
 * For syntax highlighting, consider using a library like Prism.js or Highlight.js
 * alongside Bootstrap's styling.
 */

/* Truncate and Text Overflow */
/* 
 * REMOVED: Tailwind truncate and word break classes
 * REPLACED WITH: Bootstrap text utilities
 * 
 * Use the following Bootstrap classes instead:
 * - .text-truncate: Truncates text with an ellipsis
 * - .text-break: Breaks long words to prevent overflow
 * - .text-wrap: Allows text to wrap
 * - .text-nowrap: Prevents text from wrapping
 * 
 * Examples:
 * <div class="text-truncate" style="max-width: 150px;">This text will be truncated with an ellipsis</div>
 * <p class="text-break">ThisIsAVeryLongWordThatWillBreakToPreventOverflow</p>
 */

/* Placeholder and Selection */
/* 
 * REMOVED: Tailwind placeholder and selection styles
 * REPLACED WITH: Bootstrap form control styling
 * 
 * Bootstrap already provides styling for form placeholders.
 * For custom placeholder styling, you can use:
 * 
 * .form-control::placeholder {
 *   color: rgba(108, 117, 125, 0.6);
 * }
 * 
 * For custom text selection styling:
 * 
 * ::selection {
 *   background-color: rgba(13, 110, 253, 0.25);
 *   color: #0d6efd;
 * }
 */