seedproject-web/brand/tokens.css

/* ============================================================
   Carlos Arias — Brand Tokens v1
   Sumi-e: ink on paper, vermillion as seal.

   SOURCE OF TRUTH. Both /mocks and the Astro theme import this
   file. Never redeclare these values anywhere else — a hardcoded
   hex in a mock is how the design system dies.
   ============================================================ */

:root {
  /* ---- Ground & ink -------------------------------------- */
  /* Washi-toned ground, never pure #FFF.
     Ink carries a cool/blue bias — real sumi ink is blue-black,
     not neutral grey. The whole ramp inherits that bias. */
  --ca-paper:    #F6F5F2;
  --ca-paper-2:  #EFEEEA;
  --ca-rule:     #DFDDD7;
  --ca-ink-4:    #9A9CA3;
  --ca-ink-3:    #6E7078;
  --ca-ink-2:    #3D3F47;
  --ca-ink:      #14151A;

  /* ---- Seal ---------------------------------------------- */
  /* Shuniku (朱肉) — seal ink. Target 1–2% coverage per screen.
     Considered and rejected: Shu-iro #EA5506 (drifts orange at
     small sizes), Akane #B7282E (formal to the point of cold). */
  --ca-seal:     #D0342C;

  /* ---- Type ---------------------------------------------- */
  /* Faces are PLACEHOLDER system stacks. Scale and role
     assignments are final; swap in self-hosted faces at build. */
  --ca-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Songti SC", Georgia, "Times New Roman", serif;
  --ca-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ca-mono:  ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  /* 1.333 modular scale — wide intervals suit sparse layouts */
  --ca-s1: 0.75rem;   /* 12px · mono · eyebrow, meta, date     */
  --ca-s2: 0.875rem;  /* 14px · sans · small, captions, UI     */
  --ca-s3: 1rem;      /* 16px · sans · body                    */
  --ca-s4: 1.333rem;  /* 21px · sans · lede, pull-quote        */
  --ca-s5: 1.777rem;  /* 28px · serif · sub-heading            */
  --ca-s6: 2.369rem;  /* 38px · serif · section heading        */
  --ca-s7: 3.157rem;  /* 50px · serif · page title             */
  --ca-s8: 4.209rem;  /* 67px · serif · display                */

  --ca-lh-tight: 1.1;
  --ca-lh-head:  1.15;
  --ca-lh-body:  1.65;

  /* ---- Layout -------------------------------------------- */
  --ca-measure: 62ch;                        /* running text cap */
  --ca-gutter:  clamp(1.5rem, 6vw, 7rem);
  --ca-radius:  2px;                         /* near-square; not rounded-lg */
  --ca-hairline: 1px;

  /* ---- Motion -------------------------------------------- */
  /* Wabi-sabi motion is slow, organic, and never demands attention.
     Nothing bounces. Nothing pulses. Nothing loops in the viewport
     competing with the content. If an effect asks to be watched,
     it belongs to a different brand.

     Durations run long by web convention — ink moves at its own
     pace. Easing is asymmetric: quick to start, long to settle,
     like a brush lifting off paper. */
  --ca-dur-quick:  180ms;   /* focus, small state changes        */
  --ca-dur-base:   280ms;   /* hover, link underlines            */
  --ca-dur-slow:   620ms;   /* section reveals                   */
  --ca-dur-ink:   1500ms;   /* signature moments only            */

  --ca-ease:       cubic-bezier(.33, .1, .25, 1);   /* settle    */
  --ca-ease-press: cubic-bezier(.2, .9, .3, 1);     /* hanko     */

  --ca-reveal-y:   12px;    /* travel on scroll reveal — small.  */
  --ca-stagger:    70ms;    /* between siblings                  */
}

/* ---- Ink surface ----------------------------------------- */
/* A section that stays ink-ground in BOTH themes — for committed
   dark moments where the content itself demands darkness (video,
   cinematic imagery). Maps the standard token names onto dark
   values, so anything nested inside needs no changes at all.

   Use sparingly. One per page, at most. A page that is half dark
   and half light by accident just looks broken; by intent it reads
   as an entrance. */
:root {
  --ca-ink-surface-bg:   #121317;
  --ca-ink-surface-bg-2: #191A1F;
  --ca-ink-surface-rule: #2A2C33;
  --ca-ink-surface-fg:   #EDECE8;
  --ca-ink-surface-fg-2: #C2C1BD;
  --ca-ink-surface-fg-3: #8B8D95;
  --ca-ink-surface-fg-4: #5E606A;
  --ca-ink-surface-seal: #E8564A;
}

.ca-ink-surface {
  --ca-paper:   var(--ca-ink-surface-bg);
  --ca-paper-2: var(--ca-ink-surface-bg-2);
  --ca-rule:    var(--ca-ink-surface-rule);
  --ca-ink:     var(--ca-ink-surface-fg);
  --ca-ink-2:   var(--ca-ink-surface-fg-2);
  --ca-ink-3:   var(--ca-ink-surface-fg-3);
  --ca-ink-4:   var(--ca-ink-surface-fg-4);
  --ca-seal:    var(--ca-ink-surface-seal);
  background: var(--ca-paper);
  color: var(--ca-ink);
}

/* ---- Dark: ink ground, paper text ------------------------ */
/* The seal lifts on dark — #D0342C muddies against near-black,
   so dark mode uses a more luminous variant. Not an inversion. */
@media (prefers-color-scheme: dark) {
  :root {
    --ca-paper:   #121317;
    --ca-paper-2: #191A1F;
    --ca-rule:    #2A2C33;
    --ca-ink-4:   #5E606A;
    --ca-ink-3:   #8B8D95;
    --ca-ink-2:   #C2C1BD;
    --ca-ink:     #EDECE8;
    --ca-seal:    #E8564A;
  }
}

:root[data-theme="dark"] {
  --ca-paper:   #121317;
  --ca-paper-2: #191A1F;
  --ca-rule:    #2A2C33;
  --ca-ink-4:   #5E606A;
  --ca-ink-3:   #8B8D95;
  --ca-ink-2:   #C2C1BD;
  --ca-ink:     #EDECE8;
  --ca-seal:    #E8564A;
}

:root[data-theme="light"] {
  --ca-paper:   #F6F5F2;
  --ca-paper-2: #EFEEEA;
  --ca-rule:    #DFDDD7;
  --ca-ink-4:   #9A9CA3;
  --ca-ink-3:   #6E7078;
  --ca-ink-2:   #3D3F47;
  --ca-ink:     #14151A;
  --ca-seal:    #D0342C;
}