/* Modern gallery/agency-inspired base typography
   For blogs, resumes, one-pagers generated from Markdown
*/

:root {
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
  
    --page-bg: #f8fafc;
    --page-surface: #ffffff;
    --page-surface-muted: #f1f5f9;
  
    --text-color: #0f172a;
    --muted-color: #64748b;
    --border-subtle: #e2e8f0;
  
    --accent-color: #0f766e;
    --accent-color-soft: rgba(15, 118, 110, 0.08);
    --accent-color-strong: #0d4f4a;
  
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
  
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.09);
    --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.12);
  
    --transition-fast: 150ms ease-out;
    --transition-med: 220ms ease;
  }
  
  /* Box sizing reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Basic reset for margins */
  body,
  h1, h2, h3, h4, h5, h6,
  p,
  ul, ol,
  figure,
  blockquote,
  dl, dd {
    margin: 0;
  }
  
  /* Body & page layout */
  html {
    font-size: 100%;
  }
  
  body {
    min-height: 100vh;
    background-color: var(--page-bg);
    color: var(--text-color);
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  
  /* Optional main container (good for Markdown output) */
  body > main,
  body > .page,
  body > .container {
    max-width: 80rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem);
  }
  
  /* If content is rendered directly into body */
  body > article,
  body > section {
    max-width: 80rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem);
  }
  
  /* "Gallery / agency" surface card for primary content */
  .main-surface {
    background-color: var(--page-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    padding: clamp(2rem, 4vw, 3rem);
  }
  
  /* Typography: headings */
  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
  }
  
  /* Top-level page title */
  h1 {
    font-size: clamp(2.4rem, 1.9rem + 2.2vw, 3.3rem);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  /* Section titles */
  h2 {
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.2rem);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
  }
  
  /* Subsection titles */
  h3 {
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.7rem);
    text-transform: none;
    letter-spacing: 0.08em;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
  }
  
  h4 {
    font-size: 1.1rem;
    text-transform: none;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  h5 {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
  }
  
  h6 {
    font-size: 0.9rem;
    text-transform: none;
    color: var(--muted-color);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* Vertical rhythm for text blocks */
  p,
  ul, ol,
  pre,
  table,
  blockquote,
  figure {
    margin-bottom: 1.2rem;
  }
  
  /* Paragraphs */
  p {
    max-width: 65ch;
  }
  
  /* Muted / secondary text (e.g. meta, dates, captions) */
  .small,
  .text-muted {
    font-size: 0.85rem;
    color: var(--muted-color);
  }
  
  /* Links */
  a {
    color: var(--accent-color);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    text-decoration-line: underline;
    transition:
      color var(--transition-fast),
      text-decoration-color var(--transition-fast),
      background-color var(--transition-fast);
  }
  
  a:hover {
    color: var(--accent-color-strong);
    text-decoration-color: currentColor;
  }

  :where(
      a,
      button,
      .btn,
      input[type="submit"],
      input[type="button"],
      input[type="reset"]
    )
    + :where(
      a,
      button,
      .btn,
      input[type="submit"],
      input[type="button"],
      input[type="reset"]
    ) {
    margin-inline-start: 0.6em;
  }

  a:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
  
  /* Lists */
  ul, ol {
    padding-left: 1.5em;
  }
  
  li + li {
    margin-top: 0.35em;
  }
  
  /* Definition lists */
  dt {
    font-weight: 600;
  }
  dd {
    margin: 0 0 0.75rem 0;
  }
  
  /* Blockquotes – for quotes / testimonials */
  blockquote {
    border-left: 3px solid var(--border-subtle);
    padding-left: 1.25rem;
    color: var(--muted-color);
    font-style: italic;
    background: var(--page-surface-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  
  /* Code & preformatted blocks */
  code,
  kbd,
  samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background-color: var(--page-surface-muted);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-sm);
  }
  
  pre {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    background-color: var(--page-surface);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-subtle);
    overflow-x: auto;
  }
  
  pre code {
    background: none;
    padding: 0;
  }
  
  /* Horizontal rule – like a gallery separator */
  hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 2.5rem 0;
  }
  
  /* Images & media */
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  figure {
    margin: 2rem 0;
  }
  
  figure img {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
  }
  
  figcaption {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted-color);
  }
  
  /* Tables – clean, grid-like */
  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.95rem;
    background-color: var(--page-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  
  thead {
    background-color: var(--page-surface-muted);
  }
  
  th,
  td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-color);
  }
  
  tbody tr:last-child td {
    border-bottom: none;
  }
  
  tbody tr:hover {
    background-color: rgba(148, 163, 184, 0.08);
  }
  
  /* Markdown-style inline elements */
  strong, b {
    font-weight: 600;
  }
  em, i {
    font-style: italic;
  }
  
  /* Mark / highlight */
  mark {
    background-color: var(--accent-color-soft);
    color: inherit;
    padding: 0.05em 0.25em;
    border-radius: var(--radius-sm);
  }
  
  /* Buttons (for CTA links converted from Markdown) */
  button,
  .btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.55rem 1.2rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    background-color: var(--accent-color);
    color: #ecfeff;
    cursor: pointer;
    text-decoration: none;
    transition:
      background-color var(--transition-med),
      box-shadow var(--transition-med),
      transform var(--transition-fast);
  }
  
  button:hover,
  .btn:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    background-color: var(--accent-color-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
  }
  
  button:active,
  .btn:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  input[type="reset"]:active {
    transform: translateY(0);
    box-shadow: var(--shadow-subtle);
  }
  
  button:focus-visible,
  .btn:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="button"]:focus-visible,
  input[type="reset"]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --page-bg: #0b1220;
      --page-surface: #141f36;
      --page-surface-muted: #1a2842;
      --text-color: #e2e8f0;
      --muted-color: #94a3b8;
      --border-subtle: #1f2a3e;
      --accent-color: #2dd4bf;
      --accent-color-soft: rgba(45, 212, 191, 0.18);
      --accent-color-strong: #14b8a6;
      --shadow-soft: 0 18px 45px rgba(8, 16, 32, 0.55);
      --shadow-subtle: 0 1px 3px rgba(8, 16, 32, 0.6);
    }

    body {
      color-scheme: dark;
    }

    pre {
      background-color: var(--page-surface-muted);
    }

    blockquote {
      background-color: rgba(148, 163, 184, 0.14);
      border-left-color: rgba(148, 163, 184, 0.4);
    }

    tbody tr:hover {
      background-color: rgba(148, 163, 184, 0.18);
    }
  }

  /* Forms – minimalist lines */
  input,
  textarea,
  select {
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-color);
    background-color: var(--page-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    padding: 0.6rem 0.75rem;
    width: 100%;
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast),
      background-color var(--transition-fast);
  }
  
  input::placeholder,
  textarea::placeholder {
    color: var(--muted-color);
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color-soft);
  }
  
  /* Utility: subtle section labels – good for resumes / sections */
  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted-color);
  }
  
  .section-label::before {
    content: "";
    width: 26px;
    height: 1px;
    background-color: var(--muted-color);
    opacity: 0.4;
  }
  
  /* Utility: "prose" wrapper for Markdown content */
  .prose {
    max-width: 65ch;
  }
  
  .prose > * + * {
    margin-top: 1rem;
  }
  
  .prose h1 + p,
  .prose h2 + p,
  .prose h3 + p {
    margin-top: 0.75rem;
  }
  
  /* Responsive tweaks */
  @media (max-width: 768px) {
    body > main,
    body > .page,
    body > .container,
    body > article,
    body > section,
    .main-surface {
      padding: 1.5rem;
    }
  
    h1 {
      letter-spacing: 0.14em;
      padding-bottom: 1rem;
      margin-bottom: 1.5rem;
    }
  
    table {
      font-size: 0.9rem;
    }
  
    th,
    td {
      padding: 0.6rem 0.75rem;
    }
  }