/**
 * Monarch Design System v0.8.3.9.0
 * CSS Texture System — Phase 1
 * Pattern + independent opacity + independent blend mode.
 * CSS-generated only: no raster/SVG texture assets, JavaScript, or Houdini.
 */

:root {
    --texture-opacity: 0.05;
    --texture-color: 0 0 0;
    --texture-blend-mode: normal;
}

/* Texture pattern classes share one non-interactive overlay engine. */
:is(
    .texture-fine-lines,
    .texture-horizontal-lines,
    .texture-vertical-lines,
    .texture-diagonal-lines,
    .texture-crosshatch,
    .texture-fine-grid,
    .texture-grid,
    .texture-check,
    .texture-diamond,
    .texture-fine-dots,
    .texture-dots,
    .texture-halftone,
    .texture-perforated,
    .texture-paper,
    .texture-linen,
    .texture-canvas,
    .texture-weave,
    .texture-brushed
) {
    position: relative;
    isolation: isolate;
}

:is(
    .texture-fine-lines,
    .texture-horizontal-lines,
    .texture-vertical-lines,
    .texture-diagonal-lines,
    .texture-crosshatch,
    .texture-fine-grid,
    .texture-grid,
    .texture-check,
    .texture-diamond,
    .texture-fine-dots,
    .texture-dots,
    .texture-halftone,
    .texture-perforated,
    .texture-paper,
    .texture-linen,
    .texture-canvas,
    .texture-weave,
    .texture-brushed
)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: var(--texture-opacity, 0.05);
    mix-blend-mode: var(--texture-blend-mode, normal);
}

/* Lines */
.texture-fine-lines::before,
.texture-horizontal-lines::before {
    background: repeating-linear-gradient(
        0deg,
        rgb(var(--texture-color) / 1) 0 1px,
        transparent 1px 4px
    );
}

.texture-horizontal-lines::before {
    background-size: 100% 6px;
}

.texture-vertical-lines::before {
    background: repeating-linear-gradient(
        90deg,
        rgb(var(--texture-color) / 1) 0 1px,
        transparent 1px 6px
    );
}

.texture-diagonal-lines::before {
    background: repeating-linear-gradient(
        45deg,
        rgb(var(--texture-color) / 1) 0 1px,
        transparent 1px 7px
    );
}

.texture-crosshatch::before {
    background:
        repeating-linear-gradient(45deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 6px),
        repeating-linear-gradient(-45deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 6px);
}

/* Grids / geometry */
.texture-fine-grid::before {
    background:
        repeating-linear-gradient(0deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(90deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 8px);
}

.texture-grid::before {
    background:
        linear-gradient(rgb(var(--texture-color) / 1) 1px, transparent 1px),
        linear-gradient(90deg, rgb(var(--texture-color) / 1) 1px, transparent 1px);
    background-size: 18px 18px;
}

.texture-check::before {
    background: conic-gradient(
        rgb(var(--texture-color) / 1) 25%,
        transparent 0 50%,
        rgb(var(--texture-color) / 1) 0 75%,
        transparent 0
    );
    background-size: 16px 16px;
}

.texture-diamond::before {
    background:
        repeating-linear-gradient(45deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(-45deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 10px);
    background-size: 20px 20px;
}

/* Dots */
.texture-fine-dots::before {
    background: radial-gradient(circle, rgb(var(--texture-color) / 1) 0 0.75px, transparent 1px);
    background-size: 5px 5px;
}

.texture-dots::before {
    background: radial-gradient(circle, rgb(var(--texture-color) / 1) 0 1.25px, transparent 1.5px);
    background-size: 9px 9px;
}

.texture-halftone::before {
    background: radial-gradient(circle, rgb(var(--texture-color) / 1) 0 1.75px, transparent 2px);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}

.texture-perforated::before {
    background: radial-gradient(circle, rgb(var(--texture-color) / 1) 0 2px, transparent 2.25px);
    background-size: 12px 12px;
}

/* Material / fabric */
.texture-paper::before {
    background:
        radial-gradient(circle at 20% 30%, rgb(var(--texture-color) / 1) 0 0.7px, transparent 1px),
        radial-gradient(circle at 70% 65%, rgb(var(--texture-color) / 1) 0 0.7px, transparent 1px),
        repeating-linear-gradient(3deg, transparent 0 5px, rgb(var(--texture-color) / 1) 5px 6px, transparent 6px 11px);
    background-size: 17px 19px, 23px 21px, 100% 17px;
}

.texture-linen::before {
    background:
        repeating-linear-gradient(0deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 5px);
}

.texture-canvas::before {
    background:
        repeating-linear-gradient(0deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(45deg, transparent 0 5px, rgb(var(--texture-color) / 1) 5px 6px, transparent 6px 11px);
}

.texture-weave::before {
    background: repeating-conic-gradient(
        from 45deg,
        rgb(var(--texture-color) / 1) 0 25%,
        transparent 0 50%
    );
    background-size: 8px 8px;
}

.texture-brushed::before {
    background:
        repeating-linear-gradient(90deg, rgb(var(--texture-color) / 1) 0 1px, transparent 1px 3px, rgb(var(--texture-color) / 1) 3px 4px, transparent 4px 9px),
        linear-gradient(180deg, transparent, rgb(var(--texture-color) / 1), transparent);
}

/* Independent texture opacity utilities. These affect only the ::before texture layer. */
.texture-opacity-01 { --texture-opacity: 0.01; }
.texture-opacity-02 { --texture-opacity: 0.02; }
.texture-opacity-03 { --texture-opacity: 0.03; }
.texture-opacity-04 { --texture-opacity: 0.04; }
.texture-opacity-05 { --texture-opacity: 0.05; }
.texture-opacity-06 { --texture-opacity: 0.06; }
.texture-opacity-08 { --texture-opacity: 0.08; }
.texture-opacity-10 { --texture-opacity: 0.10; }
.texture-opacity-15 { --texture-opacity: 0.15; }
.texture-opacity-20 { --texture-opacity: 0.20; }
.texture-opacity-25 { --texture-opacity: 0.25; }
.texture-opacity-30 { --texture-opacity: 0.30; }

/* Independent texture blend-mode utilities. */
.texture-blend-normal { --texture-blend-mode: normal; }
.texture-blend-multiply { --texture-blend-mode: multiply; }
.texture-blend-screen { --texture-blend-mode: screen; }
.texture-blend-overlay { --texture-blend-mode: overlay; }
.texture-blend-soft-light { --texture-blend-mode: soft-light; }
.texture-blend-hard-light { --texture-blend-mode: hard-light; }
.texture-blend-darken { --texture-blend-mode: darken; }
.texture-blend-lighten { --texture-blend-mode: lighten; }

/* Texture Laboratory presentation helpers; not part of the public utility contract. */
.texture-lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-4, 1rem);
}

.texture-lab-swatch {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    padding: var(--space-4, 1rem);
    background: var(--color-surface, #f4f1e8);
    border: 1px solid var(--color-border, #d8d2c5);
    border-radius: var(--radius-lg, 0.75rem);
}

.texture-lab-swatch > * {
    position: relative;
}

.texture-lab-swatch code {
    background: rgb(255 255 255 / 0.78);
    padding: 0.25rem 0.4rem;
    border-radius: 0.35rem;
}