/*
    The Axiom Project — Packet 003 wireframe stylesheet.

    THIS IS NOT THE DESIGN. docs/design-system.md is NOT LOCKED. Only the
    Phosphor palette is decided; everything else in this file is a placeholder
    that exists so the shape of the page can be looked at, argued with, and
    thrown away.

    The type in particular is a deliberate placeholder — a plain system stack in
    one variable. No typeface has been chosen. No webfont is loaded. The page is
    meant to look unfinished, because it is.

    No motion, no transitions, no hover animation, no decorative treatment.
*/

/* ---------------------------------------------------------------------------
   Phosphor palette — decided. Names and values are copied exactly from
   docs/design-system.md and must not be altered here.

   --hairline measures 2.0:1 against --ground and fails the 3:1 perceivability
   bar. It is decorative only. Anything a user must be able to perceive —
   focus rings above all — uses --active, which clears the bar at 6.9:1.
   --------------------------------------------------------------------------- */
:root {
    --ground: #04070E;
    --surface: #0A1424;
    --raised: #14203A;
    --hairline: #2C4266;
    --active: #4C9BE8;
    --text-secondary: #8FB6DC;
    --text-primary: #BFD9F2;
    --display: #E8F2FC;
}

/* ---------------------------------------------------------------------------
   Packet 003 placeholders. NONE of these are in the design system, none are
   decided, and every one of them is expected to be replaced. They exist only
   so no arbitrary value is typed into a rule below.
   --------------------------------------------------------------------------- */
:root {
    /* PLACEHOLDER TYPE. Not a typeface choice. Do not build a scale on this. */
    --font-placeholder: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --space: 1.5rem;   /* the single spacing unit; all rhythm is a multiple */
    --measure: 46rem;  /* content column max width */
    --leading: 1.6;    /* body line height */
    --radius: 2px;     /* the one shared corner value */
}

/* ---------------------------------------------------------------------------
   Reset — hand-written, deliberately short.
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body,
h1,
h2,
p,
ul,
figure {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html {
    /* Long placeholder strings must wrap rather than push the page sideways. */
    overflow-wrap: break-word;
}

body {
    background: var(--ground);
    color: var(--text-primary);
    font-family: var(--font-placeholder);
    line-height: var(--leading);
}

h1,
h2 {
    color: var(--display);
    line-height: var(--leading);
}

/* ---------------------------------------------------------------------------
   The column. One centred measure; header, content and footer share it.
   --------------------------------------------------------------------------- */
.site-header,
.site-main,
.site-footer {
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--space);
}

/* ---------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------- */
.site-header {
    padding-block: calc(var(--space) * 2) var(--space);
    /* Decorative rule only — carries no meaning, so --hairline is correct. */
    border-bottom: 1px solid var(--hairline);
}

.site-name {
    margin-bottom: var(--space);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space);
}

.site-nav a {
    color: var(--active);
}

/* ---------------------------------------------------------------------------
   Content regions. Stacked and full width. Bounded by --surface sitting on
   --ground rather than by a border. Not cards. Not a grid.
   --------------------------------------------------------------------------- */
.site-main {
    padding-block: calc(var(--space) * 2);
}

.region {
    background: var(--surface);
    border-radius: var(--radius);
    padding: var(--space);
}

.region + .region {
    margin-top: var(--space);
}

.region-note {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: calc(var(--space) / 2);
}

/* Placeholder work entries — full width, stacked, descent not peers. */
.entry {
    background: var(--raised);
    border-radius: var(--radius);
    padding: var(--space);
    margin-top: var(--space);
}

.entry-title {
    color: var(--display);
}

.entry-description {
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */
.site-footer {
    /* Decorative rule only. */
    border-top: 1px solid var(--hairline);
    color: var(--text-secondary);
    padding-block: var(--space);
}

/* ---------------------------------------------------------------------------
   Focus. Required, and required to be visible. --active, never --hairline.
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--active);
    outline-offset: 2px;
}