/* ═══════════════════════════════════════════════════════════════════════════
   src/base.css  —  Base Styles & Element Defaults
   Berlapis di atas Tailwind preflight. Mendefinisikan gaya default
   untuk setiap elemen HTML tanpa class tambahan.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer base {

  /* ── Root & Scroll ────────────────────────────────────────────────────── */

  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: #0d0d0d;
    background-color: #ffffff;
  }

  /* ── Heading H1 – H6 ───────────────────────────────────────────────────── */

  h1 {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-display);
    font-style: normal;
  }

  h2 {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
    font-weight: var(--weight-display);
  }

  h3 {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
    font-weight: var(--weight-display);
  }

  h4 {
    font-family: var(--font-sans);
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    font-weight: var(--weight-heading-sans);
  }

  h5 {
    font-family: var(--font-sans);
    font-size: var(--text-h5);
    line-height: var(--leading-h5);
    font-weight: var(--weight-heading-sans);
  }

  h6 {
    font-family: var(--font-sans);
    font-size: var(--text-h6);
    line-height: var(--leading-h6);
    font-weight: var(--weight-heading-sans);
  }

  /* ── Body Text ──────────────────────────────────────────────────────────── */

  p {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }

  p + p {
    margin-top: 1em;
  }

  /* ── Blockquote ─────────────────────────────────────────────────────────── */

  blockquote {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--text-blockquote);
    line-height: 1.6;
    letter-spacing: 0.01em;
    border-left: 4px solid var(--color-primary);
    padding-left: 1.5rem;
    margin-block: 2rem;
    color: #3f3f46;
  }

  blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-family: var(--font-sans);
    font-style: normal;
    font-size: var(--text-body-sm);
    font-weight: var(--weight-body-medium);
    color: #71717a;
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
  }

  /* ── Lists ───────────────────────────────────────────────────────────────── */

  ul,
  ol {
    padding-left: 1.5rem;
    line-height: var(--leading-body);
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li + li {
    margin-top: 0.35em;
  }

  /* ── Inline Text Elements ───────────────────────────────────────────────── */

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

  em, i {
    font-style: italic;
  }

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

  mark {
    background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: inherit;
    border-radius: 2px;
    padding: 0 0.15em;
  }

  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* ── Code / Pre ─────────────────────────────────────────────────────────── */

  code {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    letter-spacing: var(--tracking-code);
    background-color: #f4f4f5;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-xs);
    padding: 0.15em 0.45em;
  }

  kbd {
    font-family: var(--font-mono);
    font-size: var(--text-code-sm);
    font-weight: var(--weight-mono-bold);
    background-color: #ffffff;
    border: 1px solid #e4e4e7;
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    padding: 0.1em 0.5em;
    color: #71717a;
  }

  pre {
    font-family: var(--font-mono);
    font-size: var(--text-code);
    line-height: var(--leading-code);
    letter-spacing: var(--tracking-code);
    background-color: #0d0d0d;
    color: #f4f4f5;
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    tab-size: 2;
  }

  pre code {
    background: transparent;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
    border-radius: 0;
  }

  /* ── Links ───────────────────────────────────────────────────────────────── */

  a {
    color: var(--color-primary-dark);
    text-decoration-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--easing-default),
                text-decoration-color var(--duration-fast) var(--easing-default);
  }

  a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-primary);
  }

  /* ── Horizontal Rule ────────────────────────────────────────────────────── */

  hr {
    border: none;
    border-top: 1px solid #e4e4e7;
    margin-block: 2rem;
  }

  /* ── Images ──────────────────────────────────────────────────────────────── */

  img,
  video {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* ── Tables ──────────────────────────────────────────────────────────────── */

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-body-sm);
  }

  th {
    font-family: var(--font-sans);
    font-weight: var(--weight-heading-sans);
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 2px solid #e4e4e7;
    color: #3f3f46;
    letter-spacing: 0.02em;
    font-size: var(--text-body-xs);
    text-transform: uppercase;
  }

  td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f4f4f5;
    color: #3f3f46;
  }

  tr:last-child td {
    border-bottom: none;
  }

  /* ── Form Elements Base ──────────────────────────────────────────────────── */

  input,
  textarea,
  select {
    font-family: var(--font-body);
    font-size: var(--text-body);
  }

  label {
    font-family: var(--font-sans);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-body-medium);
    color: #3f3f46;
  }

  /* ── Focus Visible ───────────────────────────────────────────────────────── */

  :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  /* ── Selection ───────────────────────────────────────────────────────────── */

  ::selection {
    background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: inherit;
  }

  /* ── Scrollbar (Webkit) ──────────────────────────────────────────────────── */

  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: #f4f4f5;
  }

  ::-webkit-scrollbar-thumb {
    background: #e4e4e7;
    border-radius: var(--radius-full);
    border: 2px solid #f4f4f5;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #71717a;
  }

  /* ── Dark Mode Base ──────────────────────────────────────────────────────── */

  .dark body {
    background-color: #0d0d0d;
    color: #f4f4f5;
  }

  .dark code {
    background-color: #1a1a1a;
    border-color: #3f3f46;
    color: #e4e4e7;
  }

  .dark kbd {
    background-color: #1a1a1a;
    border-color: #3f3f46;
    color: #71717a;
  }

  .dark blockquote {
    color: #e4e4e7;
    border-left-color: var(--color-primary);
  }

  .dark a {
    color: var(--color-primary);
  }

  .dark a:hover {
    color: color-mix(in srgb, var(--color-primary) 80%, white);
  }

  .dark hr {
    border-top-color: #1a1a1a;
  }

  .dark th {
    border-bottom-color: #1a1a1a;
    color: #71717a;
  }

  .dark td {
    border-bottom-color: #1a1a1a;
    color: #e4e4e7;
  }

  .dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: #3f3f46;
    border-color: #1a1a1a;
  }

  /* ── Reduced Motion ──────────────────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

}