/* Ownotes brand tokens.
   Fonts: Bricolage Grotesque (headings, logo) and DM Sans (interface and text), from Google Fonts. */

:root {
  /* Surfaces */
  --ow-page: #FFFCF5;          /* page background */
  --ow-surface: #F6F1E4;       /* panels, recessed areas */
  --ow-card: #FFFEFA;          /* raised cards, editor (never pure white) */
  --ow-line: #E7E0CF;          /* borders, dividers */

  /* Text */
  --ow-ink: #1D2330;           /* primary text, dark surfaces: 15.4:1 on page */
  --ow-ink-soft: #535B6B;      /* secondary text: 6.7:1 on page */
  --ow-on-ink: #FFFCF5;        /* text on ink */
  --ow-on-ink-soft: #C9CDD6;   /* secondary text on ink */

  /* Pen red: the signature. Buttons, the logo underline, links between notes. */
  --ow-pen: #C23B26;           /* on light: 5.2:1 */
  --ow-pen-deep: #A8321F;      /* hover / pressed */
  --ow-pen-on-ink: #E8604A;    /* on dark surfaces: 4.65:1 on ink */
  --ow-pen-wash: #FBE9E5;      /* error background; pen deep text on it */

  /* Highlighter: in-note highlights in the app; accents on the website. */
  --ow-highlight: #FFE45C;     /* ink on it: 12.4:1 */
  --ow-highlight-soft: #FFF6BF;

  /* Supporting */
  --ow-mint: #1F7A5C;          /* linked / done: 5.1:1 on page */
  --ow-ghost: #8C81A6;         /* pending AI suggestions only, always dashed */

  /* In the app: note types. Identity colours mark edges and icons; text stays ink. */
  --ow-own: var(--ow-pen);     /* permanent notes: the student's own ideas */
  --ow-source: var(--ow-mint); /* literature notes: what came from a source */
  --ow-source-wash: #EAF4EF;   /* quotation background */
  --ow-essay: var(--ow-ink-soft);
  --ow-essay-surface: #EEF0F3;

  /* Type */
  --ow-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ow-sans: "DM Sans", system-ui, sans-serif;

  /* The hand-drawn pen line, as a background image. One version per surface colour. */
  --ow-pen-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 5, 120 6, 197 10' fill='none' stroke='%23C23B26' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  --ow-pen-line-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 13 C 50 5, 120 6, 197 10' fill='none' stroke='%23E8604A' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Heading emphasis: one pen underline per screen, on the words that matter. */
.ow-pen {
  white-space: nowrap;
  background: var(--ow-pen-line) no-repeat 0 100% / 100% 0.2em;
  padding-bottom: 0.06em;
}
.ow-on-ink .ow-pen { background-image: var(--ow-pen-line-on-ink); }

/* In the app: a link from one note to another. Ink text, pen underline. */
.ow-note-link {
  color: var(--ow-ink);
  text-decoration: none;
  background: var(--ow-pen-line) no-repeat 0 100% / 100% 0.28em;
  padding-bottom: 0.1em;
  font-weight: 500;
}
.ow-note-link:hover { color: var(--ow-pen); }
.ow-note-link:focus-visible { outline: 2px solid var(--ow-pen); outline-offset: 2px; border-radius: 2px; }

/* In the app: a passage the student highlighted inside a note. */
.ow-highlight {
  background: var(--ow-highlight);
  color: var(--ow-ink);
  padding: 0.05em 0.15em;
  border-radius: 0.1em;
}