/* briggen.dev — Effects: radii, borders, shadows, grid backgrounds
   Hard pixel drop-shadows (no blur). Blocky tiles, small radius.
   Faint graph-paper grid on hero surfaces. Built, not bought. */

:root {
  /* ---- Corner radii (blocky — pixels don't have soft corners) ---- */
  --radius-0:    0;
  --radius-xs:   2px;   /* tiny tiles / chips */
  --radius-sm:   3px;   /* cards on the brand sheet */
  --radius-md:   4px;   /* default element radius (matches Nextcloud theme) */
  --radius-lg:   6px;   /* buttons · service rows */
  --radius-xl:   8px;   /* framed surfaces */
  --radius-tile: 7px;   /* the [nb] icon tile */
  --radius-app:  14px;  /* large app-icon tile */

  /* ---- Borders ---- */
  --border-w:      1px;
  --border-line:   1px solid var(--line);
  --border-dark:   1px solid var(--dark-line);

  /* ---- Hard pixel drop-shadows (offset, zero blur, no spread) ---- */
  --shadow-1:  2px 2px 0 rgba(27,28,25,0.08);
  --shadow-2:  3px 3px 0 rgba(27,28,25,0.12);
  --shadow-3:  4px 4px 0 rgba(27,28,25,0.08);
  --shadow-4:  5px 5px 0 rgba(27,28,25,0.07);   /* brand-sheet cards */
  --shadow-5:  5px 5px 0 rgba(27,28,25,0.14);   /* terminal card */
  --shadow-tile: 4px 4px 0 rgba(27,28,25,0.18); /* icon tile on paper */
  --inset-hairline: inset 0 0 0 1px rgba(0,0,0,0.06);

  /* ---- Motion (calm; short, no bounce) ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);  /* @kind other */
  --dur-fast:  .12s;  /* @kind other */
  --dur:       .15s;  /* @kind other */
  --dur-slow:  .25s;  /* @kind other */

  /* ---- Graph-paper grid backgrounds (composable) ---- */
  --grid-ink:   rgba(27,28,25,0.045);  /* on paper, hero surfaces @kind color */
  --grid-ink-2: rgba(27,28,25,0.05);   /* on raised frames @kind color */
}

/* Utility: paint the faint graph-paper grid on any element.
   Usage:  class="bg-grid"  (paper)  ·  add inline background-color for variants. */
.bg-grid {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.bg-grid-tight {
  background-image:
    linear-gradient(var(--grid-ink-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-ink-2) 1px, transparent 1px);
  background-size: 11px 11px;
}