/* AI Budapest Hand-drawn Annotations · Paper Backgrounds */

:root {
  /* AI Budapest brand alapok */
  --paper-bg: #FBFAF4;
  --paper-bg-dark: #F5F3EA;
  --paper-dot: rgba(0, 0, 0, 0.18);
  --paper-line: rgba(0, 0, 0, 0.07);
  --paper-margin-line: rgba(220, 38, 38, 0.35); /* füzet bal-margó piros vonal */

  /* Tinta-színek */
  --ink: #1a1a1a;          /* fekete toll, kicsit tonálisabb */
  --ink-soft: #2a2a2a;
  --ink-blue: #2563eb;     /* Attio reference kék */
  --ink-purple: #783FF3;   /* lila accent */
  --ink-orange: #FA7E00;   /* secondary */
  --ink-yellow: #FDD835;   /* highlight marker */
}

/* Alap papír */
.paper {
  background-color: var(--paper-bg);
  color: var(--ink);
}

/* Pöttyös háttér — Attio-stílus, fő variáns */
.paper-dotted {
  background-color: var(--paper-bg);
  background-image: radial-gradient(
    circle at center,
    var(--paper-dot) 1px,
    transparent 1.5px
  );
  background-size: 24px 24px;
  background-position: 0 0;
  color: var(--ink);
}

/* Sűrűbb pöttyök */
.paper-dotted-tight {
  background-color: var(--paper-bg);
  background-image: radial-gradient(
    circle at center,
    var(--paper-dot) 1px,
    transparent 1.5px
  );
  background-size: 16px 16px;
}

/* Lazább pöttyök */
.paper-dotted-loose {
  background-color: var(--paper-bg);
  background-image: radial-gradient(
    circle at center,
    var(--paper-dot) 1.2px,
    transparent 1.8px
  );
  background-size: 32px 32px;
}

/* Grid (vonalas, finom) */
.paper-grid {
  background-color: var(--paper-bg);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Jegyzetfüzet-szerű vízszintes vonalak */
.paper-lined {
  background-color: var(--paper-bg);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px);
  background-size: 100% 32px;
  background-position: 0 24px;
}

/* Notebook (vonalas + bal margó vonal) */
.paper-notebook {
  background-color: var(--paper-bg);
  background-image:
    linear-gradient(var(--paper-line) 1px, transparent 1px),
    linear-gradient(90deg, transparent 80px, var(--paper-margin-line) 80px, var(--paper-margin-line) 81px, transparent 81px);
  background-size: 100% 32px, 100% 100%;
  background-position: 0 24px, 0 0;
}

/* Sötét variáns */
.paper-dark {
  --paper-bg: #1c1917;
  --paper-dot: rgba(255, 255, 255, 0.12);
  --paper-line: rgba(255, 255, 255, 0.06);
  --ink: #f5f5f0;
  --ink-soft: #e5e5e0;
  background-color: var(--paper-bg);
  color: var(--ink);
}
.paper-dark.paper-dotted {
  background-image: radial-gradient(circle at center, var(--paper-dot) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Tollszín-választók (override-olható elemekre) */
.ink-purple { --ink: var(--ink-purple); color: var(--ink-purple); }
.ink-blue   { --ink: var(--ink-blue);   color: var(--ink-blue); }
.ink-orange { --ink: var(--ink-orange); color: var(--ink-orange); }
.ink-black  { --ink: #1a1a1a;           color: #1a1a1a; }