/* ==========================================================================
   flock · brand foundation
   --------------------------------------------------------------------------
   The single source of truth for type, colour tokens and the logotype.
   Rendered specification: brand/flock-brand.html. Implementation guide:
   BRAND.md. If this file and the spec page disagree, the spec page wins.

   Load order: brand.css first, then the page stylesheet. Nothing here
   styles a page; it only defines fonts, tokens and the wordmark component.
   ========================================================================== */


/* ==========================================================================
   1. TYPE · self-hosted, no CDN at runtime
   Outfit 400/500 .... logotype, UI, body
   Fraunces ......... display headings only, never below 20px
   IBM Plex Mono .... code, terminal, file paths, tracked metadata labels
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Fraunces is declared by the pages that already carry it (index.html).
   Repeated here so brand.css is self-sufficient when loaded alone. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Roman.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}


/* ==========================================================================
   2. TOKENS · Daybreak, the bright theme and the default
   Every token name that index.html already ships is preserved. New names
   from the brand spec are added alongside. Nothing is renamed: other files
   read these.
   ========================================================================== */

:root {
  /* ---- ink scale ---- */
  --ink: #0B1B33;
  --ink-2: #22334F;
  --slate: #44546C;
  --slate-soft: #61708A;

  /* ---- paper ---- */
  --paper: #FCFBF8;
  --ivory: #FCFBF8;          /* same value as --paper, kept for existing pages */
  --paper-2: #F4F2EC;
  --elev: #FFFFFF;
  --bg-elev: #FFFFFF;        /* existing name for raised cards, panes, windows */

  /* ---- the signature: these three now live IN the logotype ----
     They appear together or not at all. Never a background, never body text. */
  --sky: #7FB4F0;
  --rose: #F6C6D8;
  --peach: #FFB59E;

  /* ---- interaction ---- */
  --action: #1E5EFF;
  --action-deep: #1849C9;
  --ink-hover: #16294a;
  --btn-sub: #ffb59e;

  /* ---- state ---- */
  --ok: #1D7A4E;
  --warn: #B4763F;
  --bad: #B4483F;

  /* ---- rules and surfaces ---- */
  --hair: rgba(11, 27, 51, 0.12);
  --hair-soft: rgba(11, 27, 51, 0.05);
  --hairline: rgba(11, 27, 51, 0.12);        /* existing name, same role as --hair */
  --hairline-soft: rgba(11, 27, 51, 0.07);
  --nav-bg: rgba(252, 251, 248, 0.85);
  --chip-idle: rgba(11, 27, 51, 0.06);
  --night: #0B1B33;
  --night-deep: #071122;

  /* Rest value of the wave in decorative, non-logotype contexts only.
     The logotype itself rests on --ink and never on this. */
  --wave-idle: rgba(30, 94, 255, 0.16);

  /* ---- type roles ---- */
  --ui: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --sans: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---- motion and measure ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shell: 1080px;
}


/* ==========================================================================
   3. TOKENS · Nightfall, the dark theme. Composed, not inverted.
   ========================================================================== */

:root[data-theme="dark"] {
  --ink: #ECE9E2;
  --ink-2: #C9CEDA;
  --slate: #A7B2C4;
  --slate-soft: #7E8AA0;

  --paper: #0B1524;
  --ivory: #0B1524;
  --paper-2: #0F1B2E;
  --elev: #132139;
  --bg-elev: #131E31;

  --action: #5B8CFF;
  --action-deep: #93B4FF;
  --ink-hover: #DED9CF;
  --btn-sub: #9A4A2E;

  --ok: #4FFFB0;
  --warn: #FFC48A;
  --bad: #FF8F84;

  --hair: rgba(236, 233, 226, 0.14);
  --hair-soft: rgba(236, 233, 226, 0.07);
  --hairline: rgba(236, 233, 226, 0.14);
  --hairline-soft: rgba(236, 233, 226, 0.07);
  --nav-bg: rgba(11, 21, 36, 0.82);
  --chip-idle: rgba(236, 233, 226, 0.09);

  --wave-idle: rgba(236, 233, 226, 0.14);

  /* --sky, --rose and --peach do not change between themes. They were
     chosen against navy in the app to begin with. */
}


/* ==========================================================================
   4. THE LOGOTYPE
   The word is "flock", lowercase, Outfit 500, tracking -0.018em, with the
   letter l replaced by a drawn four-segment stem carrying the app's working
   wave.

   THE STEM HOLDS INK AT REST. The crest only lights a letter that is
   already there. If the stem ever idles faint the word loses its l and
   reads as a profanity. This is the one rule in this file that may not be
   varied for any reason.

   Markup:
     <span class="wordmark">f<span class="wordmark-stem"
       ><i style="--i:0"></i><i style="--i:1"></i
       ><i style="--i:2"></i><i style="--i:3"></i></span>ock</span>
   ========================================================================== */

.wordmark {
  font-family: var(--ui);
  font-weight: 500;
  font-size: inherit;
  line-height: 1;
  letter-spacing: -0.018em;
  color: var(--ink);
  display: inline-block;
  white-space: nowrap;
}

.wordmark-stem {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  width: 0.108em;
  height: 0.72em;
  margin: 0 0.075em 0 0.115em;
}

.wordmark-stem i {
  display: block;
  height: 25%;
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark-stem i {
    animation: flock-wave 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
  @keyframes flock-wave {
    0%, 52%, 100% { background: var(--ink); }
    10%           { background: var(--sky); }
    20%           { background: var(--rose); }
    30%           { background: var(--peach); }
  }
}

/* Dark theme: rest is --ink, which the token override above sets to the
   Nightfall ivory #ECE9E2. Stated explicitly so a future refactor of the
   keyframes cannot silently drop it.

   Read through --ink, never the literal. A page that pins itself to
   Daybreak inside its own :root[data-theme="dark"] block sets --ink back
   to the bright #0B1B33; a literal here would keep the stem ivory on a
   pale page and the word would lose its l. */
:root[data-theme="dark"] .wordmark-stem i { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .wordmark-stem i {
    animation: flock-wave-dark 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
  @keyframes flock-wave-dark {
    0%, 52%, 100% { background: var(--ink); }
    10%           { background: var(--sky); }
    20%           { background: var(--rose); }
    30%           { background: var(--peach); }
  }
}

/* Reduced motion: no animation. The crest is held as a still frame,
   segments 1 to 3 on sky, rose, peach and segment 4 on ink. */
@media (prefers-reduced-motion: reduce) {
  :root .wordmark-stem i { animation: none; }
  :root .wordmark-stem i:nth-child(1) { background: var(--sky); }
  :root .wordmark-stem i:nth-child(2) { background: var(--rose); }
  :root .wordmark-stem i:nth-child(3) { background: var(--peach); }
  :root .wordmark-stem i:nth-child(4) { background: var(--ink); }
}

/* ---- states ----------------------------------------------------------
   .is-idle    nothing running: the stem is simply ink
   .is-done    a run finished while you were away
   .is-static  no animation, solid ink. REQUIRED below 14px, and in print,
               email, the app icon and any static render.
   Put the modifier on .wordmark or on .wordmark-stem, either works. */

/* The :root prefix is deliberate. It lifts these above the dark-theme rest
   rule above so a state still wins in Nightfall. */
:root .wordmark.is-idle .wordmark-stem i,
:root .wordmark-stem.is-idle i,
:root .wordmark.is-static .wordmark-stem i,
:root .wordmark-stem.is-static i {
  animation: none;
  background: var(--ink);
}

:root .wordmark.is-done .wordmark-stem i,
:root .wordmark-stem.is-done i {
  animation: none;
  background: var(--ok);
}

/* Sub-14px rule. CSS cannot read an element's own font-size, so the floor is
   enforced by the .is-static modifier: any wordmark rendered below 14px must
   carry it. These guards catch the common case of an inline font-size and
   fail safe if someone forgets. They match exact px values only, so a 130px
   lockup is not caught by the 13px guard. */
:root .wordmark[style*="font-size:13px"] .wordmark-stem i,
:root .wordmark[style*="font-size: 13px"] .wordmark-stem i,
:root .wordmark[style*="font-size:12px"] .wordmark-stem i,
:root .wordmark[style*="font-size: 12px"] .wordmark-stem i,
:root .wordmark[style*="font-size:11px"] .wordmark-stem i,
:root .wordmark[style*="font-size: 11px"] .wordmark-stem i,
:root .wordmark[style*="font-size:10px"] .wordmark-stem i,
:root .wordmark[style*="font-size: 10px"] .wordmark-stem i,
:root .wordmark[style*="font-size:9px"] .wordmark-stem i,
:root .wordmark[style*="font-size: 9px"] .wordmark-stem i {
  animation: none;
  background: var(--ink);
}


/* ==========================================================================
   5. THE MARK ALONE
   The stem by itself, vertical, four segments: favicon, app icon, menu bar,
   any square lockup. No letters around it, so it carries no risk of reading
   as a word, but it still rests on ink for consistency with the logotype.

   Size it by setting font-size on the element (width and height are em
   based, ratio 1 : 6.2), or by overriding width and height directly.
     <span class="wordmark-mark"><i style="--i:0"></i>...4 segments...</span>
   At 16px and below, thicken it: the segments need to survive rasterising.
   ========================================================================== */

.wordmark-mark {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  width: 0.16em;
  height: 1em;
  margin: 0;
}

.wordmark-mark i {
  display: block;
  height: 25%;
  background: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .wordmark-mark i {
    animation: flock-wave 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
}

:root[data-theme="dark"] .wordmark-mark i { background: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .wordmark-mark i {
    animation: flock-wave-dark 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root .wordmark-mark i { animation: none; }
  :root .wordmark-mark i:nth-child(1) { background: var(--sky); }
  :root .wordmark-mark i:nth-child(2) { background: var(--rose); }
  :root .wordmark-mark i:nth-child(3) { background: var(--peach); }
  :root .wordmark-mark i:nth-child(4) { background: var(--ink); }
}

/* On an ink plate (app icon, favicon on a plate) the segments invert to
   paper. The rest value is still solid, never faint. */
:root .wordmark-mark.on-ink i { background: #FCFBF8; }
@media (prefers-reduced-motion: no-preference) {
  :root .wordmark-mark.on-ink i {
    animation: flock-wave-plate 1.9s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    animation-delay: calc(var(--i, 0) * 0.13s);
  }
  @keyframes flock-wave-plate {
    0%, 52%, 100% { background: #FCFBF8; }
    10%           { background: var(--sky); }
    20%           { background: var(--rose); }
    30%           { background: var(--peach); }
  }
}
@media (prefers-reduced-motion: reduce) {
  :root .wordmark-mark.on-ink i:nth-child(1) { background: var(--sky); }
  :root .wordmark-mark.on-ink i:nth-child(2) { background: var(--rose); }
  :root .wordmark-mark.on-ink i:nth-child(3) { background: var(--peach); }
  :root .wordmark-mark.on-ink i:nth-child(4) { background: #FCFBF8; }
}

:root .wordmark-mark.is-static i,
:root .wordmark-mark.is-idle i {
  animation: none;
  background: var(--ink);
}
:root .wordmark-mark.on-ink.is-static i,
:root .wordmark-mark.on-ink.is-idle i {
  animation: none;
  background: #FCFBF8;
}