/* Cyba Studio venture tokens. One token layer per venture: every agreement page
   keeps identical structure and swaps these by world (agreement_template.world).
   This is the proposal style guide: navy structure, gold accent, warm paper,
   Jost at light to medium. All Cyba Studio agreements wear it.

   Every value below is projected from brand_token in the Cyba body
   (Supabase genvaewhqadhyeovalip, world = cyba). The body is the source, this
   file is the rendering. If the two disagree, the body wins.
   Motif classes are namespaced .cyba-* so a surface can never collide with them. */

/* Jost, self-hosted. One variable file covers weights 300 to 600 in latin,
   so the page makes no third-party request and needs no consent banner. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/jost-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* colour, brand_token category "colour" */
  --ink: #2b2f36;      /* body text on light surfaces */
  --soft: #5e6168;     /* secondary text, captions, version lines */
  --grey-l: #aab0bd;   /* tertiary text and muted UI. On navy only, 1.96:1 on cream */
  --navy: #2a395a;     /* structure: heros, top bars, headings, section borders */
  --navy-d: #222e49;   /* darkest navy: text on gold buttons, deep panels */
  --accent: #a8823f;   /* gold-deep: kicks on light, clause numbers, list markers */
  --gold: #c9a05a;     /* mid gold: section rules, borders, gradient core */
  --gold-l: #e3c98a;   /* gradient end; kicks and highlights on navy */
  --brown: #714b4b;    /* rare warm note, sparingly */
  --char: #3b3c40;     /* neutral dark alternative */
  --paper: #fbf9f4;    /* card and panel surfaces */
  --cream: #f6f3ed;    /* page background */
  --line: #e3ddcf;     /* hairlines and borders on light */
  --line-d: #3a466a;   /* hairlines on navy */

  /* PROPOSED, not yet in brand_token. gold-deep is 3.20:1 on cream, which passes
     3:1 for large text and interface components but fails 4.5:1 for small text,
     and the kick is 12 to 13px. This is the same hue darkened to 4.53:1 on cream.
     Use it for kicks and small gold text on light surfaces. Awaiting approval. */
  --gold-ink: #8a6a2f;

  /* muted body copy on navy. 7.28:1 */
  --on-navy-soft: #c8cedd;

  /* type, brand_token category "type" */
  --font-head: 'Jost', system-ui, sans-serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --w-body: 300;
  --w-head: 300;
  --w-med: 500;
  --w-strong: 600;
  --h-cover: clamp(44px, 8.5vw, 80px);    /* covers */
  --h-working: clamp(34px, 6vw, 56px);    /* working pages */
}

/* motif: gold-rule. The quiet divider flourish, 60 by 2. */
.cyba-rule {
  height: 2px;
  width: 60px;
  background: linear-gradient(90deg, var(--accent), var(--gold-l));
  border-radius: 2px;
}

/* type: kick. Section kicker, uppercase, wide tracking.
   gold-ink on light surfaces, gold-light on navy. */
.cyba-kick {
  font-size: 13px;
  font-weight: var(--w-med);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}

.cyba-navy .cyba-kick {
  color: var(--gold-l);
}

/* motif: navy-hero. How every branded Cyba page opens. */
.cyba-navy {
  background: var(--navy);
  color: var(--cream);
}

/* motif: gold-pill-cta. The primary action. navy-deep on the gold gradient
   is 5.57:1 at the darker end of the sweep. */
.cyba-pill {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: var(--w-strong);
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  color: var(--navy-d);
  background: linear-gradient(92deg, var(--gold-l), var(--gold));
  border: none;
  border-radius: 999px;
  padding: 16px 34px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(201, 160, 90, .7);
  transition: filter .2s, transform .2s;
}

.cyba-pill:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.cyba-pill[disabled] {
  cursor: progress;
  opacity: .72;
  transform: none;
  box-shadow: none;
}

/* motif: paper-card. Content cards and summary panels. */
.cyba-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
}

.cyba-navy .cyba-card {
  background: rgba(255, 255, 255, .04);
  border-color: var(--line-d);
}

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

  .cyba-pill:hover {
    transform: none;
  }
}