/*!
 * Ligna shape system — tokens and components
 * Pairs with assets/js/ligna-shapes.js. See CLAUDE.md for the rules.
 */

:root {
  /* Primary palette — Brand Identity p7 */
  --ligna-ho: #ff761a;
  --ligna-black: #000000;
  --ligna-white: #ffffff;

  /* Secondary palette — p8. Charts, diagrams, illustrations only. */
  --ligna-redgum: #7f3300;
  --ligna-forest: #1a3325;
  --ligna-eucalypt: #658c78;
  --ligna-burnt-orange: #bf500b;
  --ligna-space-blue: #000b33;

  /* Derived tints used by the Layers device */
  --ligna-ho-50: #ffbb8c;

  /* Geometry */
  --ligna-rake-ratio: 0.31722; /* tan(17.6deg) — the one constant */
  /* Circular arc, for flat non-bevelled surfaces only — cards, inputs, panels.
     NOT the generator's fillet radius (9.6, angle-aware trim, squircular).
     Two different quantities; they are not meant to match. See BRAND.md s2. */
  --ligna-surface-radius: 6px;  /* fixed. never scales with the shape. */

  /* Type */
  --ligna-font: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------ stripe */

/* Host for a generated Paint Stripe. paintStripe() sets width and height. */
.ligna-stripe {
  position: relative;
  display: block;
}
.ligna-stripe > svg {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------ button */

.ligna-btn {
  --h: 48px;
  --rake: calc(var(--h) * var(--ligna-rake-ratio));
  --fill: var(--ligna-ho);
  --ink: var(--ligna-black);
  --stroke: none;

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--h);
  padding-left: 20px;
  padding-right: calc(var(--rake) + 20px); /* clears the bevel */

  border: 0;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font: 600 1rem / 1 var(--ligna-font);
  text-decoration: none;
}

/*
 * No-JS fallback only. Accepts both clip-path compromises: no stroke along the
 * bevel, and a sharp bevel foot. JS removes this by setting data-ligna-shaped.
 */
.ligna-btn:not([data-ligna-shaped]) {
  background: var(--fill);
  border-radius: var(--ligna-surface-radius);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--rake)) 100%, 0 100%);
}

.ligna-btn > svg {
  position: absolute;
  left: -8px; /* must match BTN_PAD in ligna-shapes.js */
  top: -8px;
  z-index: -1;
  pointer-events: none;
}

.ligna-btn__face {
  fill: var(--fill);
  stroke: var(--stroke);
  stroke-width: 2;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

.ligna-btn__ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  opacity: 0;
}

.ligna-btn:focus-visible {
  outline: none; /* the ring path replaces it, so it follows the bevel */
}
.ligna-btn:focus-visible .ligna-btn__ring {
  opacity: 1;
}

.ligna-btn:hover .ligna-btn__face {
  fill: color-mix(in srgb, var(--fill) 90%, #000);
}
.ligna-btn:active .ligna-btn__face {
  fill: color-mix(in srgb, var(--fill) 82%, #000);
}

/* Sizes */
.ligna-btn--sm {
  --h: 40px;
  font-size: 0.875rem;
}
.ligna-btn--lg {
  --h: 56px;
  font-size: 1.125rem;
  font-weight: 700;
  padding-left: 22px;
  padding-right: calc(var(--rake) + 22px);
}

/* Variants */
.ligna-btn--outline {
  --fill: transparent;
  --stroke: var(--ligna-black);
}
.ligna-btn--outline:hover .ligna-btn__face {
  fill: color-mix(in srgb, #000 7%, transparent);
}
.ligna-btn--outline:active .ligna-btn__face {
  fill: color-mix(in srgb, #000 12%, transparent);
}

.ligna-btn--dark {
  --fill: var(--ligna-black);
  --ink: var(--ligna-white);
}

/* Mirrored — back / previous actions only. Never as a default direction. */
.ligna-btn--back {
  padding-left: calc(var(--rake) + 20px);
  padding-right: 20px;
}
.ligna-btn--back:not([data-ligna-shaped]) {
  clip-path: polygon(var(--rake) 0, 100% 0, 100% 100%, 0 100%);
}

/* On a black field */
.ligna-on-dark .ligna-btn--outline {
  --stroke: var(--ligna-white);
  --ink: var(--ligna-white);
}
.ligna-on-dark .ligna-btn--outline:hover .ligna-btn__face {
  fill: color-mix(in srgb, #fff 15%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .ligna-btn__face {
    transition: none;
  }
}

/* --------------------------------------------------- fluid bevelled block */

/*
 * For a block whose bevel depends on its own width. The container query keeps
 * the angle exact as it resizes, without JS. Trade-off: sharp corners and no
 * stroke. Where either matters, call paintStripe() on resize instead.
 */
.ligna-stripe-fluid-wrap {
  container-type: inline-size;
}
.ligna-stripe-fluid {
  --drop: calc(100cqw * var(--ligna-rake-ratio));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--drop)), 0 100%);
}