/* ============================================================
   Variation C "Schematic" -- Design tokens
   Layered on top of design-system.css. Adds the Schematic-only
   tokens: Drafting Cyan accent, mono font for metadata,
   construction-grid backdrop, drafting-border hairlines, and
   tighter section padding/typography scale than A or B.
   ============================================================ */

:root {
    /* Drafting Cyan -- third accent reserved for linework, callouts,
       dimension labels, grid rulers. NEVER used on body or CTAs. */
    --color-accent-2: #3DA5D9;
    --color-accent-2-soft: rgba(61, 165, 217, 0.35);
    --color-accent-2-line: rgba(61, 165, 217, 0.65);

    /* Construction-grid backdrop */
    --color-grid-rule: rgba(232, 238, 245, 0.04);
    --grid-cell: 32px;

    /* Drafting borders (sheet frames) */
    --color-drafting-border: rgba(232, 238, 245, 0.18);
    --color-drafting-border-strong: rgba(232, 238, 245, 0.32);
    --border-drafting: 1px solid var(--color-drafting-border);
    --border-drafting-strong: 1px solid var(--color-drafting-border-strong);

    /* Monospace font for metadata (item codes, sheet codes, dimensions) */
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, 'Courier New', monospace;

    /* Tighter typography scale (vs A's hero-cinematic and B's reduced-cinematic) */
    --text-hero-c: clamp(1.75rem, 3vw, 3.25rem);
    --text-section-c: clamp(1.5rem, 2.4vw, 2.5rem);
    --text-sheet-code: 0.6875rem;
    --text-dim-label: 0.625rem;

    /* Section padding -- tighter than B's cinematic clamps */
    --section-padding-c: clamp(4rem, 8vh, 6rem);
}


/* --------------------------------------------------------------------------
   Persistent construction-grid backdrop
   The site root sits on a 32px x 32px hairline grid. Every section reads as
   a sheet pinned to the same drawing board.
   -------------------------------------------------------------------------- */

body {
    background-image:
        linear-gradient(var(--color-grid-rule) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-grid-rule) 1px, transparent 1px);
    background-size: var(--grid-cell) var(--grid-cell);
    background-position: -1px -1px;
    /* Anchor the grid to the section background so it scrolls with content */
    background-attachment: scroll;
}


/* --------------------------------------------------------------------------
   Monospace metadata helper class
   Use anywhere we render: item codes, sheet codes, dimensions, coordinates,
   timestamps, revision numbers, drawing references.
   -------------------------------------------------------------------------- */

.mono {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   sr-only utility (used for accessibility-only text)
   -------------------------------------------------------------------------- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}