@tailwind base;
@tailwind components;
@tailwind utilities;

/* Syntax highlighting for code blocks */
.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w { color: #383838; }
.highlight .err { color: #181818; background-color: #ab4642; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { color: #585858; }
.highlight .cp { color: #f7ca88; }
.highlight .nt { color: #f7ca88; }
.highlight .o, .highlight .ow { color: #d8d8d8; }
.highlight .p, .highlight .pi { color: #d8d8d8; }
.highlight .gi { color: #a1b56c; }
.highlight .gd { color: #ab4642; }
.highlight .gh { color: #7cafc2; background-color: #181818; font-weight: bold; }
.highlight .ge { font-style: italic; }
.highlight .ges { font-weight: bold; font-style: italic; }
.highlight .gs { font-weight: bold; }
.highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { color: #ba8baf; }
.highlight .kc { color: #dc9656; }
.highlight .kt { color: #dc9656; }
.highlight .kd { color: #dc9656; }
.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 { color: #a1b56c; }
.highlight .sa { color: #ba8baf; }
.highlight .sr { color: #86c1b9; }
.highlight .si { color: #a16946; }
.highlight .se { color: #a16946; }
.highlight .nn { color: #f7ca88; }
.highlight .nc { color: #f7ca88; }
.highlight .no { color: #f7ca88; }
.highlight .na { color: #7cafc2; }
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #a1b56c; }
.highlight .ss { color: #a1b56c; }

/* Markdown content styling */
.markdown-content {
  @apply prose prose-lg max-w-none;
}
.markdown-content pre {
  @apply bg-gray-100 rounded-lg p-4 overflow-x-auto;
}
.markdown-content code {
  @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
}
.markdown-content pre code {
  @apply bg-transparent p-0;
}

@layer base {
  :root {
    --ink-black: #1a1a1a;
    --paper-white: #fefefe;
    /* --ink-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"); */
    --registration-red: #ff0040;

    --slide-out: slide-out-up;
    --slide-in: slide-in-up;

    --reverse-slide-out: slide-out-down;
    --reverse-slide-in: slide-in-down;

    --page-transition-out: var(--slide-out);
    --page-transition-in: var(--slide-in);
  }

  summary {
    list-style-type: none;
    cursor: pointer;
  }

  summary::before {
    display: none;
  }

  .geometric-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(135deg, #6a936a, #e3ad56);
    border-radius: 0 2px 2px 0;
  }

  .nav-sidebar [aria-current="true"] {
      background: linear-gradient(135deg, #f7f9f7 0%, #eef2ee 100%);
      border-left: 3px solid #6a936a;
  }

  .page-transition {
    view-transition-name: page;
  }

  /* View Transitions API - Swipe Up Effect */
  @supports (view-transition-name: page) {
    ::view-transition-old(page),
    ::view-transition-new(page) {
      animation-duration: 0.6s;
      animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Forward navigation (default) */
    ::view-transition-old(page) {
      animation-name: var(--page-transition-out);
    }

    ::view-transition-new(page) {
      animation-name: var(--page-transition-in);
    }

    /* Forward animations */
    @keyframes slide-out-up {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(-100vh);
        opacity: 0;
      }
    }

    @keyframes slide-in-up {
      from {
        transform: translateY(100vh);
        opacity: 0.8;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }

    /* Back animations */
    @keyframes slide-out-down {
      from {
        transform: translateY(0);
        opacity: 1;
      }
      to {
        transform: translateY(100vh);
        opacity: 0;
      }
    }

    @keyframes slide-in-down {
      from {
        transform: translateY(-100vh);
        opacity: 0.8;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }

  @keyframes slide-flash-in {
    from {
      transform: translateY(-500px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .animate-flash {
    animation: slide-flash-in 0.3s cubic-bezier(0.4, 0, 0.2, 1), slide-flash-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) reverse 3.3s;
    animation-fill-mode: forwards;
  }

  .shadow-warm {
      box-shadow: 0 4px 6px -1px rgba(106, 147, 106, 0.1), 0 2px 4px -1px rgba(106, 147, 106, 0.06);
  }

  .shadow-warm-lg {
      box-shadow: 0 10px 15px -3px rgba(106, 147, 106, 0.1), 0 4px 6px -2px rgba(106, 147, 106, 0.05);
  }

  .text-balance {
      text-wrap: balance;
  }

  .note-card:hover {
      transform: translateY(-2px);
      transition: all 0.2s ease-out;
  }

  .note-card {
      transition: all 0.2s ease-out;
  }

  /* Writing-focused styles */
  .editor-content {
      font-size: 16px;
      line-height: 1.7;
      font-family: 'Inter', system-ui, sans-serif;
  }

  .editor-content:focus {
      outline: none;
  }

  .toolbar-button {
      @apply p-2 text-gray-600 hover:text-sage-600 hover:bg-sage-50 rounded-lg transition-colors;
  }

  .toolbar-button.active {
      @apply text-sage-600 bg-sage-50;
  }

  .focus-mode .sidebar-hidden {
      transform: translateX(100%);
      opacity: 0;
  }

  .focus-mode .editor-expanded {
      margin-right: 0;
  }

  /* Auto-save indicator */
  .save-indicator {
      transition: all 0.3s ease;
  }

  .save-indicator.saving {
      color: #e3ad56;
  }

  .save-indicator.saved {
      color: #6a936a;
  }


  .input-field {
      @apply w-full px-4 py-3 border border-sage-200 rounded-lg focus:ring-2 focus:ring-sage-500 focus:border-sage-500 transition-colors bg-white;
  }

  .field_with_errors .input-field {
      @apply border-hot-300 focus:ring-hot-500 focus:border-hot-500 bg-hot-50;
  }

  .input-field.success {
      @apply border-sage-300 focus:ring-sage-500 focus:border-sage-500 bg-sage-50;
  }

  .avatar-upload {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.2s ease;
  }

  .avatar-upload:hover {
      transform: scale(1.02);
  }

  .avatar-upload input[type="file"] {
      position: absolute;
      left: -9999px;
  }

  .password-strength-bar {
      height: 3px;
      border-radius: 2px;
      transition: all 0.3s ease;
  }

  .strength-weak { background-color: #d97757; width: 25%; }
  .strength-fair { background-color: #e3ad56; width: 50%; }
  .strength-good { background-color: #8bb08b; width: 75%; }
  .strength-strong { background-color: #6a936a; width: 100%; }

  /* public */

  body.dark {
    --ink-black: #f0f0f0;
    --paper-white: #0f0f0f;
    /* --ink-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"); */
  }

  body.public {
    font-family: Georgia, 'Times New Roman', serif;
    background: var(--paper-white);
    color: var(--ink-black);
    transition: all 0.3s ease;
    line-height: 1.6;
  }

  /* Optimal reading content styles */
  .reading-content {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink-black);
  }

  .reading-content p {
    margin-bottom: 1.5em;
    max-width: none;
  }

  .reading-content h1,
  .reading-content h2,
  .reading-content h3,
  .reading-content h4,
  .reading-content h5,
  .reading-content h6 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.8em;
    color: var(--ink-black);
  }

  .reading-content h1 { font-size: 2em; }
  .reading-content h2 { font-size: 1.6em; }
  .reading-content h3 { font-size: 1.3em; }
  .reading-content h4 { font-size: 1.1em; }

  .reading-content h1:first-child,
  .reading-content h2:first-child,
  .reading-content h3:first-child {
    margin-top: 0;
  }

  .reading-content ul,
  .reading-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
  }

  .reading-content li {
    margin-bottom: 0.5em;
    line-height: 1.6;
  }

  .reading-content blockquote {
    border-left: 3px solid var(--ink-black);
    padding-left: 1.5em;
    margin: 2em 0;
    font-style: italic;
    opacity: 0.9;
  }

  .reading-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    background: var(--ink-black);
    color: var(--paper-white);
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }

  .reading-content pre {
    background: var(--ink-black);
    color: var(--paper-white);
    padding: 1.5em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 2em 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9em;
    line-height: 1.5;
  }

  .reading-content pre code {
    background: none;
    color: inherit;
    padding: 0;
  }

  .reading-content a {
    color: var(--ink-black);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .reading-content a:hover {
    opacity: 0.7;
  }

  .reading-content img {
    max-width: 100%;
    height: auto;
    margin: 2em 0;
    border-radius: 4px;
  }

  .reading-content hr {
    border: none;
    border-top: 1px solid var(--ink-black);
    opacity: 0.3;
    margin: 3em 0;
  }

  /* Dark mode adjustments - colors automatically switch via CSS variables */

  .headline-font {
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 0.9;
  }

  .mono-font {
    font-family: theme("fontFamily.mono");
  }

  .ink-bleed {
    position: relative;
  }

  .ink-bleed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: currentColor;
    filter: blur(0.5px);
    opacity: 0.05;
    z-index: -1;
    transform: scale(1.01);
  }

  .registration-mark {
    position: relative;
  }

  .registration-mark::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--registration-red);
    border-radius: 50%;
    top: -12px;
    left: -20px;
  }

  .registration-mark::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 16px;
    background: var(--registration-red);
    top: -16px;
    left: -16px;
  }

  .edition-number {
    position: relative;
    background: linear-gradient(45deg, transparent 10%, var(--ink-black) 10%, var(--ink-black) 90%, transparent 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hover-bleed:hover {
    text-shadow:
        0.5px 0.5px 0 currentColor,
        -0.5px -0.5px 0 currentColor,
        0.5px -0.5px 0 currentColor,
        -0.5px 0.5px 0 currentColor;
    transform: translateY(-1px);
    transition: all 0.2s ease;
  }

  .grid-overlay {
    background-image:
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
  }

  .theme-toggle {
    background: var(--paper-white);
    color: var(--ink-black);
    border: 1px solid var(--ink-black);
    transition: all 0.2s ease;
  }

  .theme-toggle:hover {
    background: var(--ink-black);
    color: var(--paper-white);
  }

  .nav-link {
    position: relative;
    overflow: hidden;
  }

  .nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -100%;
    width: 100%;
    height: 2px;
    background: var(--registration-red);
    transition: left 0.3s ease;
  }

  .nav-link:hover::before {
    left: 0;
  }

  .print-shadow {
    box-shadow:
      0 1px 3px rgba(0,0,0,0.1),
      0 1px 2px rgba(0,0,0,0.06),
      inset 0 0 0 1px rgba(0,0,0,0.05);
  }

  body.dark .print-shadow {
    box-shadow:
      0 1px 3px rgba(255,255,255,0.4),
      0 1px 2px rgba(255,255,255,0.4),
      inset 0 0 0 1px rgba(255,255,255,0.05);
  }
}