/**
 * Typography primitives
 * Headings, body text, links, captions
 */
@layer ks-primitives {
  .ks-heading-display,
  .ks-heading-xl,
  .ks-heading-lg,
  .ks-heading-md,
  .ks-heading-sm,
  .ks-eyebrow,
  .ks-caption {
    margin: 0;
    color: var(--ks-color-text-strong);
  }

  .ks-heading-display {
    font-family: var(--ks-font-heading);
    font-size: clamp(2.75rem, 6vw, 5rem);
    line-height: 1.02;
  }

  .ks-heading-xl {
    font-family: var(--ks-font-heading);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    line-height: 1.08;
  }

  .ks-heading-lg {
    font-family: var(--ks-font-heading);
    font-size: clamp(1.875rem, 4vw, 3rem);
    line-height: 1.12;
  }

  .ks-heading-md {
    font-family: var(--ks-font-heading);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.18;
  }

  .ks-heading-sm {
    font-family: var(--ks-font-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.22;
  }

  .ks-body-lg {
    font-size: 1.125rem;
    line-height: 1.65;
  }

  .ks-body-sm {
    font-size: var(--ks-font-size-sm);
    line-height: calc(1.25 / 0.875);
  }

  .ks-eyebrow {
    font-size: 0.875rem;
    font-weight: var(--ks-font-weight-strong);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ks-watermark-heading {
    font-family: var(--ks-font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: var(--ks-font-weight-strong);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ks-color-gray-200);
    line-height: 1;
    user-select: none;
    pointer-events: none;
  }

  .dark .ks-watermark-heading {
    color: var(--ks-color-gray-800);
  }

  .ks-caption {
    font-size: 0.875rem;
    color: var(--ks-color-text-muted);
  }

  .ks-link {
    color: var(--ks-color-primary-700);
    text-decoration-thickness: 0.08em;
  }

  .ks-link:hover,
  .ks-link:focus-visible {
    color: var(--ks-color-primary-800);
    text-decoration-line: underline;
  }

  :where(.dark) .ks-link {
    color: var(--ks-color-primary-400);
  }

  :where(.dark) .ks-link:hover,
  :where(.dark) .ks-link:focus-visible {
    color: var(--ks-color-primary-300);
  }

  .ks-link-danger {
    color: var(--ks-color-danger-600);
    text-decoration-thickness: 0.08em;
  }

  .ks-link-danger:hover,
  .ks-link-danger:focus-visible {
    color: var(--ks-color-danger-700);
  }

  :where(.dark) .ks-link-danger {
    color: var(--ks-color-danger-400);
  }

  :where(.dark) .ks-link-danger:hover,
  :where(.dark) .ks-link-danger:focus-visible {
    color: var(--ks-color-danger-300);
  }

  .ks-action-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ks-space-2);
    color: var(--ks-color-primary-600);
    font-weight: var(--ks-font-weight-strong);
    text-decoration: none;
    transition:
      color var(--ks-duration-base) var(--ks-ease-standard),
      transform var(--ks-duration-fast) var(--ks-ease-emphasis);
  }

  .ks-action-link:hover,
  .ks-action-link:focus-visible {
    color: var(--ks-color-primary-700);
  }

  .ks-action-link:hover :where(svg),
  .ks-action-link:focus-visible :where(svg) {
    transform: translateX(var(--ks-space-1));
  }

  .ks-action-link :where(svg) {
    transition: transform var(--ks-duration-fast) var(--ks-ease-emphasis);
  }

  /* Prose - rich text typography for CKEditor content */
  .prose {
    color: var(--ks-color-gray-700);
    max-width: 65ch;
  }

  .prose :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
  }

  .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-600);
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
  }

  .prose :where(a):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-primary-600);
    text-decoration: underline;
    font-weight: 500;
  }

  .prose :where(a):not(:where([class~="not-prose"] *)):hover {
    color: var(--ks-color-primary-700);
  }

  .prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 600;
  }

  .prose :where(em):not(:where([class~="not-prose"] *)) {
    font-style: italic;
  }

  .prose :where(ul):not(:where([class~="not-prose"] *)) {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }

  .prose :where(ol):not(:where([class~="not-prose"] *)) {
    list-style-type: decimal;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
  }

  .prose :where(li):not(:where([class~="not-prose"] *)) {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  .prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
    font-weight: 400;
    color: var(--ks-color-gray-500);
  }

  .prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
    color: var(--ks-color-gray-400);
  }

  .prose :where(h1):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
  }

  .prose :where(h2):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
  }

  .prose :where(h3):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
  }

  .prose :where(h4):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
  }

  .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    font-weight: 500;
    font-style: italic;
    color: var(--ks-color-gray-900);
    border-left-width: 0.25rem;
    border-left-color: var(--ks-color-gray-300);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
  }

  .prose :where(code):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 600;
    font-size: 0.875em;
    background-color: var(--ks-color-gray-100);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }

  .prose :where(pre):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-200);
    background-color: var(--ks-color-gray-800);
    overflow-x: auto;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding: 0.8571429em 1.1428571em;
  }

  .prose :where(pre code):not(:where([class~="not-prose"] *)) {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
  }

  .prose :where(table):not(:where([class~="not-prose"] *)) {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
  }

  .prose :where(thead):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--ks-color-gray-300);
  }

  .prose :where(thead th):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-900);
    font-weight: 600;
    vertical-align: bottom;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
  }

  .prose :where(tbody td):not(:where([class~="not-prose"] *)) {
    vertical-align: baseline;
    padding: 0.5714286em;
  }

  .prose :where(hr):not(:where([class~="not-prose"] *)) {
    border-color: var(--ks-color-gray-200);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
  }

  .prose :where(img):not(:where([class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
  }

  .prose.max-w-none {
    max-width: none;
  }

  /* Prose dark mode */
  :where(.dark) .prose {
    color: var(--ks-color-gray-300);
  }

  :where(.dark) .prose :where(a):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-primary-400);
  }

  :where(.dark) .prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-white);
  }

  :where(.dark) .prose :where(h1, h2, h3, h4, h5, h6):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-white);
  }

  :where(.dark) .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-gray-200);
    border-left-color: var(--ks-color-gray-600);
  }

  :where(.dark) .prose :where(code):not(:where([class~="not-prose"] *)) {
    color: var(--ks-color-white);
    background-color: var(--ks-color-gray-800);
  }

  /* ============================================
     TEXT COLORS (additional)
     ============================================ */
  .ks-text-white-muted { color: rgba(255, 255, 255, 0.7); }
  .ks-text-error { color: var(--ks-color-danger-500); }
  .ks-text-error-muted { color: var(--ks-color-danger-400); }
  .ks-text-primary { color: var(--ks-color-primary-600); }
  :where(.dark) .ks-text-primary { color: var(--ks-color-primary-400); }
  .ks-text-secondary { color: var(--ks-color-secondary-600); }
  :where(.dark) .ks-text-secondary { color: var(--ks-color-secondary-400); }
  .ks-text-tertiary { color: var(--ks-color-tertiary-600); }
  :where(.dark) .ks-text-tertiary { color: var(--ks-color-tertiary-400); }
  .ks-text-success { color: var(--ks-color-success-500); }
  :where(.dark) .ks-text-success { color: var(--ks-color-success-400); }
  .ks-text-info { color: var(--ks-color-info-500); }
  :where(.dark) .ks-text-info { color: var(--ks-color-info-400); }
  .ks-text-danger { color: var(--ks-color-danger-500); }
  :where(.dark) .ks-text-danger { color: var(--ks-color-danger-400); }
  .ks-text-accent { color: var(--ks-color-accent-500); }
  :where(.dark) .ks-text-accent { color: var(--ks-color-accent-400); }
  .ks-text-warning-muted { color: var(--ks-color-warning-400); }
  .ks-text-primary-light { color: var(--ks-color-primary-400); }
  .ks-text-gradient {
    background: linear-gradient(135deg, var(--ks-color-primary-500), var(--ks-color-secondary-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ============================================
     FONT FAMILY & WEIGHT
     ============================================ */
  .ks-font-serif { font-family: var(--ks-font-heading); }
  .ks-font-display { font-family: var(--ks-font-heading); font-weight: 700; }

  /* ============================================
     BODY TEXT SIZES (additional)
     ============================================ */
  .ks-body-base { font-size: 1rem; line-height: 1.5; }
  .ks-body-xl { font-size: 1.25rem; line-height: 1.6; }

  /* ============================================
     HEADINGS (additional)
     ============================================ */
  .ks-heading-2xl { font-size: 1.875rem; line-height: 1.2; font-family: var(--ks-font-heading); }
  .ks-heading-3xl { font-size: 2.25rem; line-height: 1.2; font-family: var(--ks-font-heading); }
  .ks-heading-hero { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; font-family: var(--ks-font-heading); }
  .ks-heading-page-title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; font-family: var(--ks-font-heading); }

  /* ============================================
     LINKS (additional)
     ============================================ */
  .ks-link-muted { color: var(--ks-color-text-muted); text-decoration: underline; }
  .ks-link-muted:hover { color: var(--ks-color-text-default); }
  .ks-link-inherit {
    color: inherit;
    text-decoration: none;
    transition: color 200ms var(--ks-ease-standard);
  }
  .ks-link-inherit:hover { color: var(--ks-color-primary-600); }
  :where(.dark) .ks-link-inherit:hover { color: var(--ks-color-primary-400); }
  .ks-link-quiet { text-decoration: none; }
  .ks-link-quiet:hover { text-decoration: underline; }

  /* ============================================
     PROSE (additional)
     ============================================ */
  .ks-prose-lead {
    font-size: var(--ks-font-size-lg);
    line-height: 1.8;
  }
  .ks-prose-lead p:first-of-type::first-letter {
    float: left;
    font-size: 3.5em;
    line-height: 0.8;
    font-weight: var(--ks-font-weight-strong);
    color: var(--ks-color-primary-600);
    margin-right: var(--ks-space-2);
    padding-right: var(--ks-space-1);
  }
  :where(.dark) .ks-prose-lead p:first-of-type::first-letter {
    color: var(--ks-color-primary-400);
  }

  /* ============================================
     LINE CLAMP
     ============================================ */
  .ks-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .ks-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ks-line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

  /* ============================================
     BLOCKQUOTE
     ============================================ */
  .ks-blockquote {
    position: relative;
    padding: var(--ks-space-6);
    padding-inline-start: calc(var(--ks-space-4) + 3rem + var(--ks-space-4));
    border-radius: var(--ks-radius-lg);
    background: linear-gradient(135deg, var(--ks-color-primary-50), var(--ks-color-secondary-50));
    border-inline-start: 4px solid var(--ks-color-primary-600);
  }

  :where(.dark) .ks-blockquote {
    background: linear-gradient(135deg, var(--ks-color-primary-950), var(--ks-color-secondary-950));
  }

  .ks-blockquote-text {
    font-size: var(--ks-font-size-lg);
    font-style: italic;
    line-height: 1.7;
  }

  .ks-blockquote-footer {
    margin-block-start: var(--ks-space-4);
    padding-block-start: var(--ks-space-4);
    border-block-start: 1px solid var(--ks-color-border-subtle);
  }

  .ks-blockquote-footer cite {
    font-weight: var(--ks-font-weight-strong);
    font-style: normal;
  }

  .ks-blockquote-mark {
    position: absolute;
    top: -1.5rem;
    left: -1.5rem;
    font-size: 6rem;
    font-family: Georgia, serif;
    line-height: 1;
    user-select: none;
    color: var(--ks-color-primary-200);
  }

  :where(.dark) .ks-blockquote-mark {
    color: var(--ks-color-primary-900);
  }

  .ks-quote-text { font-size: 1.125rem; font-style: italic; line-height: 1.6; }

  /* ============================================
     HELPER TEXT
     ============================================ */
  .ks-helper-text { font-size: 0.875rem; color: var(--ks-color-text-muted); }

  /* ============================================
     TEXT UTILITIES
     ============================================ */
  .ks-text-muted { color: var(--ks-color-text-muted); }
  .ks-text-inverse { color: var(--ks-color-text-inverse); }
  .ks-text-inverse-muted { color: rgb(255 255 255 / 0.85); }
  .ks-text-bold { font-weight: var(--ks-font-weight-strong); }
  .ks-text-strong { font-weight: var(--ks-font-weight-strong); }
}